web移动端对上传头像图片进行压缩，当图片过大的时候压缩不成功但是也没有报错
这两天在做移动端上传头像功能，想对大于400kb的图片进行压缩再上传，压缩大于400kb的图片一直没成功，也没有报什么错误，后来我重新看了自己的代码，发现是因为当图片大小大于400kb的时候，压缩图片函数传入的base64Img参数我写错了，真的是太粗心，现在将正确的代码附上：
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));
};
}
慕慕森2回答
-
弑天下
你这个压缩图片有问题你this.compress(vm.temp.base64Img);传入的是base64格式的字符串canvas.width = img.width; canvas.height = img.height;这里base64格式的字符串是获取不到宽高的这句canvas.toDataURL("image/jpeg", 0.15)你之前没有把图片画到canvas上所以的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; //... }); -
慕侠2389804
很感谢李十三大神的帮忙，现在附上正确的代码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)); }; }
随时随地看视频慕课网APP
相关分类
JavaScript