1.压缩图片是通过canvas做到的。
具体原理【1】先获取图片的原始尺寸【2】确定压缩后的图片尺寸,(就是将图片尺寸都缩小达到压缩目的)【3】在canvas画布上重新画一遍这个缩小后尺寸的图片【4】把该图片转为blob格式进行发送或者其他进一步的处理。其中successF为成功后的回调函数。该方法是在uni-app中用的,所以先用的uni.getImageInfo获取原本的图片尺寸。这里需要注意的是,如果没有采用ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);这一步重画图片,直接到把canvas转为blob格式,会出现图片是全黑色的。必须通过drawImage方法重新绘制图片,才能得到压缩后的图片信息。
代码如下
xport function handleImage(src,type,successF){
uni.getImageInfo({
src: src,
success: function (res) {
let canvasWidth = res.width //图片原始长宽
let canvasHeight = res.height;
let base = canvasWidth/canvasHeight;
if(canvasWidth>500){
canvasWidth = 500;
canvasHeight = Math.floor(canvasWidth/base);
}
//进行压缩
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width = canvasWidth;
canvas.height = canvasHeight;
let img = new Image();
img.src = src; // 要压缩的图片
//重画这个图片
ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
//转为blob格式发送
canvas.toBlob( function(blob) {
const blobUrl = URL.createObjectURL(blob)
console.log("压缩后的bloburl:"+blobUrl)
successF(blobUrl)
}, 'image/jpeg');
},
fail: (err) => {
reject('获取图片信息失败')
}
})
}