Converting a base64-encoded jpeg to a png in React in browser

Question

I have a base64-encoded jpeg string that I'm holding in state in React. I've been trying to work out how to convert it to a png format base64 string browser-side.

I briefly looked at sharp , but I found that requires a server side node.js environment. I don't really want to have to write my own conversion script. Further searching on npm hasn't yielded anything for me.

Any help with this is very much appreciated.

Answer 1

This is untested, but you should be able to set the base64 JPEG as the source of an image, then draw that image to a canvas using context.drawImage ; once it's on a canvas, you can use canvas.toDataURL() to get a base64 PNG of it.

Answer 2

You can use the base64 image to display your image without converting it.

See this answer for a reference

Hope this helps