在网上找了一些js截图的插件,最终选择了html2canvas。
首先介绍一下这个这个插件在浏览器上的兼容性:- Firefox 3.5+- Chrome+- Opera+- IE9+;
然后简单介绍一下其截图的原理:html2canvas通过获取页面的DOM和元素的样式信息,并将其渲染成canvas图片,从而实现给页面截图的功能。它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时,将采用Flashcanvas或ExplorerCanvas技术代替实现。值得注意的是:因为每个浏览器渲染页面的方式都不尽相同,所以生成的图片也不太一样。虽然它目前还是处理开发阶段,但还是很值得期待的。这个插件依赖于jQuery插件,建议使用最新版。的。
现在上代码loding...
<!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>
来说明一下:
引用了:1、http://www.douban.com/note/482929604/
2、http://blog.163.com/yangyan6032@126/blog/static/1218798372014112225122898/
官方网址:http://html2canvas.hertzen.com/
html2canvas|Bootstrap中文网开源项目免费 CDN 服务:http://www.bootcdn.cn/html2canvas/
如果想要将图片写到后台可以查看这个博客:http://leobluewing.iteye.com/blog/2020145