html2canvas js截图并下载

最新推荐文章于 2024-03-21 11:01:49 发布

林大夏

最新推荐文章于 2024-03-21 11:01:49 发布

阅读量1w

点赞数

分类专栏：历史笔记

本文链接：https://blog.csdn.net/li_li_lin/article/details/48739025

版权

历史笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在网上找了一些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

林大夏

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
html2canvas js截图并下载

在网上找了一些js截图的插件，最终选择了html2canvas。首先介绍一下这个这个插件在浏览器上的兼容性：- Firefox 3.5+- Chrome+- Opera+- IE9+；然后简单介绍一下其截图的原理：html2canvas通过获取页面的DOM和元素的样式信息，并将其渲染成canvas图片，从而实现给页面截图的功能。它不需要来自服务器任何渲染，整
复制链接

扫一扫