图片等比例缩放
(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;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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)上传图片的时候,就把图片等比例缩放为指定的大小,生成新的按比例缩放后的图片;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//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的一样。