html2canvas可以通过纯JS对浏览器端进行"截屏",但"截图"的精确度还有待提高,部分css不可识别,如css3的filter等,所以在canvas中不能完全呈现原画面样式。
支持的浏览器
Firefox 3.5+
Google Chrome
Opera 12+
IE11+
Safari 6+
基本语法
2 | 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
|
#fff
|
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--这个我也不知道是干嘛的
|
例子
04 | <meta charset= "utf-8" > |
05 | <meta http-equiv= "X-UA-Compatible" content= "IE=edge" > |
06 | <title>html2canvas example</title> |
07 | <script type= "text/javascript" src= "html2canvas.js" ></script> |
09 | <script type= "text/javascript" > |
10 | function takeScreenshot() { |
12 | html2canvas(document.getElementById( 'view' ), { |
13 | onrendered: function (canvas) { |
14 | document.body.appendChild(canvas); |
22 | <div id= "view" style= "background:url(test.jpg) 50%; width: 700px; height: 500px;" > |
23 | <input type= "button" value= "截图" onclick= "takeScreenshot()" > |
下面是我爱模板网利用 html2canvas 生成的图片:
遇到的问题
1、由于 html2canvas.js 不支持css3的高斯模糊滤镜,所以,我是先用js将图片生成高斯模糊的canvas定位到了底层,再使用html2canvas.js生成整个页面,参见:
canvas实现高斯模糊
2、html2canvas.js使用了Promise,IE11-浏览器不支持,要做下兼容处理:
1 | if (!window.Promise) {document.write( '<script src="//www.5imoban.net/download/js/promise/es6-promise.min.js"><\/script><script>ES6Promise.polyfill()<\/script>' );') |