Sometimes you need to convert your entire div to the image. In this post, I am going to Convert the div or HTML to image with using jquery, javascript html2canvas with an example. and you can copy the code and apply to your website. This code is tested by my self as a developer having 5 years of experience in the same field. If you have the knowledge of jQuery, PHP coding then it will be more easy to convert HTML to image using javascript html2canvas and saving using Ajax, PHP. Here i am going to use https://html2canvas.hertzen.com/ 1.For example i have HTML like below:

Developergang.com


Welcome to Developergang.com

2.Now you have to include jquery and html2canvas.js.

You can also download html2canvas.js. 3.Now add below script to convert your entire div to image.

4.save_image.php

$imagedata = base64_decode($_POST['imgdata']);
$filename = md5(uniqid(rand(), true));
//path where you want to upload image
$file = $_SERVER['DOCUMENT_ROOT'] . '/uploads/'.$filename.'.png';
$imageurl  = 'http://example.com/uploads/'.$filename.'.png';
file_put_contents($file,$imagedata);
echo $imageurl;

Full Code

Developergang.com


Welcome to Developergang.com

save_image.php

$imagedata = base64_decode($_POST['imgdata']);
$filename = md5(uniqid(rand(), true));
//path where you want to upload image
$file = $_SERVER['DOCUMENT_ROOT'] . '/uploads/'.$filename.'.png';
$imageurl  = 'http://example.com/uploads/'.$filename.'.png';
file_put_contents($file,$imagedata);
echo $imageurl;

Hope that helps to understand html2canvas and Convert html to image javascript. If you still have queries, we will happy to help. Do comment below. Also if you want to Submit your post with the answer (Solution) or Submit Blog Post. You can visit submit blog post page.