canvas、dataurl、blob、file之间转换笔记

流程如下

 1、 canvas ---> dataurl

 2、 canvas ---> blob

 

/**

 * 将一个canvas对象转变为一个File（Blob）对象

 * 该方法可以做压缩处理

 *

 * @param {canvas} canvas

 * @param {number=} quality - 传入范围 0-1，表示图片压缩质量，默认0.92

 * @param {string=} type - 确定转换后的图片类型，选项有 "image/png", "image/jpeg", "image/gif",默认"image/jpeg"

 * @returns {Promise(Blob)}

 */

export default function canvastoFile(canvas: HTMLCanvasElement, quality: number = 0.92, type: EImageType = EImageType.JPEG): Promise<Blob> {

  return new Promise(resolve => canvas.toBlob(blob => resolve(blob), type, quality));

};

 3、 file ---> dataurl

 

export default function filetoDataURL(file: Blob): Promise<string> {

  return new Promise((resolve) => {

    const reader = new FileReader();

    reader.onloadend = e => resolve(e.target.result as string);

    reader.readAsDataURL(file);

  });

};

 4、 dataurl --> blob

/**

 * 将一个dataURL字符串转变为一个File（Blob）对象

 * 转变时可以确定File对象的类型

 *

 * @param {string} dataURL

 * @param {string=} type - 确定转换后的图片类型，选项有 "image/png", "image/jpeg", "image/gif"

 * @returns {Promise(Blob)}

 */

export default async function dataURLtoFile(dataURL: string, type: EImageType): Promise<Blob> {

  const arr = dataURL.split(',');

  let mime = arr[0].match(/:(.*?);/)[1];

  const bstr = atob(arr[1]);

  let n = bstr.length;

  const u8arr = new Uint8Array(n);

  while (n--) {

    u8arr[n] = bstr.charCodeAt(n);

  }

  if (checkImageType(type)) {

    mime = type;

  }

  return new Blob([u8arr], {

    type: mime,

  });

};