zoukankan      html  css  js  c++  java
  • (转)按比例缩放图片

    看到海东兄的按比例缩放图片 ,我就把我写的js版本的也拿出来show一下,哈哈!
    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了;同时也附上C#版本的

    C#版本---海东兄 http://www.cnblogs.com/ghd258/archive/2005/11/07/270447.html

    1/// <summary>
     2        /// 按比例缩放图片
     3        /// </summary>
     4        /// <param name="imgUrl">图片的路径</param>
     5        /// <param name="imgHeight">图片的高度</param>
     6        /// <param name="imgWidth">图片的宽度</param>
     7        /// <returns></returns>

     8        public static string GetImageSize(string imgUrl,int imgHeight,int imgWidth)
     9        {
    10            string fileName = System.Web.HttpContext.Current.Server.MapPath(imgUrl);
    11            string strResult = string.Empty;
    12            if(System.IO.File.Exists(fileName) && imgHeight != 0 && imgWidth != 0)
    13            {
    14                decimal desWidth;decimal desHeight;                                            //目标宽高
    15                System.Drawing.Image objImage = System.Drawing.Image.FromFile(fileName);
    16                decimal radioAct = (decimal)objImage.Width/(decimal)objImage.Height;        //原始图片的宽高比
    17                decimal radioLoc = (decimal)imgWidth/(decimal)imgHeight;                    //图片位的宽高比
    18                if(radioAct > radioLoc)                                                        //原始图片比图片位宽
    19                {        
    20                    decimal dcmZoom = (decimal)imgWidth/(decimal)objImage.Width;
    21                    desHeight = objImage.Height*dcmZoom;
    22                    desWidth = imgWidth;
    23                }

    24                else
    25                {
    26                    decimal dcmZoom = (decimal)imgHeight/(decimal)objImage.Height;
    27                    desWidth = objImage.Width*dcmZoom;
    28                    desHeight = imgHeight;
    29                }

    30                objImage.Dispose();                //释放资源
    31                strResult = "width=\"" + Convert.ToString((int)desWidth) + "\" height=\""
    32                    + Convert.ToString((int)desHeight) + "\" ";
    33            }

    34            return strResult;
    35        }







    <script language="javascript">
    function changeImg(mypic){
    var xw=160;
    var xl=180;

    var width = mypic.width;
    var height = mypic.height;
    var bili = width/height;

    var A=xw/width;
    var B=xl/height;

    if(!(A>1&&B>1))
    {
    if(A<B)
    {
    mypic.width=xw;
    mypic.height=xw/bili;
    }
    if(A>B)
    {
    mypic.width=xl*bili;
    mypic.height=xl;
    }
    }
    }
    </script>
    <img src="sh180.jpg" onload="changeImg(this)">

  • 相关阅读:
    vue中倒计时的用法
    ant.design 中各种问题
    vue-cli3.0跨域代理问题
    vue-cli3.0配置多页面应用
    vue-axios中post和get携带参数和token
    后台返回的时间戳转化为前端的日期
    微信与支付宝二维码在页面中的使用
    git梗概介绍
    键盘和鼠标事件的区别和使用
    vue.js学习笔记(5)— Vue路由传参
  • 原文地址:https://www.cnblogs.com/zwei1121/p/596717.html
Copyright © 2011-2022 走看看