Javascript 对 Html 中的 Dom元素截图
super
2022-03-16 16:04
3429
使用domtoimage对Html中指定dom截图
1）下载domtoimage包后，从src目录找到dom-to-image.js
2）在Html中引入并使用
<script src="dom-to-image.js"></script>
<script type="text/javascript">
var node = document.getElementById("table"); // 选择要截图的dom节点
domtoimage.toPng(node)
.then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
})
.catch(function (error) {
console.error("oops, something went wrong!", error);
});
// 保存为Png格式图片
// domtoimage.toBlob(document.getElementById('table'))
// .then(function (blob) {
// window.saveAs(blob, 'my-node.png');
// });
</script>
3）代码示例
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
</head>
<body>
<table id="table" border="1">
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>小红</td>
<td>12</td>
</tr>
<tr>
<td>小明</td>
<td>13</td>
</tr>
</table>
</body>
<script src="dom-to-image.js"></script>
<script type="text/javascript">
var node = document.getElementById("table");
domtoimage.toPng(node)
.then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
})
.catch(function (error) {
console.error("oops, something went wrong!", error);
});
</script>
</html>
4）dom-to-image.js下载
下载方式1：github
下载方式2：dom-to-image.js.zip
更多使用方式请前往Github查看
0 条讨论
