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) {&nbsp; &nbsp; var img = new Image();&nbsp; &nbsp; img.src = base64img;&nbsp; &nbsp; img.onload = function(){&nbsp; &nbsp; &nbsp; &nbsp; var width = img.width;&nbsp; &nbsp; &nbsp; &nbsp; var height = img.height;&nbsp; &nbsp; &nbsp; &nbsp; var canvas = document.createElement("canvas");&nbsp; &nbsp; &nbsp; &nbsp; canvas.width = width;&nbsp; &nbsp; &nbsp; &nbsp; canvas.height = height;&nbsp; &nbsp; &nbsp; &nbsp; canvas.getContext("2d").drawImage(img,0,0,width,height);&nbsp; &nbsp; &nbsp; &nbsp; callback(canvas.toDataURL("image/jpeg", 0.15))&nbsp; &nbsp; }}//调用vm.compress(vm.temp.base64img, function (base64img) {&nbsp; &nbsp; uploadImage({ base64img }).then(response => {&nbsp; &nbsp; &nbsp; &nbsp; const data = response.data;&nbsp; &nbsp; &nbsp; &nbsp; //...&nbsp; &nbsp; });});promise：function compress(base64img, callback) {&nbsp; &nbsp; return new Promise(function (resolve) {&nbsp; &nbsp; &nbsp; &nbsp; var img = new Image();&nbsp; &nbsp; &nbsp; &nbsp; img.src = base64img;&nbsp; &nbsp; &nbsp; &nbsp; img.onload = function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var width = img.width;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var height = img.height;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var canvas = document.createElement("canvas");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; canvas.width = width;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; canvas.height = height;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; canvas.getContext("2d").drawImage(img, 0, 0, width, height);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resolve(canvas.toDataURL("image/jpeg", 0.15))&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })}//调用vm.compress(vm.temp.base64img)&nbsp; &nbsp; .then(base64img => uploadImage({ base64img }))&nbsp; &nbsp; .then(response => {&nbsp; &nbsp; &nbsp; &nbsp; const data = response.data;&nbsp; &nbsp; &nbsp; &nbsp; //...&nbsp; &nbsp; });

Answer 2

很感谢李十三大神的帮忙，现在附上正确的代码uploadImg() {&nbsp; &nbsp; &nbsp; let vm = this;&nbsp; &nbsp; &nbsp; console.log(vm.temp);&nbsp; &nbsp; &nbsp; var img = document.getElementById("phoneImage"),&nbsp; &nbsp; &nbsp; &nbsp; maxSize = 400 * 1024; //400kb&nbsp; &nbsp; &nbsp; var imgFile = new FileReader();&nbsp; &nbsp; &nbsp; imgFile.readAsDataURL(img.files[0]);&nbsp; &nbsp; &nbsp; imgFile.onload = function() {&nbsp; &nbsp; &nbsp; &nbsp; vm.temp.base64Img = imgFile.result;&nbsp; &nbsp; &nbsp; &nbsp; if (vm.temp.base64Img.length < maxSize) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //图片直接上传&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("<=100kb;size=" + vm.temp.base64Img.length);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; uploadImage(vm.temp).then(response => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const data = response.data;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; vm.temp = data.data;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; vm.$router.push({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path: "/setting"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.location.reload();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, 5);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; >400kb,压缩再上传&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; vm.compress(vm.temp.base64Img, function(base64Img) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; uploadImage({ base64Img }).then(response => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const data = response.data;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; vm.$router.push({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path: "/setting"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.location.reload();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, 5);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; },&nbsp; &nbsp; compress(base64Img, callback) {&nbsp; &nbsp; &nbsp; var img = new Image();&nbsp; &nbsp; &nbsp; img.src = base64Img;&nbsp; &nbsp; &nbsp; img.onload = function() {&nbsp; &nbsp; &nbsp; &nbsp; var width = img.width;&nbsp; &nbsp; &nbsp; &nbsp; var height = img.height;&nbsp; &nbsp; &nbsp; &nbsp; var canvas = document.createElement("canvas");&nbsp; &nbsp; &nbsp; &nbsp; canvas.width = width;&nbsp; &nbsp; &nbsp; &nbsp; canvas.height = height;&nbsp; &nbsp; &nbsp; &nbsp; canvas.getContext("2d").drawImage(img, 0, 0, width, height);&nbsp; &nbsp; &nbsp; &nbsp; callback(canvas.toDataURL("image/jpeg", 0.05));&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; }