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.