afterRead(file){
if(this.fileList.length > 1){
this.fileList.splice(1);
this.$msg({
text:'只能选择这么多!',
type:'info'
})
return false;
}
let maxSize = 1 * 1024 * 1024;
let fileObj = file.file;
if (fileObj.size > maxSize) {
this.imgcompress(fileObj, file);
}else{
let Files = this.Files;
Files.push(file.file);
}
},
imgcompress(file, files) {
const img = document.createElement('img')
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = e => {
img.src = e.target.result;
const { width: originWidth, height: originHeight } = img;
const maxWidth = 1000,
maxHight = 1000;
if (originWidth > maxWidth || originHeight > maxHight) {
if (originWidth > originHeight) {
const Proportion = Math.ceil(originWidth / maxWidth);
let targetWidht = parseInt(originWidth / Proportion);
let targetHeight = parseInt(originHeight / Proportion);
this.createCanvasCompress(targetWidht, targetHeight, img, files);
} else {
const Proportion = Math.ceil(originHeight / maxHight);
let targetWidht = parseInt(originWidth / Proportion);
let targetHeight = parseInt(originHeight / Proportion);
let bold = this.createCanvasCompress(
targetWidht,
targetHeight,
img,
files
);
}
} else {
let quality = 0.8;
this.createCanvasCompress(
originWidth,
originHeight,
img,
files,
quality
);
}
};
},
createCanvasCompress(targetWidth, targetHeight, img, files, quality) {
let that = this;
return new Promise((resolve, reject) => {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
canvas.width = targetWidth;
canvas.height = targetHeight;
context.clearRect(0, 0, targetWidth, targetHeight);
console.log(targetWidth, targetHeight);
context.drawImage(img, 0, 0, targetWidth, targetHeight);
let bold = canvas.toBlob(
function(blob) {
resolve(blob);
that.Files.push(blob);
let files1 = new window.File([blob], files.file.name, {type: files.file.type})
console.log(files1 )
},
"image/png",
quality
);
});
},