重要的事情说三遍canvas只支持jpg图片压缩,canvas只支持jpg图片压缩,canvas只支持jpg图片压缩
手机照的图片基本都是jpg
export function compressImg(file, image, quality) {
return new Promise(resolve => {
// 图片压缩
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const originWidth = image.width;
const originHeight = image.height;
canvas.width = originWidth;
canvas.height = originHeight;
context.clearRect(0, 0, originWidth, originHeight);
context.drawImage(image, 0, 0, originWidth, originHeight);
canvas.toBlob((blob) => {
const imgFile = new File([blob], file.name, { type: file.type }); // 将blob对象转化为图片文件
resolve(imgFile);
}, file.type, quality); // file压缩的图片类型
})
}
或者可以使用大神的插件,完美的解决,因为上面的这个quality不好控制,这个quality不是按比例控制的,下面是大神的帖子地址