The web mobile compresses the uploaded avatar image. When the image is too large, the compression is not successful, but there is no error.
I have been doing the function of uploading avatars on mobile in the past two days. I want to compress and upload images larger than 400kb. Images larger than 400kb have not been successfully compressed and no errors have been reported. Later, I re-read my code and found that it was because when the size of the picture was larger than 400kb, I wrote wrong the base64Img parameters passed into the compressed image function. It was really careless. Now attach the correct code:
uploadImg() {
let vm = this;
console.log(vm.temp);
var img = document.getElementById("phoneImage"),
maxSize = 400 * 1024; //400kb
var imgFile = new FileReader();
imgFile.readAsDataURL(img.files[0]);
imgFile.onload = function() {
vm.temp.base64Img = imgFile.result;
if (vm.temp.base64Img.length < maxSize) {
//
alert("<=100kb;size=" + vm.temp.base64Img.length);
uploadImage(vm.temp).then(response => {
const data = response.data;
vm.temp = data.data;
setTimeout(() => {
vm.$router.push({
path: "/setting"
});
window.location.reload();
}, 5);
});
} else {
// >400kb,
vm.compress(vm.temp.base64Img, function(base64Img) {
uploadImage({ base64Img }).then(response => {
const data = response.data;
setTimeout(() => {
vm.$router.push({
path: "/setting"
});
window.location.reload();
}, 5);
});
});
}
};
},
compress(base64Img, callback) {
var img = new Image();
img.src = base64Img;
img.onload = function() {
var width = img.width;
var height = img.height;
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(img, 0, 0, width, height);
callback(canvas.toDataURL("image/jpeg", 0.05));
};
}
you have a problem with this compressed picture
you this.compress (vm.temp.base64Img); is passed in
canvas.width = img.width; canvas.height = img.height; format
canvas.width = img.width; canvas.height = img.height; here base64 format
the canvas.toDataURL ("image/jpeg", 0.15) you did not draw the picture on canvas , so canvas
callback:
compress(base64img,callback) {
var img = new Image();
img.src = base64img;
img.onload = function(){
var width = img.width;
var height = img.height;
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(img,0,0,width,height);
callback(canvas.toDataURL("image/jpeg", 0.15))
}
}
//
vm.compress(vm.temp.base64img, function (base64img) {
uploadImage({ base64img }).then(response => {
const data = response.data;
//...
});
});
promise:
function compress(base64img, callback) {
return new Promise(function (resolve) {
var img = new Image();
img.src = base64img;
img.onload = function () {
var width = img.width;
var height = img.height;
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(img, 0, 0, width, height);
resolve(canvas.toDataURL("image/jpeg", 0.15))
}
})
}
//
vm.compress(vm.temp.base64img)
.then(base64img => uploadImage({ base64img }))
.then(response => {
const data = response.data;
//...
});
Thank you very much for the help of Li Shisheng. Now attach the correct code
uploadImg() {
let vm = this;
console.log(vm.temp);
var img = document.getElementById("phoneImage"),
maxSize = 400 * 1024; //400kb
var imgFile = new FileReader();
imgFile.readAsDataURL(img.files[0]);
imgFile.onload = function() {
vm.temp.base64Img = imgFile.result;
if (vm.temp.base64Img.length < maxSize) {
//
alert("<=100kb;size=" + vm.temp.base64Img.length);
uploadImage(vm.temp).then(response => {
const data = response.data;
vm.temp = data.data;
setTimeout(() => {
vm.$router.push({
path: "/setting"
});
window.location.reload();
}, 5);
});
} else {
// >400kb,
vm.compress(vm.temp.base64Img, function(base64Img) {
uploadImage({ base64Img }).then(response => {
const data = response.data;
setTimeout(() => {
vm.$router.push({
path: "/setting"
});
window.location.reload();
}, 5);
});
});
}
};
},
compress(base64Img, callback) {
var img = new Image();
img.src = base64Img;
img.onload = function() {
var width = img.width;
var height = img.height;
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(img, 0, 0, width, height);
callback(canvas.toDataURL("image/jpeg", 0.05));
};
}
