how to show and save image as jpg or png from svg using html2canvas?

Question

i'm using html2canvas js lib for convert webpage into jpg/png. when i'm used simple div or table in my target id and clicked on button to save webpage as an image. it worked. but whenever i'm use svg in my target id then it not work. it gives blank image in output.

code is :

 <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> <script type="text/javascript"> function capture() { $('#target').html2canvas({ onrendered: function (canvas) { //Set hidden field's value to image data (base-64 string) $('#img_val').val(canvas.toDataURL("image/png")); //Submit the form manually document.getElementById("myForm").submit(); } }); } </script> <style type="text/css"> #target { border: 1px solid #CCC; padding: 5px; margin: 5px; } h2, h3 { color: #003d5d; } p { color:#AA00BB; } #more { font-family: Verdana; color: purple; background-color: #d8da3d; } </style> 

 <h2>Simple Implementation of html2canvas With JavaScript and PHP</h2> <form method="POST" enctype="multipart/form-data" action="save.php" id="myForm"> <input type="hidden" name="img_val" id="img_val" value="" /> </form> <table> <tr> <td colspan="2"> <table width="100%"> <tr> <td> <input type="submit" value="Take Screenshot Of Div Below" onclick="capture();" /> </td> <td align="right"> <a href="http://www.kubilayerdogan.net?p=304" style="font-family: Tahoma; font-size: 10pt; font-weight: bold;"> Documentation (Back to Site)</a> </td> </tr> </table> </td> </tr> <tr> <td valign="top" style="padding: 10px;"> <b>Div:</b> </td> <td> <div id="target"> <div class="slides2" id="widget"> <img class="" src="//cdn.shopify.com/s/files/1/0797/1743/products/HK-CK_28785899-10b3-4f49-88be-975a69089e52_1024x1024.JPG?v=1464803870" style="width: 38%;"> <div class="custom" style="position: relative; top: -282px; left: 100px;"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="410" height="70" viewBox="0 0 2326 460" id="svg"> <defs> <clipPath id="my-path"> <text id="texty" style="font-weight:bold;" x="60" y="300" font-size="350">sdasa</text> </clipPath> </defs> <image xlink:href="Mother of Pearl.JPG" clip-path="url(#my-path)" width="100%" height="100%" id="filler" preserveAspectRatio="none"></image> </svg> </div> </div> </div> </td> </tr> </table> 

and i want output like as below image .. please help me to sort out of this problem.. thankyou in advance image

Answer 1

I used this.. DOMtoImage Worked perfectly for me.

Just add the js link to html and run this script;

 var node = document.getElementById('element_id'); domtoimage.toPng(node).then(function (dataUrl) { var img = new Image(); img.src = dataUrl; $("element_destiny").html('<img src="' + img.src + '" id="image_id" />'); }) .catch(function (error) { console.error('oops, something went wrong!', error); });