JS实现按比例缩放图片的方法(附C#版代码)


Posted in Javascript onDecember 08, 2015

本文实例讲述了JS实现按比例缩放图片的方法。分享给大家供大家参考,具体如下:

js版本:

function resizeImage(obj, MaxW, MaxH)
{
 var imageObject = obj;
 var state = imageObject.readyState;
 if(state!='complete') 
 {
  setTimeout("resizeImage("+imageObject+","+MaxW+","+MaxH+")",50);
  return;
 }
 var oldImage = new Image();
 oldImage.src = imageObject.src;
 var dW = oldImage.width; 
 var dH = oldImage.height;
 if(dW>MaxW || dH>MaxH) 
 {
  a = dW/MaxW; b = dH/MaxH;
  if( b>a ) a = b;
  dW = dW/a; dH = dH/a;
 }
 if(dW > 0 && dH > 0) 
 {
  imageObject.width = dW;
  imageObject.height = dH;
 }
}

使用很简单:<img src="../pic.jpg" onload='resizeImage(this,60,90)> 就OK了;

注:等比例放缩的时候会出现抖动的情况,处理方法很简单,你在img的属性先设置它的widht和height,这样的话加载的时候绝对不会超过这个尺寸,等你js运行好之后就会调到你所规定的比例,绝对不会以下撑到很大。

同时也附上C#版本的

/// <summary>
/// 按比例缩放图片
/// </summary>
/// <param name="imgUrl">图片的路径</param>
/// <param name="imgHeight">图片的高度</param>
/// <param name="imgWidth">图片的宽度</param>
/// <returns></returns>
public static string GetImageSize(string imgUrl,int imgHeight,int imgWidth)
{
 string fileName = System.Web.HttpContext.Current.Server.MapPath(imgUrl);
 string strResult = string.Empty;
 if(System.IO.File.Exists(fileName) && imgHeight != 0 && imgWidth != 0)
 {
  decimal desWidth;decimal desHeight;//目标宽高
  System.Drawing.Image objImage = System.Drawing.Image.FromFile(fileName);
  decimal radioAct = (decimal)objImage.Width/(decimal)objImage.Height;//原始图片的宽高比
  decimal radioLoc = (decimal)imgWidth/(decimal)imgHeight;//图片位的宽高比
  if(radioAct > radioLoc)//原始图片比图片位宽
  {  
   decimal dcmZoom = (decimal)imgWidth/(decimal)objImage.Width;
   desHeight = objImage.Height*dcmZoom;
   desWidth = imgWidth;
  }
  else
  {
   decimal dcmZoom = (decimal)imgHeight/(decimal)objImage.Height;
   desWidth = objImage.Width*dcmZoom;
   desHeight = imgHeight;
  }
  objImage.Dispose(); //释放资源
  strResult = "width=\"" + Convert.ToString((int)desWidth) + "\" height=\""
   + Convert.ToString((int)desHeight) + "\" ";
 }
 return strResult;
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
extjs 04_grid 单击事件新发现
Nov 27 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
vue组件name的作用小结
May 23 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
three.js显示中文字体与tween应用详析
Jan 04 Javascript
JS获取文件大小方法小结
Dec 08 #Javascript
js+ajax实现获取文件大小的方法
Dec 08 #Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 #Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 #Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 #Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 #Javascript
jQuery实现的简单提示信息插件
Dec 08 #Javascript
You might like
PHP网站备份程序代码分享
2011/06/10 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
JavaScript模块详解
2017/12/18 Javascript
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
Python3处理HTTP请求的实例
2018/05/10 Python
Python格式化日期时间操作示例
2018/06/28 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
python def 定义函数,调用函数方式
2020/06/02 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
澳大利亚在线奢侈品时尚零售平台:Azura Runway
2021/01/13 全球购物
大学生的四年学习自我评价
2013/12/13 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
宣传标语大全
2014/07/01 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python