function dataURLToBlob(dataurl) {
const arr = dataurl.split(',');
const mime = arr[0].match(/:(.*?);/)[1];
const bstr = atob(arr[1]);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
export default function compressImage(file, quality, callback) {
// 压缩图片需要的一些元素和对象
const reader = new FileReader();
const img = new Image();
return new Promise((resolve, reject) => {
// 文件base64化,以便获知图片原始尺寸
reader.onload = (e) => {
img.src = e.target.result;
};
reader.readAsDataURL(file);
// 缩放图片需要的canvas
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
// base64地址图片加载完毕后
img.onload = (e) => {
const that = e.target;
// 图片原始尺寸
const originWidth = that.width;
const originHeight = that.height;
// 最大尺寸限制
const maxWidth = 750;
const maxHeight = 750;
// 目标尺寸
let targetWidth = originWidth;
let targetHeight = originHeight;
// 图片尺寸超过400x400的限制
if (originWidth > maxWidth || originHeight > maxHeight) {
if (originWidth / originHeight > maxWidth / maxHeight) {
// 更宽,按照宽度限定尺寸
targetWidth = maxWidth;
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
} else {
targetHeight = maxHeight;
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
}
}
// canvas对图片进行缩放
canvas.width = targetWidth;
canvas.height = targetHeight;
// 清除画布
context.clearRect(0, 0, targetWidth, targetHeight);
// 图片压缩
context.drawImage(img, 0, 0, targetWidth, targetHeight);
// canvas转为blob并上传
const dataUrl = canvas.toDataURL(file.type || 'image/png', quality);
const blob = dataURLToBlob(dataUrl);
resolve({
dataUrl,
blob,
});
};
});
}