如何使用html2canvas将图像从svg显示和保存为jpg或png？

Question

我正在使用html2canvas js lib将网页转换为jpg / png。 当我在目标ID中使用简单的div或表格并单击按钮将网页另存为图像时。 有效。 但是，每当我在目标ID中使用svg时，它将无法正常工作。 它在输出中提供空白图像。

代码是：

 <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> 

而且我想输出如下图..请帮助我解决这个问题..谢谢你提前图像

Answer 1

我用了这个。DOMtoImage对我来说非常完美。

只需将js链接添加到html并运行此脚本即可；

 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); });