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 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
javascript操作表格排序实例分析
May 06 Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
Vue封装的组件全局注册并引用
Jul 24 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 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
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
python文件操作整理汇总
2014/10/21 Python
Python装饰器用法实例总结
2018/05/26 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
python创建学生管理系统
2019/11/22 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
大学生的自我鉴定范文
2014/01/21 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
Elasticsearch 聚合查询和排序
2022/04/19 Python
python高温预警数据获取实例
2022/07/23 Python