在开始使用html2canvas之前，有一些关于html2canvas及其一些限制的好处。

介绍

该脚本允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”。屏幕截图基于DOM，因此它可能不是真实表示的100％准确，因为它没有制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。

这个怎么运作

该脚本遍历其加载的页面的DOM。它收集有关那里所有元素的信息，然后用它来构建页面的表示。换句话说，它实际上并不截取页面的截图，而是根据从DOM读取的属性构建它的表示。

因此，它只能正确呈现它理解的属性，这意味着有许多CSS属性不起作用。

限制

脚本使用的所有图像都需要位于相同的原点
下，以便能够在没有代理帮助的情况下读取它们。同样，如果您canvas
在页面上有其他元素，这些元素已被污染了跨源内容，它们将变得脏，并且不再被html2canvas读取。

该脚本不会呈现插件内容，如Flash或Java小程序。

用法实例

<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>html2canvas</title>

	<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

</head>

<body>

    <h1>html内容</h1>

	<div id="htmlcanvas" style="padding: 10px; background: red">

		<h4 style="color: #fff; ">one！two！!three!!!</h4>

		<h2 style="text-align:center;">那一瞬间有一百万可能</h2>

    </div>

    <h1>canvas内容</h1>

    <div id="canid"></div>

	<script>

		html2canvas(document.querySelector("#htmlcanvas")).then(canvas => {

            document.getElementById("canid").appendChild(canvas);

		});

    </script>

</body>

</html>

效果图:

想了解html2canvas更多的伙伴们，可以去访问官网：http://html2canvas.hertzen.com/getting-started

html2canvas脚本实现将html内容转换canvas内容的更多相关文章

  1. 绘制SVG内容到Canvas的HTML5应用

    SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融合在一起, ...

  2. qrcode.js插件将你的内容转换成二维码格式

    ---qrcode.js插件将你的内容转换成二维码格式--- 我之前一直想知道二维码是怎么生成,所以就了解了一下, 最后还是不知道它的原理, 但是,我知道怎么生成. 现在就让我带你制作一个你喜爱的二维 ...

  3. Python3 将configparser从ini文件中读取的内容转换成字典格式

    因为写脚本的用到了,所以研究了下怎么将configparser从ini文件中读取的内容转换成字典格式. 整理一下,希望能对大家有帮助. 从http://stackoverflow.com/questi ...

  4. 在 shell 脚本获取 ip、数字转换等网络操作

    在 shell 脚本获取 ip.数字转换等网络操作 ip 和数字的相互转换 ip转换为数字 :: function ip2num() { local ip=$1 local a=$(echo $ip ...

  5. 转换 Html 内容为纯文本内容（html,文本互转）

    转自http://www.cnblogs.com/jyshi/archive/2011/08/09/2132762.html : /// <summary> /// 转换纯文本内容为 HT ...

  6. SQL 把表中字段存储的逗号隔开内容转换成列表形式

    原文:[原创]SQL 把表中字段存储的逗号隔开内容转换成列表形式 我们日常开发中,不管是表设计问题抑或是其他什么原因,或多或少都会遇到一张表中有一个字段存储的内容是用逗号隔开的列表. 具体效果如下图: ...

  7. AngularJS转换请求内容

    在"AngularJS中转换响应内容"中,体验了如何转换响应内容.本篇来体验如何转换请求内容. 主页面通过onSend方法把request对象转递出去. <form name ...

  8. JS框架_(Qrcode.js)将你的内容转换成二维码格式

    百度云盘 传送门 密码:304e 输入网址点击按钮生成二维码,默认为我的博客首页 二维码格式演示 <!DOCTYPE html> <html lang="en"& ...

  9. MySQL.之 一行内容转换多行

    MySQL.之 一行内容转换多行 描述: 将一行记录中的某一列值(值格式:数据之间用英文逗号隔开),将这一数据转换成多行. 例如:表 cds_var 中的 cds_value 中的数据格式:多个id之 ...

随机推荐

  1. Apache beam中的便携式有状态大数据处理

    Apache beam中的便携式有状态大数据处理 目标: 什么是 apache beam? 状态 计时器 例子&小demo 一.什么是 apache beam? 上面两个图片一个是正面切图,一 ...

  2. uni-app开发一次，覆盖多端的前端框架

    uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS.Android.H5.小程序等多个平台. 一套代码,运行多个平台 uni-app实现了一套代码, ...

  3. Installing TensorFlow on Ubuntu or Windows

    Installing TensorFlow on Ubuntu 显卡驱动:http://developer2.download.nvidia.com/compute/cuda/8.0/secure/P ...

  4. 【微信小程序开发】页面配置

    app下的app.json文件是全局配置. app下的每一个page中,也可以配置.json文件. page中配置的内容是对应app中window配置项下的内容. page中的配置将覆盖window中 ...

  5. jquery中siblings方法配合什么方法一起使用

    siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的.接下来通过本文给大家介绍jQuery siblings()用法实例详解,需要的朋友参考下吧 siblings() 获得匹 ...

  6. lombok(@Getter&@Setter)

    Lombok是一个可以通过简单的注解形式来帮助我们简化消除一些必须有但显得很臃肿的Java代码的工具,通过使用对应的注解,可以在编译源码的时候生成对应的方法. 官方地址:https://project ...

  7. Reading | 《TensorFlow：实战Google深度学习框架》

    目录 三.TensorFlow入门 1. TensorFlow计算模型--计算图 I. 计算图的概念 II. 计算图的使用 2.TensorFlow数据类型--张量 I. 张量的概念 II. 张量的使 ...

  8. STM32外设初始化步骤

    1.定义外设结构体: 2.开启外设时钟: 3.调用缺省值配置函数: 4.外设具体配置: 5.外设使能.

  9. JavaScript实现LUHN算法验证银行卡号有效性

    一般验证银行卡有效性用到一种叫做LUHN的算法,简介请参考这篇博客:基于Luhn算法的银行卡卡号的格式校验 注意: 1.LUHN算法只是能校验卡号是否有效,并不能校验卡号和用户名是否一致. 2.如果有 ...

  10. 使用 Navicate 连接 Oracle9i 数据库

    Navicat Premium 是一个可多重连接的数据库管理工具,它可让你以单一程序同時连接到 MySQL.SQLite.Oracle 及 PostgreSQL 数据库,让管理不同类型的数据库更加方便 ...