{"id":1232,"date":"2024-03-13T19:51:48","date_gmt":"2024-03-14T01:51:48","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=1232"},"modified":"2024-03-13T19:51:48","modified_gmt":"2024-03-14T01:51:48","slug":"dom-to-png-directly-in-the-browser","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/dom-to-png-directly-in-the-browser\/","title":{"rendered":"DOM to PNG Directly in the Browser"},"content":{"rendered":"\n

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<\/a> or Playwright<\/a> which are often thought of for this type of automatic screenshotting job.<\/p>\n\n\n\n

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