0

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.

Improve this question
2
  • 1
    My initial thought would be to draw the JPEG to a canvas with drawImage(), then call toDataURL() on that canvas. PNG is the default format when using toDataURL, so you shouldn't even need an argument to it. Commented Aug 8, 2019 at 18:47
  • @IceMetalPunk That's interesting, I'll research that. Thanks. Please feel free to make an answer if you think that will solve it. Commented Aug 8, 2019 at 18:50

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks, I've tested and this works perfectly. Good solution!