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之文件操作
Mar 07 Javascript
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
Immutable 在 JavaScript 中的应用
May 02 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
简单了解node npm cnpm的具体使用方法
Feb 27 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
jquery实现聊天机器人
Feb 08 jQuery
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
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
php中rename函数用法分析
2014/11/15 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
PHP检测用户语言的方法
2015/06/15 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
php如何把表单内容提交到数据库
2019/07/08 PHP
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
监控 url fragment变化的js代码
2010/04/19 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
详解Django框架中的视图级缓存
2015/07/23 Python
python3 实现的人人影视网站自动签到
2016/06/19 Python
Sanic框架配置操作分析
2018/07/17 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
《愚公移山》教学反思
2014/02/20 职场文书
租房协议书范本
2014/04/09 职场文书
公司总经理岗位职责
2015/04/01 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS