早睡早起,方能养生!
Sleep early rise early, way to keep healthy!

Javascript 对 Html 中的 Dom元素截图

super
2022-03-16 16:04
views 223

使用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 条讨论
top