vue-cropper GitHub项目

    vue-cropper是基于VUE实现的一个开源的图片裁剪组件。裁剪功能还不错，就是压缩功能其实没有实现效果的感觉（至少我使用时没有压缩图片效果）。所以另外找了个压缩图片的方法。组件的话就不添加了，点击链接看官网更清楚，这里重点是压缩图片的方法。

    1. // 将File（Blob）对象转变为一个dataURL字符串， 即base64格式
    2. const fileToDataURL = file => new Promise((resolve) => {
    3.     const reader = new FileReader();
    4.     reader.onloadend = e => resolve(e.target.result);
    5.     reader.readAsDataURL(file);
    6. });
    8. // 将dataURL字符串转变为image对象，即base64转img对象
    9. const dataURLToImage = dataURL => new Promise((resolve) => {
    10.     const img = new Image();
    11.     img.onload = () => resolve(img);
    12.     img.src = dataURL;
    13. });
    15. // 将一个canvas对象转变为一个File（Blob）对象
    16. const canvastoFile = (canvas, type, quality) => new Promise(resolve => canvas.toBlob(blob => resolve(blob), type, quality));
    18. const compress = (originfile, maxSize) => new Promise(async(resolve, reject) => {
    19.     const originSize = originfile.size / 1024; // 单位为kb
    20.     console.log('图片指定最大尺寸为', maxSize, '原始尺寸为：', originSize);
    22.     // 将原图片转换成base64
    23.     const base64 = await fileToDataURL(originfile);
    25.     // 缩放图片需要的canvas
    26.     const canvas = document.createElement('canvas');
    27.     const context = canvas.getContext('2d');
    29.     // 小于maxSize，则不需要压缩，直接返回
    30.     if (originSize < maxSize) {
    31.         resolve({ compressBase64: base64, compressFile: originfile });
    32.         console.log(`图片小于指定大小:${maxSize}KB，不用压缩`);
    33.         return;
    34.     }
    37.     const img = await dataURLToImage(base64);
    39.     const scale = 1;
    40.     const originWidth = img.width;
    41.     const originHeight = img.height;
    42.     const targetWidth = originWidth * scale;
    43.     const targetHeight = originHeight * scale;
    45.     canvas.width = targetWidth;
    46.     canvas.height = targetHeight;
    47.     context.clearRect(0, 0, targetWidth, targetHeight);
    48.     context.drawImage(img, 0, 0, targetWidth, targetHeight);
    50.     // 将Canvas对象转变为dataURL字符串，即压缩后图片的base64格式
    51.     // const compressedBase64 = canvas.toDataURL('image/jpeg', 0.1);
    52.     // 经过我的对比，通过scale控制图片的拉伸来压缩图片，能够压缩jpg，png等格式的图片
    53.     // 通过canvastoFile方法传递quality来压缩图片，只能压缩jpeg类型的图片，png等格式不支持
    54.     // scale的压缩效果没有canvastoFile好
    55.     // 在压缩到指定大小时，通过scale压缩的图片比通过quality压缩的图片模糊的多
    56.     // 压缩的思路，用二分法找最佳的压缩点
    57.     // 这里为了规避浮点数计算的弊端，将quality转为整数再计算;
    58.     // const preQuality = 100;
    59.     const maxQualitySize = { quality: 100, size: Number.MAX_SAFE_INTEGER };
    60.     const minQualitySize = { quality: 0, size: 0 };
    61.     let quality = 100;
    62.     let count = 0; // 压缩次数
    63.     let compressFinish = false; // 压缩完成
    64.     let invalidDesc = '';
    65.     let compressBlob = null;
    67.     // 二分法最多尝试8次即可覆盖全部可能
    68.     while (!compressFinish && count < 12) {
    69.         compressBlob = await canvastoFile(canvas, 'image/jpeg', quality / 100);
    70.         const compressSize = compressBlob.size / 1024;
    71.         count++;
    72.         if (compressSize === maxSize) {
    73.             console.log(`压缩完成，总共压缩了${count}次`);
    74.             compressFinish = true;
    75.             return;
    76.         }
    77.         if (compressSize > maxSize) {
    78.             maxQualitySize.quality = quality;
    79.             maxQualitySize.size = compressSize;
    80.         }
    81.         if (compressSize < maxSize) {
    82.             minQualitySize.quality = quality;
    83.             minQualitySize.size = compressSize;
    84.         }
    85.         console.log(`第${count}次压缩,压缩后大小${compressSize},quality参数:${quality}`);
    87.         quality = Math.ceil((maxQualitySize.quality + minQualitySize.quality) / 2);
    89.         if (maxQualitySize.quality - minQualitySize.quality < 2) {
    90.             if (!minQualitySize.size && quality) {
    91.                 quality = minQualitySize.quality;
    92.             } else if (!minQualitySize.size && !quality) {
    93.                 compressFinish = true;
    94.                 invalidDesc = '压缩失败，无法压缩到指定大小';
    95.                 console.log(`压缩完成，总共压缩了${count}次`);
    96.             } else if (minQualitySize.size > maxSize) {
    97.                 compressFinish = true;
    98.                 invalidDesc = '压缩失败，无法压缩到指定大小';
    99.                 console.log(`压缩完成，总共压缩了${count}次`);
    100.             } else {
    101.                 console.log(`压缩完成，总共压缩了${count}次`);
    102.                 compressFinish = true;
    103.                 quality = minQualitySize.quality;
    104.             }
    105.         }
    106.     }
    108.     if (invalidDesc) {
    109.         // 压缩失败，则返回原始图片的信息
    110.         console.log(`压缩失败，无法压缩到指定大小：${maxSize}KB`);
    111.         reject({ msg: invalidDesc, compressBase64: base64, compressFile: originfile });
    112.         return;
    113.     }
    115.     compressBlob = await canvastoFile(canvas, 'image/jpeg', quality / 100);
    116.     const compressSize = compressBlob.size / 1024;
    117.     console.log(`最后一次压缩（即第${count + 1}次），quality为:${quality}，大小：${compressSize}`);
    118.     const compressedBase64 = await fileToDataURL(compressBlob);
    120.     const compressedFile = new File([compressBlob], originfile.name, { type: 'image/jpeg' });
    122.     resolve({ compressFile: compressedFile, compressBase64: compressedBase64 });
    123. });
    126. // export default compress;

    js压缩图片到指定大小（_葱）此处详尽