0
ich benutze html2canvas js lib für die konvertierung der webseite in jpg/png. wenn ich in meiner Ziel-ID einfach div oder table verwendet werde und auf die Schaltfläche klicke, um die Webseite als Bild zu speichern. es funktionierte. aber wenn ich svg in meiner Ziel-ID verwende, dann funktioniert es nicht. Es gibt ein leeres Bild in der Ausgabe.wie man Bild als jpg oder png von Svg unter Verwendung html2canvas zeigt und speichert?
Code ist:
<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">
\t function capture() {
\t \t $('#target').html2canvas({
\t \t \t onrendered: function (canvas) {
//Set hidden field's value to image data (base-64 string)
\t \t \t \t $('#img_val').val(canvas.toDataURL("image/png"));
//Submit the form manually
\t \t \t \t document.getElementById("myForm").submit();
\t \t \t }
\t \t });
\t }
</script>
<style type="text/css">
\t #target {
\t \t border: 1px solid #CCC;
\t \t padding: 5px;
\t \t margin: 5px;
\t }
\t h2, h3 {
\t \t color: #003d5d;
\t }
\t p {
\t \t color:#AA00BB;
\t }
\t #more {
\t \t font-family: Verdana;
\t \t color: purple;
\t \t background-color: #d8da3d;
\t }
</style><h2>Simple Implementation of html2canvas With JavaScript and PHP</h2>
<form method="POST" enctype="multipart/form-data" action="save.php" id="myForm">
\t <input type="hidden" name="img_val" id="img_val" value="" />
</form>
<table>
\t <tr>
\t \t <td colspan="2">
\t \t \t <table width="100%">
\t \t \t \t <tr>
\t \t \t \t \t <td>
\t \t \t \t \t \t <input type="submit" value="Take Screenshot Of Div Below" onclick="capture();" />
\t \t \t \t \t </td>
\t \t \t \t \t <td align="right">
\t \t \t \t \t \t <a href="http://www.kubilayerdogan.net?p=304" style="font-family: Tahoma; font-size: 10pt; font-weight: bold;">
Documentation (Back to Site)</a>
\t \t \t \t \t </td>
\t \t \t \t </tr>
\t \t \t </table>
\t \t </td>
\t </tr>
\t <tr>
\t \t <td valign="top" style="padding: 10px;">
<b>Div:</b>
\t \t </td>
\t \t <td>
\t \t \t <div id="target">
\t \t \t \t <div class="slides2" id="widget">
\t \t \t \t <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%;">
\t \t \t \t \t <div class="custom" style="position: relative; top: -282px; left: 100px;">
\t \t \t <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">
\t \t \t \t <defs>
\t \t \t \t <clipPath id="my-path">
\t \t \t \t \t <text id="texty" style="font-weight:bold;" x="60" y="300" font-size="350">sdasa</text>
\t \t \t \t </clipPath>
\t \t \t \t </defs>
\t \t \t \t <image xlink:href="Mother of Pearl.JPG" clip-path="url(#my-path)" width="100%" height="100%" id="filler" preserveAspectRatio="none"></image>
\t \t \t \t </svg>
\t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </td>
\t </tr>
</table>und i ausgegeben werden soll, wie als Bild unten .. bitte helfen Sie mir dieses Problem zu klären .. thankyou im Voraus image
