z-react-ui/es/_utils/chat/compressPic.js

z-react-ui，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。

/**
 * 压缩图片
 * @param base64
 * @param scale
 * @param callback
 */
export default function compressPic(base64, scale, callback) {
  var _img = new Image();

  _img.src = base64;

  _img.onload = function () {
    var _canvas = document.createElement('canvas');

    var _context = _canvas.getContext('2d');

    var w = _img.width / scale;
    var h = _img.height / scale;

    _canvas.setAttribute('width', w + '');

    _canvas.setAttribute('height', h + '');

    _context === null || _context === void 0 ? void 0 : _context.drawImage(_img, 0, 0, w, h); // 将canvas的透明背景设置成白色

    var imageData = _context.getImageData(0, 0, _canvas.width, _canvas.height);

    for (var i = 0; i < imageData.data.length; i += 4) {
      // 当该像素是透明的，则设置成白色
      if (imageData.data[i + 3] == 0) {
        imageData.data[i] = 255; // r

        imageData.data[i + 1] = 255; // g

        imageData.data[i + 2] = 255; // b

        imageData.data[i + 3] = 0; // a
      }
    }

    _context.putImageData(imageData, 0, 0); // 注意：只有png的图片才会支持背景透明


    var base64 = _canvas.toDataURL('image/png');

    _canvas.toBlob(function (blob) {
      if (blob && blob.size > 1024 * 1024) {
        compressPic(base64, scale, callback);
      } else {
        callback(blob, base64);
      }
    }, 'image/png');
  };
}