diff --git a/src/components/cmp/uploadFile/index.vue b/src/components/cmp/uploadFile/index.vue index 9d71176..f1742b5 100644 --- a/src/components/cmp/uploadFile/index.vue +++ b/src/components/cmp/uploadFile/index.vue @@ -339,9 +339,40 @@ export default { }) }, // 重塑图片尺寸 - remodelingImg(img,file) { + // remodelingImg(img,file) { + // this.$nextTick(()=>{ + // const canvas = document.getElementById('resizedCanvas'); + // const ctx = canvas.getContext('2d'); + + // // 设置canvas的宽度和高度 + // canvas.width = this.imgWidth !== -1 ? this.imgWidth : img.width; // 新宽度 + // canvas.height = this.imgHeight !== -1 ? this.imgHeight : img.height; // 新高度 + + // // 绘制图片到canvas上 + // ctx.drawImage(img, 0, 0, canvas.width, canvas.height); + + // // 将canvas的内容转换回图片 + // const resizedImg = canvas.toDataURL(file.raw.type, 1); // 第二个参数是图片质量 + + // const fileName = file.name; // 文件的名字 + + // const newFile = base64ToFile(resizedImg, fileName); // base64 转 file + + // this.tailorContent['tailorImg'] = {raw:newFile,size:newFile.size,url:this.dataUrlToBlob(newFile)} + + // console.log(newFile,'重塑图片数据',this.tailorContent) + + // // if(this.tailorContent.size) + // // 显示修改后的图片 + // // document.getElementById('resizedCanvas').style.display = 'block'; + + // }) + // }, + // 重塑图片尺寸 及压缩图片 callback + remodelingImg(img,file,flag) { this.$nextTick(()=>{ + if(!flag){ const canvas = document.getElementById('resizedCanvas'); const ctx = canvas.getContext('2d'); @@ -359,13 +390,74 @@ export default { const newFile = base64ToFile(resizedImg, fileName); // base64 转 file - this.tailorContent['tailorImg'] = {raw:newFile,size:newFile.size} - + const isLt2M = this.imgSize !== -1 ? newFile.size < this.imgSize * 1024 * 1024 : false + // console.log('img,1111111111','flag',flag) + if(!isLt2M && this.imgSize !== -1){ + this.remodelingImg(img,file,true) + }else{ + this.tailorContent['tailorImg'] = {raw:newFile,size:newFile.size} + } + }else{ + const canvas = document.getElementById('resizedCanvas'); + const ctx = canvas.getContext('2d'); + + // 设置canvas的宽度和高度 + canvas.width = this.imgWidth !== -1 ? this.imgWidth : img.width; // 新宽度 + canvas.height = this.imgHeight !== -1 ? this.imgHeight : img.height; // 新高度 + + // 绘制图片到canvas上 + // console.log('img','canvas',canvas,'ctx',ctx) + ctx.drawImage(img, 0, 0, canvas.width, canvas.height); + + this.canvasCompress(canvas,(imageBlob) => { + // const imageUrl = URL.createObjectURL(imageBlob) + const imageFile = new File([imageBlob],'压缩图片' + (new Date().getTime()), { + type: imageBlob.type, + lastModified: new Date().getTime() + }); + this.tailorContent['tailorImg'] = {raw:imageFile,size:imageBlob.size} + // console.log(imageBlob,'压缩后的图片信息',imageFile) + // callback && callback(blob); // 满足大小要求，返回Blob对象 + },0.9) + } // 显示修改后的图片 // document.getElementById('resizedCanvas').style.display = 'block'; }) }, + // canvas 图片压缩 quality 初始质量 + canvasCompress(canvas,callback,quality = 0.9){ + let that = this + canvas.toBlob(function (blob) { + if (blob.size > 1024 * 1024) { // 如果大于1MB，尝试降低质量或尺寸 + quality -= 0.1; // 降低质量 + if(quality<0.3){ + // // maxWidth /= 2; // 减小尺寸的一半 + // // maxHeight /= 2; // 减小尺寸的一半 + // // width /= 2; // 重新计算宽度和高度 + // // height /= 2; // 重新计算宽度和高度 + // canvas.width = width; + // canvas.height = height; + // // ctx.drawImage(img, 0, 0, width, height); + // canvas.toBlob(function (newBlob) { + // console.log('递归调用直到满足大小要求，11111111111',blob) + // callback && callback(newBlob); // 递归调用直到满足大小要求 + // }, 'image/jpeg', quality); + that.$message({ + message: `无法压缩图片，请修改`, + type: 'warning', + center: true, + }) + }else{ + that.canvasCompress(canvas,callback,quality) + } + }else{ + // const imageUrl = URL.createObjectURL(blob) + // console.log('newBlob,,,,blob,,,满足大小要求，返回Blob对象,,9',blob,'imageUrl',imageUrl) + callback && callback(blob); // 满足大小要求，返回Blob对象 + } + },'image/jpeg', quality) + }, // 重塑图片 确认 sureImg(){ this.onChange(this.tailorContent.tailorImg) // 上传图片 @@ -407,7 +499,7 @@ export default { }, // pdf转base64 fileToBase64(file){ - console.log('file',file) + // console.log('file',file) var reader = new FileReader(); let that = this reader.onloadend = function() { @@ -460,7 +552,7 @@ export default { imgWidth:img.width, imgHeight:img.height } - this.remodelingImg(img,file) // 重塑图片尺寸 + this.remodelingImg(img,file,false) // 重塑图片尺寸 // this.$refs.imgUpload.clearFiles() return } @@ -470,7 +562,8 @@ export default { if (!isLt2M && this.imgSize !== -1) { // 压缩文件 this.$confirm(`您上传的图片大于${this.imgSize}M，即将进行压缩，是否继续`, '提示').then((res) => { - this.compressedPicture(file) + this.dialogVisible2 = true // 打开弹框 + this.remodelingImg(img,file,true) }).catch((err) => { this.$message({ message: `图片大小不能超过${this.imgSize}M`, @@ -601,6 +694,69 @@ export default { }) }) }, + // compressImage(file) { + // return new Promise((resolve, reject) => { + // const reader = new FileReader(); + // reader.readAsDataURL(file.raw); + // reader.onload = function (event) { + // const img = new Image(); + // img.src = event.target.result; + // img.onload = function () { + // const canvas = document.createElement('resizedCanvas'); + // const ctx = canvas.getContext('2d'); + // let quality = 0.7; // 初始质量设置 + // // let maxWidth = this.imgWidth !== -1 ? this.imgWidth : 800; // 最大宽度限制 + // // let maxHeight = this.imgHeight !== -1 ? this.imgHeight : 800; // 最大高度限制 + // let width = img.width; + // let height = img.height; + + // // 检查宽度和高度是否超过限制，如果超过则调整尺寸 + // // if (width > height) { + // // if (width > maxWidth) { + // // height *= maxWidth / width; + // // width = maxWidth; + // // } + // // } else { + // // if (height > maxHeight) { + // // width *= maxHeight / height; + // // height = maxHeight; + // // } + // // } + // canvas.width = width; + // canvas.height = height; + // ctx.drawImage(img, 0, 0, width, height); + + // // 将canvas转换为Blob对象，并检查大小 + // canvas.toBlob(function (blob) { + // if (blob.size > 1024 * 1024) { // 如果大于1MB，尝试降低质量或尺寸 + // quality -= 0.1; // 降低质量 + // if (quality < 0.3) { // 如果质量过低，减小尺寸比例 + // // maxWidth /= 2; // 减小尺寸的一半 + // // maxHeight /= 2; // 减小尺寸的一半 + // // width /= 2; // 重新计算宽度和高度 + // // height /= 2; // 重新计算宽度和高度 + // canvas.width = width; + // canvas.height = height; + // ctx.drawImage(img, 0, 0, width, height); + // canvas.toBlob(function (newBlob) { + // resolve(newBlob); // 递归调用直到满足大小要求 + // }, 'image/jpeg', quality); + // } else { // 如果可以降低质量，则再次尝试压缩 + // canvas.toBlob(function (newBlob) { + + // resolve(newBlob); // 递归调用直到满足大小要求 + // }, 'image/jpeg', quality); + // } + // } else { + // console.log('newBlob,,,,blob',blob) + // resolve(blob); // 满足大小要求，返回Blob对象 + // } + // }, 'image/jpeg', quality); // 设置压缩格式和质量 + // }; + // }; + // reader.onerror = reject; // 文件读取错误处理 + // }); + // }, // 压缩图片 compressedPicture(file) { let that = this @@ -626,14 +782,13 @@ export default { }, // 图片宽高是否符合要求 async widthOrHeight(file, fn) { - // let that = this - if (this.imgWidth !== -1 || this.imgHeight !== -1) { - let reader = new FileReader() - reader.readAsDataURL(file.raw) - reader.onload = (e) => { - let img = new Image() - img.src = e.target.result - img.onload = () => { + let reader = new FileReader() + reader.readAsDataURL(file.raw) + reader.onload = (e) => { + let img = new Image() + img.src = e.target.result + img.onload = () => { + if(this.imgWidth !== -1 || this.imgHeight !== -1){ let flag = true if (this.imgWidth !== -1 && this.imgHeight !== -1) { flag = this.imgWidth === img.width && this.imgHeight === img.height @@ -643,10 +798,10 @@ export default { flag = this.imgWidth === img.height } fn && fn(flag,img) + }else{ + fn && fn(true,img) } } - } else { - fn && fn(true) } }, // 文件格式