html2canvas js截图并下载

昨夜雾浓 2017-12-13

展开全文

在网上找了一些js截图的插件，最终选择了html2canvas。

首先介绍一下这个这个插件在浏览器上的兼容性：- Firefox 3.5+ - Chrome+ - Opera+ - IE9+；

然后简单介绍一下其截图的原理：html2canvas通过获取页面的DOM和元素的样式信息，并将其渲染成canvas图片，从而实现给页面截图的功能。它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时，将采用Flashcanvas或ExplorerCanvas技术代替实现。值得注意的是：因为每个浏览器渲染页面的方式都不尽相同，所以生成的图片也不太一样。虽然它目前还是处理开发阶段，但还是很值得期待的。这个插件依赖于jQuery插件，建议使用最新版。的。

现在上代码loding...

[html] view plain copy

print?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html2canvas网页截图</title>
<script src="js/jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*html2canvas()中,第一个参数是要截图的Dom对象，第二个参数时渲染完成后回调的canvas对象。*/
$(function() {
html2canvas($("#myCanvas"), {
onrendered: function(canvas) {
$('#down_button').attr('href', canvas.toDataURL());
$('#down_button').attr('download', 'myjobdeer.png');
//$('#down_button').css('display','inline-block');
var html_canvas = canvas.toDataURL();
$.post('', {
order_id: 1,
type_id: 2,
html_canvas: html_canvas
}, function(json) {}, 'json');
}
});
});
</script>
</head>
<body>
<div id="myCanvas" style="width: 100px; height: 100px; background-color: cornflowerblue;"></div>
<hr>
<br/>
<a id="down_button">下载</a>
</body>
</html>