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 相关文章推荐
js加强的经典分页实例
Mar 15 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 Javascript
jquery 正整数数字校验正则表达式
Jan 10 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
vue-cli webpack 开发环境跨域详解
May 18 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
Vue中props的详解
May 16 Javascript
微信小程序实现时间进度条功能
Nov 17 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
用文本作数据处理
2006/10/09 PHP
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
PyQt5实现简单的计算器
2020/05/30 Python
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
业务副厂长岗位职责
2014/01/03 职场文书
幼儿园春游活动方案
2014/01/19 职场文书
电工工作职责范本
2014/02/22 职场文书
项目建议书模板
2014/05/12 职场文书
创先争优标语
2014/06/27 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
海洋天堂观后感
2015/06/05 职场文书
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫