整理各种js按比例缩放图片方法

来源:仰天一笑的blog 时间:2007-09-27 20:01:00 

asp之家注:在网页设计或编程中如何以最方便的方法来处理图片的宽高,以达到最佳的显示效果,这个问题相信很多网页制作人员都遇到过,最麻烦最费时间的做法是用制图软件Photoshop等来一张张处理,这种方法如果处理一两张还好点,多了真是麻烦;最快的做法是直接给图片固定一个宽高,这样做的缺点就是影响页面的美观,而大多数的做法是使用JS来控制图片的显示尺寸在一定的范围内,不会比例失调,保证了图片不会变形,相信这种方法是最合适的。本文就给你介绍了使用js来处理图片尺寸的几个方法:

看到海东兄的按比例缩放图片 ,我就把我写的js版本的也拿出来show一下,哈哈!
js版本(by仰天一笑):

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了;同时也附上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;
        }

标签:缩放,图片,比例
0
投稿

猜你喜欢

  • 讲解无法打开用户默认数据库的解决方法

    2008-12-05 15:55:00
  • 对学好网页设计很有价值的一句话

    2007-10-28 16:04:00
  • linux下默认安装mysql数据库

    2011-03-08 09:24:00
  • 和server XMLHTTP相关的几个函数

    2008-09-21 13:56:00
  • ASP下标越界错误的解决方法

    2008-10-19 17:39:00
  • 大大改善用户体验的10个小细节

    2008-09-17 13:27:00
  • js小方框中浏览大图类似google earth效果

    2007-10-28 19:30:00
  • 浏览器右下角弹出提示窗口

    2008-10-30 12:37:00
  • QQ连连看 for iPhone 设计实录分享

    2010-09-25 12:54:00
  • 最新LOGO设计流行趋势——叶子

    2007-10-02 18:26:00
  • 三谈Iframe自适应高度

    2010-08-03 13:04:00
  • 处理HTML代码的若干函数

    2009-08-21 13:21:00
  • DreamWeaver经典技巧四则

    2007-12-03 11:34:00
  • [翻译]标记语言和样式手册 chapter 5 表单

    2008-01-23 17:20:00
  • js打开新窗口方法代码收集

    2007-09-05 19:20:00
  • 如何在ADSI中查询用户属性?

    2010-06-17 12:53:00
  • ajax 同步请求和异步请求的差异分析

    2011-07-05 12:36:04
  • Oracle 数据表分区的策略

    2010-07-21 13:30:00
  • asp 多关键词搜索的简单实现方法

    2011-04-11 10:45:00
  • 验证码-挑战你的智慧

    2008-09-10 13:08:00
  • asp之家 网络编程 m.aspxhome.com