js 图片压缩

需要使用canvas来压缩

val context = canvas.getContext("2d");

//参数说明

//img   图像对象或者canvas对象

// x 图像的x坐标

// y 轴坐标

// w 宽度  可能会导致宽度缩放

// h 高度 可能会导致高度缩放

context.drawImage(img,x,y,w,h)

// 参数说明

// 第1个是回调函数 返回一个blob 可以使用 formdata 包装后直接上传

// 第2个是 mime类型

// 第三个是质量压缩比例    越小压缩比例越高 

canvas.toBlob(blob => {

},"image/jpeg", 0.5)

这样我们可以实现宽高的压缩和质量的压缩

前端压缩体验比较好，减少用户流量消耗，对服务器压力比较小

 

使用img.naturalWidth  img.naturalHeight 获取图片的原始宽高

需要注意缩放时需要保持宽高比，防止图片变形