//图片压缩
compress() {
var that = this
var img = new Image()
img.crossOrigin = "Anonymous";
img.src = "https://dev.3tlife.cn/mobile/static/upload/image/zjl/emp/images/202111309d703d870-0cb3-48e5-9277-c7326639afe1-source.jpg"
img.onload = function(){
let canvasWidth = this.width //图片原始长宽
let canvasHeight = this.height
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d')
canvas.width = canvasWidth /1
canvas.height = canvasHeight / 1
ctx.drawImage(img, 0, 0, canvasWidth / 1, canvasHeight /1)
canvas.toBlob(function(fileSrc) {
console.log(fileSrc);
})
}
},
// 图片的文件格式转base64
getBase64(file) {
return new Promise(function(resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function() {
imgResult = reader.result;
};
reader.onerror = function(error) {
reject(error);
};
reader.onloadend = function() {
resolve(imgResult);
};
});
},
// base64转文件格式
// 调用:that.dataURLtoFile(data, 'headImg.jpg') //把base64 转化成file格式
dataURLtoFile(dataurl, filename) {
console.log(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 File([u8arr], filename, { type: mime })
},
案例
<el-upload
class="avatar-uploader"
action=""
:auto-upload="false"
:show-file-list="false"
:on-change="handleChange"
>
<img
v-if="businessForm.licImg"
:src="businessForm.licImg"
class="avatar"
>
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
handleChange(file, fileList) {
// 1)大小不超过5M
// 2)只能上传一张图片
// 3)上传格式只支持图片格式:JPG、PNG、JPEG
if (!/\.(jpg|JPG|JPEG|jpeg|png|PNG)$/.test(file.name)) {
this.$message.error('只支持图片格式为JPG、PNG、JPEG的图片!')
return
}
const isLt5M = file.size / 1024 / 1024 < 5
if (!isLt5M) {
this.$message.error('图片大小不能超过 5MB!')
return
}
this.toCreateObjectURL()
this.toReadAsDataURL()
this.toReadAsBinaryString()
this.torReadAsText()
},
// 1、createObjectURL:生成一个临时路径展示图片
toCreateObjectURL() {
this.businessForm.licImg = URL.createObjectURL(file.raw);
console.log(this.businessForm.licImg,'this.businessForm.licImg')//blob:http://172.20.35.125:8080/75c0e8e5-3a05-48a7-bb67-61832a4ddd75
}
// 2、图片的文件格式(file.raw) 转 base64
toReadAsDataURL() {
let reader = new FileReader();
reader.readAsDataURL(file.raw);
reader.onload = () => {
this.businessForm.licImg = reader.result;//data:image/jpeg;base64,/9j/4AAQSkZJRgABA....
// 3、base64 转 图片的文件格式(file.raw) (这边就是举个例子,实际开发不会这样转来转去)
let a = this.dataURLtoFile(this.businessForm.licImg, 'hhh')
console.log(a,'a');//结果类似于file.raw,但是缺少某些属性
};
//不能在这里调用,有可能onload还未执行完,this.businessForm.licImg还没成功赋值
//let a = this.dataURLtoFile(this.businessForm.licImg, 'hhh')
//console.log(a,'a');
}
dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let bstr = atob(arr[1])
let n = bstr.length,
u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], filename, { type: mime })
},
// 3、将文件以二进制形式读入页面
toReadAsBinaryString() {
var reader = new FileReader();
reader.readAsBinaryString(file.raw);
reader.onload = function (f) {
var result = document.getElementById("result");
//显示文件
result.innerHTML = this.result;
console.log(this.result,'this.result;')
}
}
打印结果:
// 4、将文件以文本形式读入页面
torReadAsText() {
var reader = new FileReader();
reader.readAsText(file.raw);
reader.onload = function (f) {
var result = document.getElementById("result");
//显示文件
result.innerHTML = this.result;
console.log(this.result,'this.result;')
}
}
打印结果: