51 Mordern技术站

Web 屏幕截图之html2canvas

2017年12月28日 14:09

原创作品，转载时请务必以超链接形式标明文章原始出处，否则将追究法律责任。

最近做项目需要，需要收集用户对新的UI设计的反馈，用邮件显然是一个笨拙低效的方式。因此我需要实现一个web在线截图，用户可以对有问题的页面进行截图并描述问题所在。后台管理员只需要关注这些反馈就行了。

今天，我们就简单尝试一下html2canvas。首先我们需要去官网下载js包（http://html2canvas.hertzen.com/）

在使用之前我们需要注意它只支持如下的浏览器

Firefox 3.5+
Google Chrome
Opera 12+
IE9+
Edge
Safari 6+

当然了，任何的东西都不是完美的，他的局限性如下

该脚本允许您直接在用户浏览器上截取网页或其部分的“截图”。屏幕截图基于DOM，因此可能不是100％准确的真实表示，因为它没有制作实际的屏幕截图，而是根据页面上提供的信息构建屏幕截图。该脚本不呈现插件内容，如Flash或Java小程序。

OK，其实我们也不需要太花哨的功能，OK我们看一下页面，俗话说无图无真相

页面代码如下

<html>

<head>
	<link rel="stylesheet" href="./dist/bootstrap/css/bootstrap.min.css" />
    <script type="text/javascript" src="./dist/jquery-1.11.1.js">
    </script>
	<script type="text/javascript" src="./dist/html2canvas.js">
    </script>
	<script type="text/javascript" src="./dist/bootstrap/js/bootstrap.min.js">
    </script>
    
	<script type="text/javascript">
            function start() {
                html2canvas(document.querySelector("#div_screenshot")).then(canvas => {
                     $("#content").html('').append(canvas);
                     $('#myModal').modal({
                        keyboard: true
                    })
                });
            };
    </script>
</head>
<body>
	<div id="div_screenshot" style="height:350px;width:300px;padding:10px">
		<img src="dist/1.jpg" style="height:300px;width:300px">
        <br>
		<b>老李测试截图</b>
		<button onclick="start()">截图</button>
	</div>
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">用户反馈</h4>
				</div>
				<div class="modal-body" >
                    <div id="content"></div>
                    <div>
                        建议：<textarea class="form-control"></textarea>
                    </div>
                </div>
				<div class="modal-footer">
					<button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary">提交</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
</body>

</html>

很简单，js引进来，然后我们在点击截图按钮的时候，将生成的canvas置于弹出页的DOM中，看一下效果