图片操作工具函数

将图片网络地址转换为dom元素

图片URL转Base64，再转Blob，最后转为ObjectURL，防止图片过大导致img标签无法直接加载base64

const corsSuffix = `?mode=cors&time=${Date.now()}`;
if (imgUrl) {
  this.avatarObjectUrl = await blobToObjectURL(
    dataURLToBlob(await getImageDataURL(imgUrl + corsSuffix))
  );
}
// 释放ObjectURL
releaseObjectURL(this.avatarObjectUrl);

/**
 * 根据url获取base64的图片
 * @param {String} imageUrl 
 * @returns Promise
 */
export const getImageDataURL = (imageUrl) => {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.crossOrigin = 'Anonymous'; // 注意这个属性一定要在src之前, 否则ios无法成功转base64
    image.src = imageUrl;
    image.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = image.width;
      canvas.height = image.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(image, 0, 0, image.width, image.height);
      const base64 = canvas.toDataURL('image/png');
      resolve(base64);
    };
    image.onerror = reject;
  });
};

/**
 * 将base64图片转换为blob
 * @param {String} dataurl 
 * @returns Blob
 */

export const dataURLToBlob = (dataurl) => {
  const arr = dataurl.split(',');
  const 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);
  }
  return new Blob([u8arr], {
    type: mime,
  });
};

/**
 * 将Blob类型图片转化为ObjectURL
 * @param {*} blob 
 * @returns 
 */
export const blobToObjectURL = (blob) => URL.createObjectURL(blob);