1

I have my original image as png file as follows:

<img src="originalimage.png" >

Once I modify the original image using a third party annotation library, for example a simple pencil drawing on the original image, it gives me back a dataurl that replaces my src with the modified picture. Like so:

 <img src="data:image/png;base64,iVBORw0KGgo...>"

Everything works fine, I can view the modified image. However I want to convert the given dataurl back into a png file like the one above. Like so:

  <img src="modifiedImage.png">

How can I convert this dataurl in Javascript without using any online converters back into my png file with the modification applied ?

Victor
  • 33
  • 7
  • Does this answer your question? [convert base64 to image in javascript/jquery](https://stackoverflow.com/questions/21227078/convert-base64-to-image-in-javascript-jquery) – Aparna Jul 22 '20 at 19:39
  • If your trying to override the old file, you can't. You can download a new file (which you can save over the original file). – Gijs Beijer Jul 22 '20 at 20:31
  • What do you mean with "convert it back to png"? You're showing turning an actual file (in data-uri encoding) into that file's _filename_, and I can't think of a single reason why you'd ever do this. So: can you explain why you think you need to do this? Or what you're doing that you think requires you to do this? – Mike 'Pomax' Kamermans Jul 22 '20 at 21:09

1 Answers1

1

You can split your image src attribute with (,) comma and (;) semicolumn to get the base encoded string.

And then write it to the filesystem.

file_put_contents "../somedir/test.png" , base64_decode($baseEncodedString));

Aren
  • 191
  • 2
  • 7