Frontend Masters Boost RSS Feed https://frontendmasters.com/blog Helping Your Journey to Senior Developer Thu, 14 Mar 2024 01:51:48 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.2 225069128 DOM to PNG Directly in the Browser https://frontendmasters.com/blog/dom-to-png-directly-in-the-browser/ https://frontendmasters.com/blog/dom-to-png-directly-in-the-browser/#comments Thu, 14 Mar 2024 01:51:48 +0000 https://frontendmasters.com/blog/?p=1232 You could design something on the web then take a screenshot of it. That is, in a basic sense, converting DOM to PNG. But a screenshot is rather manual and finicky. If you had to do this over and over, or you needed a very exact size (like a social media card), you can actually produce a PNG right from the browser with the click of a button. No backend service needed, like Puppeteer or Playwright which are often thought of for this type of automatic screenshotting job.

The trick is that you can render DOM to a <canvas>, thanks to the very fancy html2canvas library. Then you can use .toDataURL() to get it into PNG format and ultimately download it. I always reference Andrew Walpole’s Pen to see it done, which also happens to be a rather elegant Petite Vue example, and the contenteditable usage is a clever way to make it even more usable.

]]> https://frontendmasters.com/blog/dom-to-png-directly-in-the-browser/feed/ 1 1232