html2canvas根据DOM元素样式实现网页截图
2015-05-11 22:22
781 查看
html2canvas根据DOM元素样式实现网页截图
html2canvas是一个相当不错的JavaScript类库,它使用了html5和css3的一些新功能特性,实现了在客户端对网页进行截图的功能。html2canvas通过获取页面的DOM和元素的样式信息,并将其渲染成canvas图片,从而实现给页面截图的功能。
它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时,将采用Flashcanvas或
ExplorerCanvas技术代替实现。以下浏览器能够很好的支持该脚本:Firefox 3.5+, Google Chrome,
Opera新的版本, IE9以上的浏览器。
因为每个浏览器渲染页面的方式都不尽相同,所以生成的图片也不太一样。虽然它目前还是处理开发阶段,但还是很值得期待的。
这个插件依赖于jQuery插件,建议使用最新版的。
兼容性
html2canvas能在以下的浏览器中完美的运行。
- Firefox 3.5+
- Chrome
- Opera
- IE9使用方法
1、引入文件
首先我们需要引入jQuery库和html2canvas插件文件,注意html2canvas插件文件一定要在jQuery的后面引入,不然会报错。
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript"
src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
2、调用插件
通过html2canvas方法调用插件,该方法接受两个参数,第一个为要生成截图的DOM元素,第二个参数为插件的配置
html2canvas(document.body, { allowTaint: true, taintTest: false,
onrendered: function(canvas) { canvas.id = "mycanvas";
//document.body.appendChild(canvas); //生成base64图片数据 var dataUrl =
canvas.toDataURL(); var newImg = document.createElement("img");
newImg.src = dataUrl; document.body.appendChild(newImg); } });
通过一个回调函数来处理获取到的截图。
图片跨域问题
在网页的图片中,如果有跨域图片,调用toDataURL的时候会出错
SecurityError: The operation is insecure.
解决方法是在跨域的服务器上设置header设置为允许跨域请求
access-control-allow-origin: * access-control-allow-credentials: true
官网主页: http://html2canvas.hertzen.com/
本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创和谐网络环境。
转载请注明:文章转载自:问说 » html2canvas根据DOM元素样式实现网页截图
本文标题:html2canvas根据DOM元素样式实现网页截图
本文地址:http://www.uedsc.com/html2canvas.html
原文链接:http://www.uedsc.com/html2canvas.html
相关文章推荐
- html2canvas根据DOM元素样式实现网页截图
- html2canvas根据DOM元素样式实现网页截图
- 把Html插入canvas实现网页截图
- Web开发之html2canvas 实现纯JS网页截图简单例子
- html2canvas 实现纯JS网页截图简单例子
- html2canvas 实现纯JS网页截图简单例子
- JS 使用html2canvas实现截图功能的问题记录和解决方案
- JavaScript DOM 利用样式实现元素移动位置
- 根据HTML+CSS完成一个三列布局,左右侧栏宽为180px,高为300px;中间栏自适应,高为300px;中间栏子元素(宽高不确定)实现水平、垂直居中。
- html2canvas插件对整个网页或者网页某一部分截图并保存为图片
- html2canvas网页截图处理不可见区域
- JavaScript DOM 利用样式实现元素移动位置
- JavaScript DOM 利用样式实现元素移动位置
- HTML to Image in C#(C#实现Html转换为Image,即网页截图)
- JavaScript DOM 利用样式实现元素移动位置
- JS 使用html2canvas实现页面截图功能
- JavaScript DOM 利用样式实现元素移动位置
- html2canvas网页截图不清晰问题
- 如何实现根据元素的id后面的编号进行样式的变化
- 移动端H5页面截图【含 domtoimage、html2canvas 】