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的获取JS文件中的字符串内容
Feb 14 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
jquery自定义表格样式
Nov 23 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
js转html实体的方法
Sep 27 Javascript
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
jQuery弹框插件使用方法详解
May 26 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
php addslashes 函数详细分析说明
2009/06/23 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
php绘制一条弧线的方法
2015/01/24 PHP
解析javascript 实用函数的使用详解
2013/05/10 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
质检部职责
2013/12/28 职场文书
珍惜水资源建议书
2014/03/12 职场文书
奉献爱心演讲稿
2014/09/04 职场文书
教师工作失职检讨书
2014/09/18 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
个人欠条范本
2015/07/03 职场文书
职工培训工作总结
2015/08/10 职场文书
信息技术研修心得体会
2016/01/08 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript