参考：https://blog.csdn.net/zx19930309/article/details/90375907

    示例代码

    1. function dealImage(base64, w, callback) {
    2.     let newImage = new Image();
    3.     let quality = 0.8;
    4.     newImage.src = base64;
    5.     newImage.setAttribute("crossOrigin", 'Anonymous');    //url为外域时需要
    6.     let imgWidth, imgHeight;
    7.     newImage.onload = function () {
    8.         imgWidth = this.width;
    9.         imgHeight = this.height;
    10.         let canvas = document.createElement("canvas");
    11.         let ctx = canvas.getContext("2d");
    12.         if (Math.max(imgWidth, imgHeight) > w) {
    13.             if (imgWidth > imgHeight) {
    14.                 canvas.width = w;
    15.                 canvas.height = w * imgHeight / imgWidth;
    16.             } else {
    17.                 canvas.height = w;
    18.                 canvas.width = w * imgWidth / imgHeight;
    19.             }
    20.         } else {
    21.             canvas.width = imgWidth;
    22.             canvas.height = imgHeight;
    23.         }
    24.         ctx.clearRect(0, 0, canvas.width, canvas.height);
    25.         ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
    26.         // 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间，请加以下语句，quality初始值根据情况自定
    27.         while (base64.length / 1024 > 150) {
    28.             quality -= 0.01;
    29.             base64 = canvas.toDataURL("image/jpeg", quality);
    30.         }
    31.         // 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑
    32.         // while (base64.length / 1024 < 50) {
    33.         //     quality += 0.001;
    34.         //     base64 = canvas.toDataURL("image/jpeg", quality);
    35.         // }
    36.         callback(base64);//必须通过回调函数返回，否则无法及时拿到该值
    37.     }
    38. }
    41. function useImg(base64) {
    42.     const str= base64;
    43.     console.log(str);
    44.     console.log(str.length);
    45. }
    48. let base64= "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZQAAADnCAYAAAA5BKB7AAAQW0lEQVR4Ae3cvYtrVRcH4PvHaasiIoiWfiBYiCJoo5WFNlainaiNClaCH5WIos0UWqiNlR8gKChY2ZiXlZedd3vu5CZzs5KsNe9zICQzyeys/ayd88s5mZkbKxsBAgQIEEgQuJEwhiEIECBAgMBKoFgEBAgQIJAiIFBSGA1CgAABAgLFGiBAgACBFIEbf/7558qFgTVgDVgD1sCha8ARSkouG4QAAQIEBIo1QIAAAQIpAgIlhdEgBAgQICBQrAECBAgQSBEQKCmMBiFAgAABgWINECBAgECKgEBJYTQIAQIECAgUa4AAAQIEUgQESgqjQQgQIEBAoFgDBAgQIJAiIFBSGA1CgAABAgLFGiBAgACBFAGBksJoEAIECBAQKNYAAQIECKQICJQURoMQIECAgECxBggQIEAgRUCgpDAahAABAgQEijVAgAABAikCAiWF0SAECBAgIFCsAQIECBBIERAoKYwGIUCAAAGBYg0QIECAQIqAQElhNAgBAgQICBRrgAABAgRSBARKCqNBCBAgQECgWAMECBAgkCIgUFIYDUKAAAECAsUaIECAAIEUAYGSwmgQAgQIEBAo1gABAgQIpAgIlBRGgxAgQICAQLEGCBAgQCBFQKCkMBqEAAECBASKNUCAAAECKQICJYXRIAQIECAgUKwBAgQIEEgRECgpjAYhQIAAAYFiDRAgQIBAioBASWE0CAECBAgIFGuAAAECBFIEBEoKo0EIECBAQKBYAwQIECCQIiBQUhgNQoAAAQICxRogQIAAgRQBgZLCaBACBAgQECjWAAECBAikCAiUFEaDECBAgIBAsQYIECBAIEVAoKQwGoQAAQIEBIo1QIAAAQIpAgIlhdEgBAgQICBQrAECBAgQSBEQKCmMBiFAgAABgWINECBAgECKgEBJYTQIAQIECNy4uLhYuTCwBqwBa8AaOHQNOELxpoIAAQIEUgQESgqjQQgQIEBAoFgDBAgQIJAiIFBSGA1CgAABAgLFGiBAgACBFAGBksJoEAIECBAQKNYAAQIECKQICJQURoMQIECAgECxBggQIEAgRUCgpDAahAABAgQEijVAgAABAikCAiWF0SAECBAgIFCsAQIECBBIERAoKYwGIUCAAAGBYg0QIECAQIqAQElhNAgBAgQICJSENfDXX3+tvvnmm9UPP/yQMNp5h/j6669Xn3zyyXmL8OwECLQUECgHtC2C5OWXX17dcccdm8uDDz64ip1yxy2C5O67717PZa7/s88+W+1z+fzzz+cfO/h2jPf777+vx4nrfWoYjzlGLWPsq15f51pircebqdu9HLxIDFBK4FoFyt9//7369ddfTwIcYfLYY49tgmQOlbjd9V1+7CCi/rG98sorW+e4nHN8/fbbb48fPeg6xonxHn/88fU4cX3Z893qe9m13Oq5dt13HWt5//33r9yTpVOMYbs+AjsDJXbQ99xzz00L580339woxO3lQomfOdXOfRTy8MMPr+v4+OOPx7eOdv3qq69u5hxHKREwccprvMMPjy+++OJoz3+sgZeBcllvl72ev/7ggw9SSotxYtznn39+PV5cz8+zz+3sWvZ5zm2PuY61XHVtXGYz70dSFo5BziqwM1DGDma5GJ566qlN4XF7eX98HT97qu3nn3/e1PDRRx8d9WkjPMZ8I0zmLe6L015xf4Rqp+2NN95Y3Xfffas777xz9cADD6z++OOPdfm//fbbap/LOD2VNeflePvUMB6z/NlDa4rxxthXvb6utcyBclXf8foRKFeVq/34loESi3C5I//www83O/kIl9jiMW+99VZ6B+aQjQCJLc4hP/PMM+ujkvn+Th/U//jjj+tTde++++7684p0uGsw4GVr75TTiqP+F154ocTR7zJQ4szAiy++uPrpp592kgiUnUQtH3DbgfLEE09sJnzKI5QIibEY5yOgl156af39hx56aF3XvFNfhs+m8Nu8ESExahiBEWEyvvfll19ubj/33HPrsLnNpzr5j8Vpuvj8ZwTlyQso/ITb1t4pS5534uf+nG6uJQziqDZeA6+//vpNJPNrNe4cr5UYw3Z9BG47UO69996NwrZAiaOGzG1+QT/66KP/GjqCJBZpBMvY4jFj4WaHyjitFdex840d8Xiuy67j9Ff1z1SivvgMKOY0e3333Xerb7/9dufl+++/H/Qp1zHeP//8sx4rrvepYTwmu5Z57UV/5x3kL7/8csvaMmuZd+JRxzJUzlVLNOmdd95ZPfnkk6tYL/M27OZax2tEoMxS/W/vDJQ4xB47z7EI4vqRRx7ZzH7bb3t8+umnm8cceiMW43j+CIr5HfS2z0/iMXOozAv60HrmI6DwiSOV+chk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";
    49. //这就是你压缩之后的字符串
    51. //你可以打桩看一下有多长
    52. console.log(base64.length);
    53. //然后调用压缩方法 第一个参数就是原来的字符串，第二个是宽度，第三个就是回调方法，也就是压缩函数最后面那个callback（base64）
    54. dealImage(base64, 500, useImg);