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父级以及同级元素查找介绍
Sep 04 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
jquery获取tagName再进行判断
May 29 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
Jquery树插件zTree用法入门教程
Feb 17 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
从理论角度讨论JavaScript闭包
Apr 03 Javascript
Node.js实现批量下载图片简单操作示例
Jan 18 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类的封装与继承详解
2015/09/29 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
python requests更换代理适用于IP频率限制的方法
2019/08/21 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
给孩子的新年寄语
2014/04/08 职场文书
党员三严三实对照检查材料
2014/10/13 职场文书
整脏治乱工作简报
2015/07/21 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
Log4j.properties配置及其使用
2021/08/02 Java/Android
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
Python基本的内置数据类型及使用方法
2022/04/13 Python
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL