loadImageBlob.ts

export const dataURIMime = (uri: string) => {
  return uri.split("")[0].slice(5);
};

export const dataUriToBlob = (uri: string) => {
  const data = uri.split(",")[1];
  const bytes = atob(data);
  const buffer = new ArrayBuffer(bytes.length);
  let array = new Uint8Array(buffer);

  for (let i = 0; i < bytes.length; i++) {
    array[i] = bytes.charCodeAt(i);
  }

  return new Blob([array], { type: dataURIMime(uri) });
};

export const imageUrlToDataUri = (url: string, callback: (err?: null | Error, data?: string) => void) => {
  const canvas = window.document.createElement("canvas");
  const img = window.document.createElement("img");

  if (!canvas.getContext) {
    return setTimeout(callback, 0, new Error("Canvas is not supported."));
  }

  img.onload = () => {
    const ctx = assert(canvas.getContext("2d"));
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    const dataUri = canvas.toDataURL("image/png");
    callback(null, dataUri);
  };

  img.onerror = () => {
    callback(new Error("Failed to load image."));
  };

  img.setAttribute("crossOrigin", "anonymous");
  img.src = url;
};

export const loadImageBlob = (url: string, callback: (err?: null | Error, blob?: Blob) => void) => {
  if (isDataUri(url)) {
    const blob = dataUriToBlob(url);
    setTimeout(() => {
      callback(null, blob);
    });
  } else {
    imageUrlToDataUri(url, (err, dataUri) => {
      if (err || !dataUri) return callback(err);
      const blob = dataUriToBlob(dataUri);
      callback(null, blob);
    });
  }
};