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 remove 自定义数组删除方法
Oct 20 Javascript
统计出现最多的字符次数的js代码
Dec 03 Javascript
JQuery中$之选择器用法介绍
Apr 05 Javascript
JS仿flash上传头像效果实现代码
Jul 18 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
js获取ip和地区
Mar 10 Javascript
详解如何在angular2中获取节点
Nov 23 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
javascript前端实现多视频上传
Dec 13 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 nl2br()格式化输出的详解
2013/06/05 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
Add a Formatted Table to a Word Document
2007/06/15 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
JavaScript代码调试方法实例小结
2019/01/05 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
Python程序设计入门(2)变量类型简介
2014/06/16 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
长青弘远的面试题
2012/06/09 面试题
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
开票证明
2015/06/23 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书