网络编程
位置:首页>> 网络编程>> JavaScript>> 整理各种js按比例缩放图片方法

整理各种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
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com