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

<!-- Here add image url after ajax response --> 1 < ! -- Here add image url after ajax response -- >

1

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="https://html2canvas.hertzen.com/build/html2canvas.js"></script> 1 2 <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js" > </script> <script src = "http://html2canvas.hertzen.com/build/html2canvas.js" > </script>

You can also download html2canvas.js.

3. Now add below script to convert your entire div to an image.

<script> html2canvas([document.getElementById('mainDiv')], { onrendered: function (canvas) { var imagedata = canvas.toDataURL('image/png'); var imgdata = imagedata.replace(/^data:image\/(png|jpg);base64,/, ""); //ajax call to save image inside folder $.ajax({ url: 'save_image.php', data: { imgdata:imgdata }, type: 'post', success: function (response) { console.log(response); $('#image_id img').attr('src', response); } }); } </script> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <script> html2canvas ( [ document . getElementById ( 'mainDiv' ) ] , { onrendered : function ( canvas ) { var imagedata = canvas . toDataURL ( 'image/png' ) ; var imgdata = imagedata . replace ( / ^ data : image \ / ( png | jpg ) ; base64 , / , "" ) ; //ajax call to save image inside folder $ . ajax ( { url : 'save_image.php' , data : { imgdata : imgdata } , type : 'post' , success : function ( response ) { console . log ( response ) ; $ ( '#image_id img' ) . attr ( 'src' , response ) ; } } ) ; } </script>

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; 1 2 3 4 5 6 7 $ 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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="https://html2canvas.hertzen.com/build/html2canvas.js"></script> 1 2 <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js" > </script> <script src = "http://html2canvas.hertzen.com/build/html2canvas.js" > </script>

Developergang.com Welcome to Developergang.com

<!-- Here add image url after ajax response --> 1 < ! -- Here add image url after ajax response -- >

<script> html2canvas([document.getElementById('mainDiv')], { onrendered: function (canvas) { var imagedata = canvas.toDataURL('image/png'); var imgdata = imagedata.replace(/^data:image\/(png|jpg);base64,/, ""); //ajax call to save image inside folder $.ajax({ url: 'save_image.php', data: { imgdata:imgdata }, type: 'post', success: function (response) { console.log(response); $('#image_id img').attr('src', response); } }); } </script> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <script> html2canvas ( [ document . getElementById ( 'mainDiv' ) ] , { onrendered : function ( canvas ) { var imagedata = canvas . toDataURL ( 'image/png' ) ; var imgdata = imagedata . replace ( / ^ data : image \ / ( png | jpg ) ; base64 , / , "" ) ; //ajax call to save image inside folder $ . ajax ( { url : 'save_image.php' , data : { imgdata : imgdata } , type : 'post' , success : function ( response ) { console . log ( response ) ; $ ( '#image_id img' ) . attr ( 'src' , response ) ; } } ) ; } </script>

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; 1 2 3 4 5 6 7 $ 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.