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 相关文章推荐
javascript 类定义的4种方法
Sep 12 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
详解Next.js页面渲染的优化方案
Jan 27 Javascript
JavaScript canvas实现流星特效
May 20 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
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
浅谈PHP语法(1)
2006/10/09 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
python发送HTTP请求的方法小结
2015/07/08 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
python实现智能语音天气预报
2019/12/02 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
Python异常处理机制结构实例解析
2020/07/23 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
HTML5之语义标签介绍
2016/07/07 HTML / CSS
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
2014法制宣传日活动总结范文
2014/11/01 职场文书
前台接待员岗位职责
2015/04/15 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript