url转base64

需要满足跨域的条件下才能完成。

const urlToBase64 = (url) => {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.src = url;
    image.setAttribute("crossOrigin", "Anonymous");
    image.onload = function () {
      const canvas = document.createElement("canvas");
      canvas.width = this.naturalWidth;
      canvas.height = this.naturalHeight;
      canvas.getContext("2d").drawImage(image, 0, 0);
      resolve(canvas.toDataURL("image/png"));
    };
    image.onerror = function () {
      reject(new Error("urlToBase64 error"));
    };
  });
};

url转blob url

需要满足跨域的条件下才能完成。

const urlToBlob = (url) => {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.src = url;
    image.setAttribute("crossOrigin", "Anonymous");
    image.onload = function () {
      const canvas = document.createElement("canvas");
      canvas.width = this.naturalWidth;
      canvas.height = this.naturalHeight;
      canvas.getContext("2d").drawImage(image, 0, 0);
      canvas.toBlob((blob) => {
        resolve(URL.createObjectURL(blob));
      }, "image/png");
    };
    image.onerror = function () {
      reject(new Error("urlToBase64 error"));
    };
  });
};

base64转blob

const base64ToBlob = (base64) => {
  const byteCharacters = atob(base64).split(",");
  const byteString = byteCharacters[1];
  const mimeString = byteCharacters[0].split(":")[1].split(";")[0];
  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ab], { type: mimeString });
};

blob转base64

由于File是Blob的子类，所以所有Blob转换都适用于File类型。

const blobToBase64 = (blob) => {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.readAsDataURL(blob);
    fileReader.onload = function (e) {
      resolve(e.target.result);
    };
    fileReader.onerror = function () {
      reject(new Error("blobToBase64 error"));
    };
  });
};