reactjs - 如何在 React js 中将 Base64 图像转换为 BLOB

Question

我有一个 base64 格式的图像。我想将其作为 BLOB 存储在 MySQL 数据库中。所以我想在react js 中将该base64 图像转换为BLOB。 如何执行转换。 atob 无法在 React js 中为我工作。

请帮我解决这个问题。 提前致谢。

Answer 1

宽度'canvas-to-blob'库，您可以将base64转换为blob。

import html2canvas from "html2canvas";
var toBlob = require("canvas-to-blob");

  useEffect(() => {
    html2canvas(document.getElementById("domEl")).then((canvas) => {
    const blobImage = toBlob(canvas.toDataURL("image/png"));
    return blobImage
    });
  }, []);

这里我正在做的是使用 html2canvas 库将我的 dom 元素转换为 Base64，然后使用 toBlob 库将我的 Canvas (base64) 转换为 blob。

如果想发送到服务器，可以使用formData构造函数:

formData = formData()
formData.append('image', blobImage , 'myimage.png')

现在您可以在端点中传递 formData。!