html2canvas
这是用脚本去截屏网页或者部分网页,由于截屏是基于文档节点DOM构建,所以不代表是100%的准确性。
html2canvas
This script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.
Before you get started with the script, there are a few things that are good to know regarding the script and some of its limitations.
How it works
The script traverses through the DOM of the page it is loaded on. It gathers information on all the elements there, which it then uses to build a representation of the page. In other words, it does not actually take a screenshot of the page, but builds a representation of it based on the properties it reads from the DOM.
As a result, it is only able to render correctly properties that it understands, meaning there are many CSS properties which do not work.
Limitations
All the images that the script uses need to reside under the same origin for it to be able to read them without the assistance of a proxy. Similarly, if you have other canvas
elements on the page, which have been tainted with cross-origin content, they will become dirty and no longer readable by html2canvas.
The script doesn't render plugin content such as Flash or Java applets. It doesn't render iframe
content either, unless the content resides under the same origin.
Available options
The options variable is an object
which accepts the following parameters:
Name | Type | Default | Description |
---|---|---|---|
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 |
height | number | null | Define the heigt of the canvas in pixels. If null, renders with full height of the window. |
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. |
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. |
width | number | null | Define the width of the canvas in pixels. If null, renders with full width of the window. |
useCORS | boolean | false | Whether to attempt to load cross-origin images as CORS served, before reverting back to proxy |
这是用脚本去截屏网页或者部分网页,由于截屏是基于文档节点DOM构建,所以不代表是100%的准确性。
<script type="text/javascript"> html2canvas(document.body, { onrendered: function(canvas) { document.body.appendChild(canvas);//canvas.toDataURL()返回图片地址 }, width: 300,//可选 height: 300//可选 }); </script>
官网介绍 http://html2canvas.hertzen.com/
关键词: html2canvas,canvas 编辑时间: 2014-01-17 10:23:56
0
高兴0
支持0
搞笑0
不解0
谎言0
枪稿0
震惊0
无奈0
无聊0
反对0
愤怒
- 中搜索:html2canvas
- 中搜索:html2canvas
- 暂无评论
网友评论