如何使用html2canvas将图像显示为jpg或png？
如何使用html2canvas将图像显示为jpg或png？
提问于 2016-08-12 10:19:24
我使用html2canvas js将网页转换为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><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>
我希望输出像下面的图片..。请帮我解决这个问题。预先谢谢你图像
回答 1
Stack Overflow用户
发布于 2016-08-12 13:25:17
我用这个..。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);
});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38915564
复制相关文章
相似问题
腾讯云开发者
