实现JavaScript图片简单等比例缩放

快乐打工仔 分类:实例代码

JavaScript图片简单等比例缩放属于前端实例代码,有关更多实例代码大家可以查看

上传图片时候,可能图片的尺寸是未知的,例如尺寸过大,可能会导致网页变形或者错误。

美观度就会受到极大影响,所以通常要进行等比例缩放。

代码实例如下:

var resizeImg=function(img, maxWidth, maxHeight){
  var w=img.width;
  var h=img.height;
  //当图片比预览区域小时不做任何改变
  if(w < maxWidth && h < maxHeight) return;
  // 当实际图片比例大于预览区域宽高比例时
  // 缩放图片宽度,反之缩放图片宽度
  w/h>maxWidth/maxHeight?img.width=maxWidth:img.height=maxHeight;
}

上面代码的计算方式是一个纯数学问题,自行分析即可。

JavaScript图片简单等比例缩放,这样的场景在实际项目中还是用的比较多的,关于JavaScript图片简单等比例缩放就介绍到这了。

回复

我来回复
  • 暂无回复内容