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

html2canvas

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

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

官网介绍 http://html2canvas.hertzen.com/

 

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

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐