利用javascript保存浏览器div内容为图片

最新推荐文章于 2024-06-25 16:59:38 发布

木易66丶

最新推荐文章于 2024-06-25 16:59:38 发布

阅读量2.1k

点赞数

分类专栏：前端js

本文链接：https://blog.csdn.net/q_qman/article/details/84631844

版权

前端js 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。

1.http://html2canvas.hertzen.com/ 访问官网，demo拿走，js包也拿走，thanks for Niklas von Hertzen 0.0

2.个人写的demo

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>html2canvas example</title>
    <script type="text/javascript" src="js/html2canvas.js"></script>
     <!--这里要引下载好的html2canvas-->
    <style type="text/css">
		#capture > input{border: none; width: 200px;height: 30px;line-height: 30px;}
		
	</style>
</head>
<script type="text/javascript">
	function takeScreenshot() {
	  	html2canvas(document.querySelector("#capture")).then(canvas => {
		    document.body.appendChild(canvas)
		});
	}

</script>
<body>
    
    <div id="capture" style="padding: 10px; background:url(images/1.jpg) 50%; width: 700px; height: 500px;">
	   	<input type="text" value="123" />
	</div>
	<input type="button" value="截图" onclick="takeScreenshot()">
</body>

</html>

3.以上代码就可以简单实现功能了，另附一张api参数说明：

木易66丶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
利用javascript保存浏览器div内容为图片

html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。1.http://html2canvas.hertzen.com/ 访问官网，demo拿走，js包也拿走，thanks for Niklas von Hertzen 0.02.个人写的demo...
复制链接

扫一扫