Capture div into image using html2canvas in php

In this example, this scripts will allow you to take screenshot of the div directly on the user browser.

In div, what you write content in this tag it will be convert in the image and can save image of div as a screenshot. If you put image in div tag, then we can also take screenshot of image what we mention between div tag.

 So, How it is possible programmatically ? Let's see the example :-




File Name : index.php

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="js/html2canvas.js"></script> <script type="text/javascript" src="js/jquery.plugin.html2canvas.js"></script> <h2>html2canvas With JavaScript and PHP</h2> <form method="POST" enctype="multipart/form-data" action="save.php" id="form1"> <input type="hidden" name="img_value" id="img_value" value="" /> </form> <table> <tr> <td valign="top" style="padding: 10px;"> <b>Div:</b> </td> <td> <div id="target" style="border: 1px solid #CCC;padding: 5px;margin: 5px;"> <div> <p>PHP is a server-side scripting language designed primarily for web development but is also used as a general-purpose programming language.</p> </div> </div> </td> </tr> <tr> <td colspan="2"> <table width="100%"> <tr> <td> <input type="submit" value="Screenshot" onclick="capture();" /> </td> </tr> </table> </td> </tr> </table> <script type="text/javascript"> function capture() { $('#target').html2canvas({ onrendered: function (canvas) { //Set hidden field's value to image data $('#img_value').val(canvas.toDataURL("image/png")); //Submit the form1 document.getElementById("form1").submit(); } }); } </script>

File Name : save.php

1 2 3 4 5 6 7 8 9

<?php $filterData=substr($_POST['img_value'], strpos($_POST['img_value'], ",")+1); //Get the base-64 string from data $decodeData=base64_decode($filterData); //Decode the string file_put_contents('screenshot.png', $decodeData); //Save the image ?> <h2>Save the image and show to user</h2> <?php echo '<img src="'.$_POST['img_value'].'" />'; ?>

Output:

• If you want to put image in div , then just change this code in index,php file. See this code and change it.

1 2 3 4 5

<div id="target" style="border: 1px solid #CCC;padding: 5px;margin: 5px;"> <div> <p>PHP is a server-side scripting language designed primarily for web development but is also used as a general-purpose programming language.</p> </div> </div>

• Put this below code instead of above code lines

1 2 3 4

<div id="target" style="border: 1px solid #CCC;padding: 5px;margin: 5px;"> <div> <img src = "a.png"/> //image which is available in the main folder where code file is available </div>

Download File : Click Here