How to save any div as image file - Html2Canvas, Javascript, Ajax, PHP

How to save any div as image file - Html2Canvas, Javascript, Ajax, PHP

If you ever run into a problem where you want to take a screenshot of div and save it in your server, then you are in the right place. In this tutorial, you will learn how to save any div element as an image using a library called Html2Canvas. Html2Canvas library will convert your div into base64 image which can be sent in Ajax request and PHP will be able to save that file in the server. At the PHP side, we have to decode the base64 image. This tutorial will teach you step-by-step on how to save a div tag as an image using Html2Canvas and PHP.

- Take a screenshot of any section of web page
- Save image file
- file_put_contents PHP
- Ajax Javascript (no jQuery)
- Convert canvas to an image
- base64_decode PHP

Source code:
adnan-tech.com/save-div-as-image-html2canvas