如何在 React js 中將 Base64 圖像轉換為 BLOB

Question

我在 base64 中有一張圖片。 我想將它作為 BLOB 存儲在 MySQL 數據庫中。 所以我想將 base64 圖像轉換為反應 js 中的 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。！