JavaScript Base64 到 PNG

在 JavaScript 中，我们可以使用 Base64 将图片转换为文本字符串并在网页中传输。但是，有时候我们需要将 Base64 字符串转换回 PNG 图片并保存到本地或上传到服务器。这篇文章将介绍如何使用 JavaScript 将 Base64 转换为 PNG 图片。

使用 Canvas 将 Base64 转换为 PNG

首先，我们需要创建一个空的 Canvas 元素，并将 Base64 字符串绘制到这个 Canvas 上。然后，我们可以使用 toDataURL() 方法将这个 Canvas 转换为新的 Base64 字符串。最后，将这个新的 Base64 字符串转换为 Blob 对象，并创建一个 URL 对象，以便在浏览器中显示 PNG 图片或上传到服务器。

/**
 * 将 Base64 转换为 PNG 图片并返回 Blob 对象
 * @param {string} base64 - Base64 字符串
 * @returns {Promise<Blob>} - 返回 Promise 对象，包含 PNG 图片的 Blob 对象
 */
function base64ToBlob(base64) {
  return new Promise((resolve, reject) => {
    // 创建一个空的 Canvas 元素
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 创建一个 Image 元素，并在加载完成后将其绘制到 Canvas 上
    const img = new Image();
    img.onload = () => {
      // 将 Base64 字符串绘制到 Canvas 上
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);

      // 将 Canvas 转换为新的 Base64 字符串
      const newBase64 = canvas.toDataURL('image/png');

      // 将新的 Base64 字符串转换为 Blob 对象
      const arr = newBase64.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);
      }
      const blob = new Blob([u8arr], { type: mime });

      resolve(blob);
    };
    img.onerror = reject;
    img.src = base64;
  });
}

使用上面的函数将 Base64 转换为 PNG 图片，并下载到本地：

const base64 = '...'; // 替换为实际的 Base64 字符串
base64ToBlob(base64).then((blob) => {
  // 创建一个 URL 对象，并使用该 URL 下载 PNG 图片到本地
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = 'image.png';
  document.body.appendChild(link);
  link.click();

  // 释放 URL 对象
  URL.revokeObjectURL(link.href);
});

结论

在这篇文章中，我们介绍了如何使用 JavaScript 将 Base64 转换为 PNG 图片。通过将 Base64 字符串绘制到 Canvas 上并使用 toDataURL() 方法将其转换为新的 Base64 字符串，我们可以很容易地将 Base64 转换为 PNG 图片并保存到本地或上传到服务器。