html2canvas脚本实现将html内容转换canvas内容
在开始使用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内容的更多相关文章
- 绘制SVG内容到Canvas的HTML5应用
SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融合在一起, ...
- qrcode.js插件将你的内容转换成二维码格式
---qrcode.js插件将你的内容转换成二维码格式--- 我之前一直想知道二维码是怎么生成,所以就了解了一下, 最后还是不知道它的原理, 但是,我知道怎么生成. 现在就让我带你制作一个你喜爱的二维 ...
- Python3 将configparser从ini文件中读取的内容转换成字典格式
因为写脚本的用到了,所以研究了下怎么将configparser从ini文件中读取的内容转换成字典格式. 整理一下,希望能对大家有帮助. 从http://stackoverflow.com/questi ...
- 在 shell 脚本获取 ip、数字转换等网络操作
在 shell 脚本获取 ip.数字转换等网络操作 ip 和数字的相互转换 ip转换为数字 :: function ip2num() { local ip=$1 local a=$(echo $ip ...
- 转换 Html 内容为纯文本内容（html,文本互转）
转自http://www.cnblogs.com/jyshi/archive/2011/08/09/2132762.html : /// <summary> /// 转换纯文本内容为 HT ...
- SQL 把表中字段存储的逗号隔开内容转换成列表形式
原文:[原创]SQL 把表中字段存储的逗号隔开内容转换成列表形式 我们日常开发中,不管是表设计问题抑或是其他什么原因,或多或少都会遇到一张表中有一个字段存储的内容是用逗号隔开的列表. 具体效果如下图: ...
- AngularJS转换请求内容
在"AngularJS中转换响应内容"中,体验了如何转换响应内容.本篇来体验如何转换请求内容. 主页面通过onSend方法把request对象转递出去. <form name ...
- JS框架_(Qrcode.js)将你的内容转换成二维码格式
百度云盘 传送门 密码:304e 输入网址点击按钮生成二维码,默认为我的博客首页 二维码格式演示 <!DOCTYPE html> <html lang="en"& ...
- MySQL.之 一行内容转换多行
MySQL.之 一行内容转换多行 描述: 将一行记录中的某一列值(值格式:数据之间用英文逗号隔开),将这一数据转换成多行. 例如:表 cds_var 中的 cds_value 中的数据格式:多个id之 ...
随机推荐
- nginx简单权限配置
一.指定ip段 location / { allow 172.17.0.1/24; deny all; } 二.指定认证账户 location / { auth_basic "please ...
- 网页打印样式CSS
相信大多数的前端工程师都是处理显示屏上面的设计,用到最多的计量单位就是px,但是有些时候,我们难免也会有打印的需求,比如一个电商平台的“物流配送打印单”,“打印订单”等等可能都是需要从网友上打印出来的 ...
- 2019.02.14 codechef Chef at the Food Fair（线段树+泰勒展开）
传送门 题意:现在有nnn个位置,每个位置上有一个值aia_iai. 要求支持如下两种操作: 区间乘vvv 求区间的(1−ai)(1-a_i)(1−ai)之积 思路: 考虑转换式子: Ans=∏i ...
- Unity3D之物理射线
射线:从一个点往一个方向,发射一根无限长的射线,这根射线会与场景中带有 Collider 组件的物体发生碰撞. 射线的使用: public class Test { private void Star ...
- Release file is expired, Updates for this repository will not be applied.(资源索引文件过期问题)
将Debian下载源同步到本地之后,通过本地资源地址进行apt update操作时提示过期问题: E: Release file for http://localhost/security/dists ...
- 20155326刘美岑 《网络对抗》Exp1 PC平台逆向破解
20155326刘美岑 <网络对抗>逆向及Bof基础实践 1.1 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函 ...
- channel和Stream的对比
这篇文章主要想总结下NIO的channel的传统io中的stream的差别在哪.网上找了很多文章,都感觉只是说了概念.然后自己大概看了下源码,结合概念,整理一下.有些地方可能不是很准确,也希望可以给点 ...
- Hadoop 系列文章(二) Hadoop配置部署启动HDFS及本地模式运行MapReduce
接着上一篇文章,继续我们 hadoop 的入门案例. 1. 修改 core-site.xml 文件 [bamboo@hadoop-senior hadoop-2.5.0]$ vim etc/hadoo ...
- docker 容器和镜像理解
1.镜像是Docker容器的基石,容器是镜像的运行实例,有了镜像才能启动容器.容器和镜像是一对一的,一个容器里就运行一个镜像. 1.base镜像----提供了一个基本的操作系统环境,用户可以根据需要安 ...
- PgAgent安装、配置、运行
一 安装cmakewget http://www.cmake.org/files/v2.8/cmake-2.8.5.tar.gztar -zxvf cmake-2.8.5.tar.gzcd /root ...