1

Libraries like html2canvas take HTML and convert it to a canvas element. Then toDataURL() can be used to get a URL (data:image/png...). So, is there a way to convert HTML to an actual PNG Image in the browser (not the data url)? I don't want the user to download it, just get a PNG (so that if I save that to a file, I can open the image directly). PNG or JPEG or any small image storing format can be used. My target is modern browsers (not IE).

EDIT

I want to take images of the HTML, convert them to PNG and then combine them client-side (using ffmpeg.wasm), not just display the images. Most of the answers and suggestions on StackOverflow tell you how to display the images using the image.src attribute. It doesn't have to be a PNG, just any format that ffmpeg.wasm can support (though PNG is preferred)

RealZombs
  • 135
  • 1
  • 12
  • https://stackoverflow.com/questions/10721884/render-html-to-an-image This may help – Lakshya May 13 '21 at 06:45
  • A data URL can be saved to disk as a "real" image. see https://stackoverflow.com/questions/3916191/download-data-url-file – line-o May 13 '21 at 08:46
  • @Lakshya Yeah I saw that question, but my options are client side only and `html2canvas` is not really the solution... – RealZombs May 13 '21 at 11:05
  • @line-o That lists out the ways to *download* the file whereas I want to *get the PNG* content of the file! – RealZombs May 13 '21 at 11:07

1 Answers1

0

Just use the data url in the src attribute.

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" 
width="16" height="14" alt="embedded folder icon">
line-o
  • 1,885
  • 3
  • 16
  • 33