canvas.toBlob bug

canvas.toBlob bug

最近在使用canvas.toBlob 将canvas转为 File 时遇到一个问题，blob 的回调函数拿到的值是null，当图片质量大于 4M 时，临界值还没有测试，后续会继续补充。

如果有遇到相同问题的朋友推荐使用 canvas.toDataURL

然后用下面的函数将 base64 转为 Blob

/**
 * 转换图片的 base64 到 blob
 */
export const base64ToBlob = (data: string) => {
  var rImageType = /data:(image\/.+);base64,/;
  var mimeString = '';
  var raw, uInt8Array, i, rawLength;

  raw = data.replace(rImageType, function (header, imageType) {
    mimeString = imageType;

    return '';
  });

  raw = atob(raw);
  rawLength = raw.length;
  uInt8Array = new Uint8Array(rawLength); // eslint-disable-line

  for (i = 0; i < rawLength; i += 1) {
    uInt8Array[i] = raw.charCodeAt(i);
  }

  return new Blob([uInt8Array], { type: mimeString });
};

// 将图片转为file
export const transformUrl2File = (url: string): Promise<null | File> => {
  const img = document.createElement('img');
  img.src = url;
  img.crossOrigin = 'anonymous';
  return new Promise(r => {
    const cvs = document.createElement('canvas');
    const ctx = cvs.getContext('2d');
    img.onload = () => {
      cvs.height = img.height * 3;
      cvs.width = img.width * 3;
      ctx?.drawImage(img, 0, 0, cvs.width, cvs.height);
      const nameArr = url.split('/');
      const name = nameArr[nameArr.length - 1] || '1.jpg';

      const base64Data = cvs.toDataURL('image/jpg', 0.9);
      const blob = base64ToBlob(base64Data);
      r(blob && new File([blob], name, { type: 'image/jpg' }));
    };
  });
};

atob&btoa