2

I have an image in base64. I want to store that in MySQL Database as BLOB. So i want to convert that base64 image into BLOB in react js. How to perform the convertion. atob is not working in react js for me.

Please help me in resolving this issue. Thanks in advance.

sureshtechi
  • 145
  • 5
  • 15
  • 1
    Possible duplicate of https://stackoverflow.com/questions/36698716/how-to-convert-base64-into-blob-in-react-native https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript – c3b5aw May 31 '22 at 07:47
  • @c3b5aw In the 1st link npm base64 is not there for react js( https://github.com/mathiasbynens/base64). The 2nd link i have tried, atob is not working. – sureshtechi May 31 '22 at 08:21

1 Answers1

3

Width 'canvas-to-blob' library you can convert base64 to 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
    });
  }, []);

Here what I am doing is converting my dom element to Base64 with html2canvas library, then I am converting my canvas (base64) to blob using toBlob library.

If you want to send it to the server, you can use the formData constructor:

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

Now you can pass formData in your endpoint.!

Alexander Garzo
  • 79
  • 5