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 相关文章推荐
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 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 显示指定路径下的图片
2009/10/29 PHP
php中$this-&amp;gt;含义分析
2009/11/29 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
PHP中实现crontab代码分享
2015/03/26 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
JS 强制设为首页的代码
2009/01/31 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
使用pdb模块调试Python程序实例
2015/06/02 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
Python学生信息管理系统修改版
2018/03/13 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
python线程池threadpool实现篇
2018/04/27 Python
利用Python实现原创工具的Logo与Help
2018/12/03 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
光盘行动倡议书
2014/02/02 职场文书
考试作弊检讨书
2015/01/27 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
Vue router配置与使用分析讲解
2022/12/24 Vue.js