'!'
This commit is contained in:
@@ -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)
|
||||
}
|
||||
},
|
||||
// 文件格式
|
||||
|
||||
Reference in New Issue
Block a user