1. <input id="file" type="file" accept=".png,.jpg,.jpeg,.gif">
    1. // 使用
    2. compressImage(input.files[0], (file) => {
    3.   // 这里可以就对压缩后的文件 file 一顿操作了（上传还是咋地，你高兴就好）
    4.   // handleUpload(file);
    5. }, (msg) => {
    6.   console.error(msg);
    7. });
    9. /*
    10.     参数说明：
    11.   file: 要压缩的图片文件
    12.   success: 成功回调
    13.   error: 错误回调
    14. */
    15. function compressImage(file, success, error) {
    16.     // 压缩图片需要的一些元素和对象
    17.     var reader = new FileReader(),
    18.         img = new Image();
    19.     // 缩放图片需要的canvas
    20.     var canvas = document.createElement('canvas');
    21.     var context = canvas.getContext('2d');
    22.     // base64 地址图片加载完毕后
    23.     img.onload = function () {
    24.         // 图片原始尺寸
    25.         var originWidth = this.width;
    26.         var originHeight = this.height;
    27.         // 最大尺寸限制
    28.         var maxWidth = 1080, maxHeight = 1080;
    29.         // 目标尺寸
    30.         var targetWidth = originWidth, targetHeight = originHeight;
    31.         // 图片尺寸超过1080x1080的限制
    32.         if (originWidth > maxWidth || originHeight > maxHeight) {
    33.             if (originWidth / originHeight > maxWidth / maxHeight) {
    34.                 // 更宽，按照宽度限定尺寸
    35.                 targetWidth = maxWidth;
    36.                 targetHeight = Math.round(maxWidth * (originHeight / originWidth));
    37.             } else {
    38.                 targetHeight = maxHeight;
    39.                 targetWidth = Math.round(maxHeight * (originWidth / originHeight));
    40.             }
    41.         }
    42.         // canvas对图片进行缩放
    43.         canvas.width = targetWidth;
    44.         canvas.height = targetHeight;
    45.         // 清除画布
    46.         context.clearRect(0, 0, targetWidth, targetHeight);
    47.         // 图片压缩
    48.         context.drawImage(img, 0, 0, targetWidth, targetHeight);
    49.         // canvas转为blob并执行success回调
    50.         canvas.toBlob(function (blob) {
    51.             var result = new File([blob], file.name, {
    52.                 type: "image/png",
    53.             });
    54.             success(result);
    55.         }, file.type || 'image/png');
    56.     };
    57.     // 文件base64化，以便获知图片原始尺寸
    58.     reader.onload = function (e) {
    59.         img.src = e.target.result;
    60.     };
    61.     reader.onerror = (e) => {
    62.         error(e);
    63.     }
    64.     // 选择的文件是图片
    65.     if (file.type.indexOf("image") == 0) {
    66.         reader.readAsDataURL(file);
    67.     } else {
    68.         error("请选择图片文件");
    69.     }
    70. }

    HTML5 file API加canvas实现图片前端JS压缩并上传