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 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
看了就知道什么是JSON
Dec 09 Javascript
javascript 跳转代码集合
Dec 03 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 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链接MySQL的常用扩展函数
2014/10/23 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
做网页的一些技巧
2007/02/01 Javascript
syntaxhighlighter 使用方法
2007/07/02 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
Python实现仿射密码的思路详解
2020/04/23 Python
Python学习笔记之装饰器
2020/08/06 Python
行政管理人员精品工作推荐信
2013/11/04 职场文书
保安自我鉴定范文
2013/12/08 职场文书
珍爱生命演讲稿
2014/05/10 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
党纪处分决定书
2015/06/24 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python