站内导航
新闻
影视
游戏
小说
旅游
购物
体育
html2canvas将dom转为canvas
2017/06/08    标签： html2canvas   

官方github地址：https://github.com/niklasvh/html2canvas

支持的浏览器

Firefox 3.5+

Google Chrome

Opera 12+

IE9+

Safari 6+

工作原理

Html2canvas加载后将会浏览页面上的所有元素，集合所有页面元素的信息，然后用户就可以通过Html2canvas把整个页面截图下来。

换句话说，Html2canvas不会实际上的截图，而是通过从DOM读取的足够信息去建立一个页面的展示镜像。

这就会导致Html2canvas只会渲染它认识的正确的DOM元素属性，还有很多CSS属性是不会生效的，也就渲染不出来了。


限制

所有的图片都需要在当前域下，这样Html2canvas才能不通过代理去读取到。同样地，如果你的页面上有其他的被跨域内容污染的canvas元素，html2canvas将不能准确渲染下来。

html2canvas不会渲染插件内容：Flash，Java组件，和iframe页面的内容。


所以，用户需要在特定的情况下来使用该插件，便能发挥很大的便利。

使用方法：

方法1：
 

html2canvas(element, {
    onrendered: function(canvas) {
        // canvas 是最后一个渲染的<canvas> 元素
    }
});

方法2： 

//两个参数：所需要截图的元素id，截图后要执行的函数， canvas为截图后返回的最后一个canvas
 html2canvas(document.getElementById('id')).then(function(canvas) {document.body.appendChild(canvas);});

可用参数

参数名称 类型 默认值 描述
allowTaint boolean false Whether to allow cross-origin images to taint the canvas---允许跨域
background string #000 Canvas background color, if none is specified in DOM. Set undefined for transparent---canvas的背景颜色，如果没有设定默认透明
height number null Define the heigt of the canvas in pixels. If null, renders with full height of the window.---canvas高度设定
letterRendering boolean false Whether to render each letter seperately. Necessary if letter-spacing is used.---在设置了字间距的时候有用
logging boolean false Whether to log events in the console.---在console.log()中输出信息
proxy string undefined Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.---代理地址
taintTest boolean true Whether to test each image if it taints the canvas before drawing them---是否在渲染前测试图片
timeout number 0 Timeout for loading images, in milliseconds. Setting it to 0 will result in no timeout.---图片加载延迟，默认延迟为0，单位毫秒
width number null Define the width of the canvas in pixels. If null, renders with full width of the window.---canvas宽度
useCORS boolean false Whether to attempt to load cross-origin images as CORS served, before reverting back to proxy


上一篇:
下一篇:

静水缘首页

刘丕水+宋静静=静水刘丕水+宋静静于2007年9月相识于山东理 工大学，毕业后2011年相恋，共甘苦，历 时四年，终于在11月23号拿到了红本本， 组建了自己的小家庭......
快速发布

文章分类

最新文章