您当前位置：首页 > 文章中心 > HTML5+CSS3 > HTML5

文章分类 Classification

SCSCMS

网页制作

HTML基础

标准规范

软件使用

图像处理

网页编程

HTML5+CSS3

NodeJs相关

【HTML5】

下载

新闻

文章

相关内容

暂无相关下载内容

暂无相关新闻内容

暂无相关文章内容

html2canvas

html2canvas

稿件来源: 互联网   撰稿作者: 匿名   发表日期: 2014-1-17   阅读次数: 58   查看权限: 游客查看

这是用脚本去截屏网页或者部分网页，由于截屏是基于文档节点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>

下载版本：v0.4.1 - 7.9.2013

官网介绍

 

关键词: html2canvas,canvas   编辑时间: 2014-1-17 10:23:56

0%(0)

0%(0)

上一篇：

中搜索：html2canvas

中搜索：html2canvas

共有0 条评论 发言请遵守【】网友评论

暂无评论

文章图片 article Pictrue