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的分页控件(C#)
Jan 06 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
js实现图片上传并正常显示
Dec 19 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
jQuery实现用户输入自动完成功能
Feb 13 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 Javascript
浅析Vue下的components模板使用及应用
Nov 27 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的cms
2010/12/19 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
Python3.x中自定义比较函数
2015/04/24 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
Python 将pdf转成图片的方法
2018/04/23 Python
Django开发中的日志输出的方法
2018/07/02 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
在django模板中实现超链接配置
2019/08/21 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
奇怪的鱼:Weird Fish
2018/03/18 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
建筑设计所实习生自我鉴定
2013/09/25 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
党员承诺书格式范文
2015/04/28 职场文书
单位证明范文
2015/06/18 职场文书
创业计划书之熟食店
2019/10/16 职场文书
详解Python描述符的工作原理
2021/06/11 Python
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫
docker-compose部署Yapi的方法
2022/04/08 Servers