`

html2canvas

阅读更多

 

[Homepage](http://html2canvas.hertzen.com) | [Downloads](https://github.com/niklasvh/html2canvas/releases) | [Questions](http://stackoverflow.com/questions/tagged/html2canvas?sort=newest) | [Donate](https://www.gittip.com/niklasvh/)

 

[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/niklasvh/html2canvas?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [![Build Status](https://travis-ci.org/niklasvh/html2canvas.png)](https://travis-ci.org/niklasvh/html2canvas)

 

#### JavaScript HTML renderer ####

 

 The 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.

 这个截屏是基于DOM的,做不到跟真实的截屏一样百分百的精确,但是构建的这个截屏是基于页面上可见的元素做的。

 

###How does it work?###

The script renders(渲染) the current page as a canvas image, by reading the DOM and the different styles applied to the elements.

脚本渲染当前的页面为一个画布图片,通过读取DOM以及用在DOM上的样式。

It does **not require any rendering from the server**, as the whole image is created on the **clients browser**. 

不需要来自服务端的补偿,整个图片的创建是基于浏览器的。

However, as it is heavily dependent on the browser, this library is *not suitable* to be used in nodejs.

它重度依赖浏览器,它依赖的JS库不能通过nodeJS从服务器获取。

It doesn't magically(使用魔法般) circumvent(包围) any browser content policy restrictions either, so rendering cross-origin content will require a [proxy](https://github.com/niklasvh/html2canvas/wiki/Proxies) to get the content to the [same origin](http://en.wikipedia.org/wiki/Same_origin_policy).

 

The script is still in a **very experimental state**, so I don't recommend using it in a production environment nor start building applications with it yet, as there will be still major changes made.

整个脚本仍然是一个测试状态,所以我不建议把它用作生产环境,也不建议使用它来构建一个应用,因为整个脚本还在一个重大改变的阶段。

 

###Browser compatibility###

浏览器兼容性

The script should work fine on the following browsers:

 

* Firefox 3.5+

* Google Chrome

* Opera 12+

* IE9+

* Safari 6+

 

As each CSS property needs to be manually built to be supported, there are a number of properties that are not yet supported.

每一个CSS属性都需要手动的去创建对它的支持,现在还有大量的CSS属性没有支持.

 

### Usage ###

 

**Note!** These instructions are for using the current dev version of 0.5, for the latest release version (0.4.1), checkout the [old readme](https://github.com/niklasvh/html2canvas/blob/v0.4/readme.md).

下面的笔记适用于当前0.5的开发版,最新的发布版0.4.1需要在git上下载

To render an `element` with html2canvas, simply call:

` html2canvas(element[, options]);`

要用html2canvas渲染一个元素,简单的通过调用:` html2canvas(element[, options]);`

The function returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) containing the `<canvas>` element. Simply add a promise fullfillment handler to the promise using `then`:

这个方法返回一个包含`<canvas>` element元素的[Promise]对象。

 

    html2canvas(document.body).then(function(canvas) {

        document.body.appendChild(canvas);

    });

 

### Building ###

构建

The library uses [grunt](http://gruntjs.com/) for building. Alternatively, you can download the latest build from [here](https://github.com/niklasvh/html2canvas/blob/master/dist/html2canvas.js).

这个JS库适用[grunt]构建,或者你可以下载最新构建好的库。

 

Clone git repository with submodules:

作为一个插件构建来客隆git库

    $ git clone --recursive git://github.com/niklasvh/html2canvas.git

 

Install Grunt and uglifyjs:

 

    $ npm install -g grunt-cli uglify-js

 

Run the full build process (including lint, qunit and webdriver tests):

 

    $ grunt

 

Skip lint and tests and simply build from source:

 

    $ grunt build

 

### Running tests ###

 

The library has two sets of tests. The first set is a number of qunit tests that check that different values parsed by browsers are correctly converted in html2canvas. To run these tests with grunt you'll need [phantomjs](http://phantomjs.org/).

 

The other set of tests run Firefox, Chrome and Internet Explorer with [webdriver](https://github.com/niklasvh/webdriver.js). The selenium standalone server (runs on Java) is required for these tests and can be downloaded from [here](http://code.google.com/p/selenium/downloads/list). They capture an actual screenshot from the test pages and compare the image to the screenshot created by html2canvas and calculate the percentage differences. These tests generally aren't expected to provide 100% matches, but while commiting changes, these should generally not go decrease from the baseline values.

 

Start by downloading the dependencies:

 

    $ npm install

 

Run qunit tests:

 

    $ grunt test

 

### Examples ###

 

For more information and examples, please visit the [homepage](http://html2canvas.hertzen.com) or try the [test console](http://html2canvas.hertzen.com/screenshots.html).

 

### Contributing ###

 

If you wish to contribute to the project, please send the pull requests to the develop branch. Before submitting any changes, try and test that the changes work with all the support browsers. If some CSS property isn't supported or is incomplete, please create appropriate tests for it as well before submitting any code changes.

 

分享到:
评论

相关推荐

    html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片

    html2canvas是一款强大的JavaScript库,能够将HTML元素转换成Canvas图像。它不依赖于服务器端的渲染,完全在客户端完成,这对需要截图网页或网页元素的场景非常有用。html2canvas支持各种浏览器,包括Firefox 3.5+、...

    html2canvas(1.0.0)

    《html2canvas:网页元素截图神器》 html2canvas是一个非常强大的JavaScript库,它允许你在浏览器环境中将HTML渲染为Canvas图像,进而可以将其保存为图片或者进行其他图像处理。这个库在1.0.0版本中经过了优化和...

    html2canvas-0.4.1

    《html2canvas:网页元素截图神器》 html2canvas是一个非常实用的JavaScript库,它的主要功能是将HTML页面或者特定的DOM元素转换为Canvas图像,进而可以导出为图片格式,如JPEG、PNG等。这个工具在Web开发中有着...

    html2Canvas截图加demo

    HTML2Canvas是一个JavaScript库,它的主要功能是在浏览器端将HTML内容转换为Canvas图像,进而可以进一步导出为图片格式,如JPEG、PNG等。这个工具对于网页开发者来说非常有用,因为它允许用户在不借助服务器端处理的...

    html2canvas.js 下载

    《html2canvas.js:网页截屏的利器》 在当今的Web开发中,用户界面的交互性和可分享性越来越重要,而html2canvas.js正是实现这些功能的关键工具。这个JavaScript库允许开发者将网页的HTML结构及其CSS样式转换为...

    html2canvas生成图片案例

    HTML2canvas是一个JavaScript库,它的主要功能是将HTML页面或者DOM元素转换为Canvas图像,进而可以进一步导出为JPEG、PNG或SVG等格式的图片。这个工具在网页开发中非常实用,尤其对于需要用户自定义生成图形或者截图...

    html2canvas 网页对图片加水印

    HTML2Canvas是一个JavaScript库,它允许在浏览器环境中将HTML元素转换为Canvas图像。这个库的主要目的是为网页提供一种方式,可以捕获页面的某个部分或整个页面为图像,包括CSS样式和图片。在这个过程中,我们可以...

    html2canvas-rc4.js和html2canvas.min.js

    HTML2canvas是一个JavaScript库,它的主要功能是将HTML页面或者DOM元素转换为Canvas图像或图片。这个库在前端开发中非常有用,特别是在需要保存网页截图或者实现动态生成图像的场景中。然而,像所有软件一样,...

    html2canvas将HTML内容写入Canvas生成图片 uniapp

    HTML2canvas是一个JavaScript库,它的主要功能是在浏览器环境中将HTML内容转换为Canvas图像,从而能够进一步将这些图像保存为图片格式,如JPEG、PNG等。这个工具在Web开发中非常实用,尤其对于需要在客户端生成屏幕...

    html2canvas.js

    HTML2canvas.js和jspdf.debug.js是两个在前端开发中常用的JavaScript库,它们主要用于实现网页内容的截图和PDF生成功能。这两个工具对于那些希望在浏览器环境中实现离线文档保存或提供用户下载定制化报告的开发者来...

    html2canvas.zip

    HTML2Canvas是一个JavaScript库,主要用于在浏览器环境中将HTML渲染为Canvas图像。这个工具允许开发者将网页的DOM结构转换成一个可以操作的画布元素,进而可以进行保存为图片或者进行进一步的图形处理。这个功能在...

    html2canvas生成PDF并下载的解决方案

    HTML2Canvas是一个JavaScript库,它的主要功能是将HTML页面的内容渲染为Canvas图像,进而可以转换成其他格式,如JPEG、PNG或PDF。这个工具在Web开发中非常有用,特别是当需要用户从网页上直接下载可视化的页面内容时...

    html2canvas 1.0.0-rc.5

    低版本HTML2canvas 前端开发 生成海报 截图等功能 1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM,因此可能不是 100% 准确到真实表示,因为它不会制作实际的屏幕截图,而是根据...

    html2canvas生成图片demo.zip

    HTML2canvas是一个JavaScript库,它的主要功能是将HTML渲染为Canvas图像,进而可以转换成JPEG、PNG或SVG等格式的图片。这个技术在Web开发中非常有用,特别是在生成分享海报、截图保存页面或者创建可打印内容时。在这...

    html2canvas.js and html2canvas.svg.js and bluebird.min.js

    HTML2Canvas是一个JavaScript库,它的主要功能是将HTML页面的内容渲染为Canvas图像,进而可以转换成JPEG、PNG或SVG格式的图片。这个技术在网页截屏、数据可视化以及需要保存网页快照的场景中非常有用。它的工作原理...

    html2canvas.min.zip

    《html2canvas:JavaScript网页元素转图片神器》 在当今的Web开发中,有时我们需要将网页的某一部分或者整个页面转换为图片,以便于分享、保存或者生成海报。这时,html2canvas这个JavaScript库就显得尤为重要。...

    html2canvas最新版本git下载的

    包含的有:html2canvas.js html2canvas.mini.js,版本号是v1.0.0-alpha.12,。简洁:著作权归作者所有。 商业转载请联系作者获得授权,非商业转载请注明出处。 链接:http://caibaojian.com/html2canvas.html 来源:...

    html2canvas生成pdf(html高度自适应带iframe)

    `html2canvas`负责将HTML元素渲染为Canvas,而`jspdf`则用于将Canvas内容转换为PDF格式。以下是对这两个库以及与`iframe`、高度自适应和背景颜色处理相关的知识点的详细解释。 首先,`html2canvas`是一个JavaScript...

    html2canvas实现js截图+模拟摄像头拍照

    `html2canvas` 和 `canvas2Image` 这两个JavaScript库就为我们提供了这样的可能性。 `html2canvas` 是一个开源的JavaScript库,它的主要作用是将HTML页面渲染为Canvas对象,进而可以将其转换为图片。这个过程通常被...

Global site tag (gtag.js) - Google Analytics