1、将无图片类型的图片base64码转为文件;
// 上传图片
updateImg(base64Data){
//base64Data这个为不包括[data:image/jpeg;base64,]的base64串
let that = this
// 将base64解码
let bytes = window.atob(base64Data);
//let bytes = base64;
let bytesCode = new ArrayBuffer(bytes.length);
// 转换为类型化数组
let byteArray = new Uint8Array(bytesCode);
// 将base64转换为ascii码
for (let i = 0; i < bytes.length; i++) {
byteArray[i] = bytes.charCodeAt(i);
}
// 生成Blob对象(文件对象)
let bolbObj = new Blob([bytesCode], { type: 'image/jpg' });
let reader = new FileReader(); // 这个方法读取文件的bolb对象
//将图片转成base64格式
reader.readAsDataURL(bolbObj);
reader.onloadend = function() {
let result = this.result;
let img = new Image();
img.src = result;
console.log("********未压缩前的图片大小********");
console.log(result.length / 1024);
if(result.length/1024 > 50){
img.onload = function() {
//0.6为压缩的程度,数值越小,压缩的文件越小,图片也会越模糊
let data = that.compress(img, 0.7);
that.uploadIdCardImg(data);//上传图片接口
}
}else{
let data = result
that.uploadIdCardImg(data);//上传图片接口
}
};
},
2、压缩图片
// 压缩图片
compress(img, size) {
// 创建canvas
let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d')
let initSize = img.src.length
//设置图片大小
let width = 1024
let height = width * (img.height / img.width)
canvas.width = width;
canvas.height = height;
// 铺底色
ctx.fillStyle = '#fff'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.drawImage(img, 0, 0, width, height)
//进行最小压缩
let ndata = canvas.toDataURL('image/jpeg', size)
console.log('*******压缩后的图片大小*******')
console.log(ndata.length / 1024)
return ndata
},