我使用html2canvas js lib将网页转换为jpg / png。当我在目标ID中使用简单的div或table并点击按钮将网页保存为图像时。有效。但每当我在我的目标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>
&#13;
<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>
&#13;
我希望输出如下图所示..请帮我解决这个问题..提前谢谢你 image
答案 0 :(得分:0)
我用过这个.. 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);
});
&#13;