JS实现按比例缩小图片宽高

本文实例为大家分享了JS实现按比例缩小图片宽高的具体代码，供大家参考，具体内容如下

小编再为大家分享一段：图片按宽高比例进行自动缩放代码

/**
 * 图片按宽高比例进行自动缩放
 * @param ImgObj
 * 缩放图片源对象
 * @param maxWidth
 * 允许缩放的最大宽度
 * @param maxHeight
 * 允许缩放的最大高度
 * @usage 
 * 调用：
 */
function DrawImage(ImgObj, maxWidth, maxHeight){
 var image = new Image();
 //原图片原始地址（用于获取原图片的真实宽高，当标签指定了宽、高时不受影响）
 image.src = ImgObj.src;
 // 用于设定图片的宽度和高度
 var tempWidth;
 var tempHeight;
 
 if(image.width > 0 && image.height > 0){
 //原图片宽高比例 大于 指定的宽高比例，这就说明了原图片的宽度必然 > 高度
 if (image.width/image.height >= maxWidth/maxHeight) {
  if (image.width > maxWidth) {
  tempWidth = maxWidth;
  // 按原图片的比例进行缩放
  tempHeight = (image.height * maxWidth) / image.width;
  } else {
  // 按原图片的大小进行缩放
  tempWidth = image.width;
  tempHeight = image.height;
  }
 } else {// 原图片的高度必然 > 宽度
  if (image.height > maxHeight) { 
  tempHeight = maxHeight;
  // 按原图片的比例进行缩放
  tempWidth = (image.width * maxHeight) / image.height; 
  } else {
  // 按原图片的大小进行缩放
  tempWidth = image.width;
  tempHeight = image.height;
  }
 }
 // 设置页面图片的宽和高
 ImgObj.height = tempHeight;
 ImgObj.width = tempWidth;
 // 提示图片的原来大小
 ImgObj.alt = image.width + "×" + image.height;
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。