JS实现按比例缩放图片的方法(附C#版代码)

 更新时间:2015年12月08日 12:07:59   作者:仰天一笑  
这篇文章主要介绍了JS实现按比例缩放图片的方法,结合实例形式较为详细的分析了JavaScript实现等比例缩放图片的原理与具体实现技巧,并附上C#版的图片缩放代码做对比参考,需要的朋友可以参考下

本文实例讲述了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:使用探讨

    JavaScript中伪协议 javascript:使用探讨

    javascript:这个特殊的协议类型声明了URL的主体是任意的javascript代码,它由javascript的解释器运行
    2014-07-07
  • js实现无缝轮播图插件封装

    js实现无缝轮播图插件封装

    这篇文章主要为大家详细介绍了js实现无缝轮播图插件封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • JS图片懒加载技术实现过程解析

    JS图片懒加载技术实现过程解析

    这篇文章主要介绍了JS图片懒加载技术实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • JS+CSS实现模仿浏览器网页字符查找功能的方法

    JS+CSS实现模仿浏览器网页字符查找功能的方法

    这篇文章主要介绍了JS+CSS实现模仿浏览器网页字符查找功能的方法,实例分析了javascript实现查找功能的样式及相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • JS定时器实例详细分析

    JS定时器实例详细分析

    在javascritp中,有两个关于定时器的专用函数,下面讲解一下两个定时器,有需要的朋友可以参考一下
    2013-10-10
  • 原生js实现新闻列表展开/收起全文功能

    原生js实现新闻列表展开/收起全文功能

    本文主要介绍了原生js实现新闻列表展开/收起全文功能的知识要点、注意事项以及完整代码。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • js仿小米官网图片轮播特效

    js仿小米官网图片轮播特效

    这篇文章主要为大家详细介绍了js仿小米官网图片轮播特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • JavaScript中Null与Undefined的区别解析

    JavaScript中Null与Undefined的区别解析

    这篇文章主要介绍了JavaScript中Null与Undefined的区别解析,本文给出了多个代码实例讲解它们之间的区别,需要的朋友可以参考下
    2015-06-06
  • js scrollTop如何到达指定位置

    js scrollTop如何到达指定位置

    很早之前就想分享这篇心得,幸之今天能在这里完成,好了,话不多说,进入正题。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • JS判断一个数是否是水仙花数

    JS判断一个数是否是水仙花数

    水仙花数是指一个 n 位数 ( n≥3 ),它的每个位上的数字的 n 次幂之和等于它本身。下面通过本文给大家分享JS判断一个数是否是水仙花数,需要的朋友参考下吧
    2017-06-06

最新评论