web移动端对上传头像图片进行压缩，当图片过大的时候压缩不成功但是也没有报错

Question

这两天在做移动端上传头像功能，想对大于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));      };    }

Answer 1

你这个压缩图片有问题

你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;

        //...

    });

Answer 2

很感谢李十三大神的帮忙，现在附上正确的代码

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));

      };

    }