/*
* 图片压缩
* @
* */
compressImage(file) {
let that = this;
return new Promise((resolve, reject) => {
const reader = new FileReader(), img = new Image();
const maxSize = 5 * 1024 * 1024; // 最大设置为5M
reader.readAsDataURL(file);
reader.onload = function () {
img.src = this.result;
};
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
img.onload = function () {
const originWidth = this.width, originHeight = this.height;
const maxWidth = 400, maxHeight = 400;
let targetWidth = originWidth, 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.width = targetWidth;
canvas.height = targetHeight;
// 清除画布
context.clearRect(0, 0, targetWidth, targetHeight);
// 图片压缩
context.drawImage(img, 0, 0, targetWidth, targetHeight);
const dataurl = canvas.toDataURL('image/png');
resolve(that.dataURLtoFile(dataurl, file.name));
// canvas.toBlob((blob) => {
// resolve(blob)
// }, file.type || 'image/png')
}
})
}
/*
* dataul to Blob
* */
dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type: mime});
}
/*
* dataul to File
* */
dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type: mime});
}
