zoukankan      html  css  js  c++  java
  • 图片等比例缩放

    以下内容摘自博客园学之乐 转载请注明出处:http://www.cnblogs.com/heluo/archive/2012/09/14/2684577.html

    (1)从网上查找的js代码,这段js代码是把图片按照规定的大小等比例不变形缩放后显示的,原图片大小不会变。

    <img alt="" src="picture/DSCN1793.JPG"  onload="DrawImage(this);" />

    这样在html代码中就不要指定width和height,若是指定的width和height和缩放后的大小不一样,图片就会自动填充满html中指定的width和height,图像就会变形。所以只要在js中指定了缩放后的宽度和高度,html中就不要指定了。

    核心思想:oldHeight/oldWidth=newHeight/newWidth.

    =》newHeight=oldHeight*newWidth/oldWidth 或者 newWidth=newHeight*oldWidth/oldHeight

     缩放的时候有两种形式:

    1、原图片是宽400高300的,而你所要缩放的图片是宽40.高60,也就是(oldHeight/oldWidth>=newHeight/newWidth),这个时候新图片的宽度就按照,所要求的宽度,新图片的高度

    newWidth=newWidth;

    newHeight=oldHeight*newWidth/oldWidth;

    2、若oldHeight/oldWidth<newHeight/newWidth

    newHeight=newHeight;

    newWidth=newWidth=newHeight*oldWidth/oldHeight;

    <script type="text/javascript">
            function DrawImage(ImgD) {
                //缩放成照片宽400.高300
                var nWidth = 400;
                var nHeight=300;
                var image = new Image();
                image.src = ImgD.src;
                image.width = ImgD.width;
                image.height = ImgD.height;
                if (image.width > 0 && image.height > 0) {
                    //宽度与高度的比例大于或等于要求显示的比例(说明比较宽)
                    if (image.width / image.height >= nWidth / nHeight) {
                    //如果宽度大于要求显示的宽度
                        if (image.width > nWidth) {
                            ImgD.width = nWidth; //那么图片就显示要显示的宽度
                            ImgD.height = (image.height * nWidth) / image.width; 
                        } else {
                            ImgD.width = image.width;
                            ImgD.height = image.height;
                        }
                    }
                    else {
                        //说明比较高
                        if (image.height > nHeight) {
                            ImgD.height = nHeight;
                            ImgD.width = (image.width * nHeight) / image.height;
                        } else {
                            ImgD.width = image.width;
                            ImgD.height = image.height;
                        }
                    }
                }
            }
            </script>

    (2)上传图片的时候,就把图片等比例缩放为指定的大小,生成新的按比例缩放后的图片;

    //oWidth原照片的宽度 oHeight原照片的高度 newW要缩放的宽度 newH 要缩放的高度
    public void bili(int oWidth, int oHeight, int newW, int newH)
            {
              
                if (oWidth > 0 && oHeight > 0)
                {
                    if (oWidth / oHeight >= newW / newH)
                    {
                        if (oWidth > newW)
                        {
                            _tWidth = newW;
                            _tHeight = (oHeight * newW) / oWidth;
                        }
                        else
                        {
                            _tWidth = oWidth;
                            _tHeight = oHeight;
                        }
                    }
                    else
                    {
                        if (_tHeight > newH)
                        {
                            _tHeight = newH;
                            _tWidth = (oWidth * newH) / oHeight;
                        }
                        else
                        {
                            _tWidth = oWidth;
                            _tHeight = oHeight;
                        }
                    }
                }
            }
    
     /// <summary>
            /// Resize图片
            /// </summary>
            /// <param name="bmp">原始Bitmap</param>
            /// <param name="newW">新的宽度</param>
            /// <param name="newH">新的高度</param>
            /// <returns>处理以后的图片</returns>
            public Bitmap KiResizeImage(Bitmap bmp, int newW, int newH)
            {
                try
                {
                    Bitmap b = new Bitmap(newW, newH);
                    Graphics g = Graphics.FromImage(b);
    
                    // 插值算法的质量
                    g.InterpolationMode = InterpolationMode.HighQualityBicubic;
                    // 高质量
                    g.SmoothingMode = SmoothingMode.HighQuality;
    
                    g.DrawImage(bmp, new Rectangle(0, 0, newW, newH), new Rectangle(0, 0, bmp.Width, bmp.Height), GraphicsUnit.Pixel);
                    g.Dispose();
    
                    return b;
                }
                catch
                {
                    return null;
                }
            }
    
    
    /// <summary>
            ///  缩放
            /// </summary>
            /// <param name="imageUrl">图片的路径</param>
            /// <param name="savaPath">保存路径</param>
            /// <param name="newW">新图片的宽度</param>
            /// <param name="newH">新图片的高度</param>
            /// <returns></returns>
            public void KiResizeImage(string imageUrl, string savePath, int newW, int newH)
            {
                System.Drawing.Image image = System.Drawing.Image.FromFile(imageUrl);
    
                bili(image.Width, image.Height, newW, newH);//比例缩放
    
                Bitmap NBM = new System.Drawing.Bitmap(image, image.Width, image.Height);
                image = KiResizeImage(NBM, _tWidth, _tHeight, Mode);
                if (File.Exists(savePath))
                    File.Delete(savePath);
                image.Save(savePath, ImageFormat.Jpeg);
            }

    缩放比例的计算和上面的js的一样。

  • 相关阅读:
    IfcQuantityWeight
    IfcPhysicalComplexQuantity
    IfcBinary
    大服务器
    DFF环境配置
    Java程序设置为开机自启动
    IfcArbitraryProfileDefWithVoids
    定位日志
    blazor相关资料
    老人与海 电影
  • 原文地址:https://www.cnblogs.com/zzuIvy/p/tupian_dengbilisuofang.html
Copyright © 2011-2022 走看看