对html2canvas的研究
介绍
该脚本允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”。屏幕截图基于DOM,因此它可能不是真实表示的100%准确,因为它没有制作实际的屏幕截图,而是根据页面上可用的信息构建屏幕截图。
这个怎么运作
该脚本遍历其加载的页面的DOM。它收集有关那里所有元素的信息,然后用它来构建页面的表示。换句话说,它实际上并不截取页面的截图,而是基于从DOM读取的属性构建它的表示。
因此,它只能正确呈现它理解的属性,这意味着有许多CSS属性不起作用。有关支持的CSS属性的完整列表,请查看 支持的功能页面http://html2canvas.hertzen.com/features/
限制
脚本使用的所有图像都需要位于同源下,以便能够在没有代理帮助的情况下读取它们。同样,如果您canvas
在页面上有其他元素,这些元素已被污染了跨源内容,它们将变得脏,并且不再被html2canvas读取。
该脚本不会呈现插件内容,如Flash或Java小程序。
支持的浏览器版本:
- Firefox 3.5+
- Google Chrome
- Opera 12+
- IE9+
- Edge
- Safari 6+
npm install html2canvas
import html2canvas from 'html2canvas';
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});
所有可用的配置选项:
Name | Default | Description |
---|---|---|
allowTaint | false |
Whether to allow cross-origin images to taint the canvas |
backgroundColor | #ffffff |
Canvas background color, if none is specified in DOM. Set null for transparent |
canvas | null |
Existing canvas element to use as a base for drawing on |
foreignObjectRendering | false |
Whether to use ForeignObject rendering if the browser supports it |
imageTimeout | 15000 |
Timeout for loading an image (in milliseconds). Set to 0 to disable timeout. |
ignoreElements | (element) => false |
Predicate function which removes the matching elements from the render. |
logging | true |
Enable logging for debug purposes |
onclone | null |
Callback function which is called when the Document has been cloned for rendering, can be used to modify the contents that will be rendered without affecting the original source document. |
proxy | null |
Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded. |
removeContainer | true |
Whether to cleanup the cloned DOM elements html2canvas creates temporarily |
scale | window.devicePixelRatio |
The scale to use for rendering. Defaults to the browsers device pixel ratio. |
useCORS | false |
Whether to attempt to load images from a server using CORS |
width | Element width |
The width of the canvas |
height | Element height |
The height of the canvas |
x | Element x-offset |
Crop canvas x-coordinate |
y | Element y-offset |
Crop canvas y-coordinate |
scrollX | Element scrollX |
The x-scroll position to used when rendering element, (for example if the Element uses position: fixed ) |
scrollY | Element scrollY |
The y-scroll position to used when rendering element, (for example if the Element uses position: fixed ) |
windowWidth | Window.innerWidth |
Window width to use when rendering Element , which may affect things like Media queries |
windowHeight | Window.innerHeight |
Window height to use when rendering Element , which may affect things like Media queries |
所有受支持的CSS属性和值的列表:
background
- background-clip (Does not support
text
) - background-color
background-image
- url()
- linear-gradient()
- radial-gradient()
- background-origin
- background-position
- background-size
- background-clip (Does not support
border
- border-color
- border-radius
- border-style (Only supports
solid
) - border-width
bottom
box-sizing
content
color
display
flex
float
font
- font-family
- font-size
- font-style
- font-variant
- font-weight
height
left
letter-spacing
line-break
list-style
- list-style-image
- list-style-position
- list-style-type
margin
max-height
max-width
min-height
min-width
opacity
overflow
overflow-wrap
padding
position
right
text-align
text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-style (Only supports
solid
)
text-shadow
text-transform
top
transform (Limited support)
visibility
white-space
width
word-break
word-spacing
word-wrap
z-index
Unsupported CSS properties
These CSS properties are NOT currently supported
- background-blend-mode
- border-image
- box-decoration-break
- box-shadow
- filter
- font-variant-ligatures
- mix-blend-mode
- object-fit
- repeating-linear-gradient()
- writing-mode
- zoom
html2canvas不会解决您的浏览器设置的内容政策限制。绘制位于当前页面原点之外的图像会污染它们所绘制的画布。如果画布受到污染,则无法再读取。如果要加载位于页面原点之外的图像,可以使用代理加载图像。
为什么不渲染我的图像?
html2canvas不会解决您的浏览器设置的内容政策限制。绘制位于当前页面原点之外的图像会污染它们所绘制的画布。如果画布受到污染,则无法再读取。因此,html2canvas实现了一些方法来检查图像在应用之前是否会污染画布。如果您将allowTaint
选项设置为false
,则不会绘制图像。
如果要加载位于页面原点之外的图像,可以使用代理加载图像。
为什么生产的截屏是空的或者是切断了一半?
await html2canvas(element, {
windowWidth: element.scrollWidth,
windowHeight: element.scrollHeight
})
Chrome
Maximum height/width: 32,767 pixels Maximum area: 268,435,456 pixels (e.g., 16,384 x 16,384)
Firefox
Maximum height/width: 32,767 pixels Maximum area: 472,907,776 pixels (e.g., 22,528 x 20,992)
Internet Explorer
Maximum height/width: 8,192 pixels Maximum area: N/A
iOS
The maximum size for a canvas element is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM
为什么CSS属性X没有正确呈现或仅部分呈现?
由于每个CSS属性都需要手动编码才能正确呈现,因此html2canvas 永远不会有完整的CSS支持。该库试图在可能的范围内支持最常用的CSS属性。如果某些CSS属性缺失或不完整,并且您认为它应该是库的一部分,请为其创建测试用例并为其创建新问题。
如何让html2canvas在浏览器扩展中工作?
您不应在浏览器扩展中使用html2canvas。大多数浏览器都支持从扩展中的选项卡捕获屏幕截图。Chrome和 Firefox的相关信息。
对html2canvas的研究的更多相关文章
- 使用html2canvas实现浏览器截图
最近做项目为了解决全局异常信息记录,研究了一下浏览器全屏截图功能,方便用户发现异常时能够快速截图发给管理员.最终记录的异常信息如下,上面的[截图报告管理员]就是使用html2canvas前端插件实现的 ...
- 使用html2canvas实现网页截图并嵌入到PDF
以前我们只能通过截图工具进行截取图像.这使得在业务生产中,变得越来越不方便.目前的浏览器功能越来越强大,H5也逐渐普及,浏览器也可以实现截图了.这里来聊下之前在工作中用到的html2canvas.这里 ...
- 网页转图片--- html2canvas截图
最近有个做在线名片(可保存图片至本地)的任务,特意研究了一下图片生成,也踩了几个坑.特此总结一下,顺便分享一下demo: 链接:https://pan.baidu.com/s/1o98UBJO 密码: ...
- JS 使用html2canvas实现截图功能的问题记录和解决方案
在实现“截图”功能时,遇到几个bug,研究了一个上午,终于全部解决了: 下面给大家分享下: 1."图片资源跨域",导致无法截图. 浏览器会提示下面的错误 DOMException: ...
- html2canvas - 项目中遇到的那些坑点汇总(更新中...)
截图模糊 原理就是讲canvas画布的width和height放大两倍. 后来学习canvas的时候,才了解到这种写法不同于css的宽高设置, 因为css里的只是展示画布显示的大小,不像这样是c ...
- 使用html2canvas实现网页截图,并嵌入到PDF
使用html2canvas实现网页截图并嵌入到PDF 以前我们只能通过截图工具进行截取图像.这使得在业务生产中,变得越来越不方便.目前的浏览器功能越来越强大,H5也逐渐普及,浏览器也可以实现截图了.这 ...
- 玩转html2canvas以及常见问题解决
前端小伙伴经常会遇到页面截图或者把网页中指定的区域(某个大div)的内容转换成png的图片.这个时候常常会用到html2canvas库来实现,js真的很强大. 我最近也遇到了一个需求,需要把输入的文本 ...
- 闲来无聊,研究一下Web服务器 的源程序
web服务器是如何工作的 1989年的夏天,蒂姆.博纳斯-李开发了世界上第一个web服务器和web客户机.这个浏览器程序是一个简单的电话号码查询软件.最初的web服务器程序就是一个利用浏览器和web服 ...
- SQLSERVER聚集索引与非聚集索引的再次研究(上)
SQLSERVER聚集索引与非聚集索引的再次研究(上) 上篇主要说聚集索引 下篇的地址:SQLSERVER聚集索引与非聚集索引的再次研究(下) 由于本人还是SQLSERVER菜鸟一枚,加上一些实验的逻 ...
随机推荐
- Tutorial : Implementing Django Formsets
A step-by-step tutorial for setting up and testing a standard Django formset. I’ve noticed on #djang ...
- 配置java开发环境,存在多个版本JDK时,怎样让所需版本生效
我本地有个1.7.0的java版本,后来我新装了一个13的版本,但是命令行查java版本的时候,生效的还是1.7.0的版本,经过资料查询以及自身亲测,现将过程记录如下: 1.电脑右键选择--属性--高 ...
- Mybatis 1.原理流程图
仅用来做个人笔记记录. 总流程: 根据配置文件(全局配置文件和sql映射文件)初始化configuration对象. 创建一个defaultSqlSession对象,包含Configuration及E ...
- 洛谷 P3857 彩灯 题解
题面 对于每一个开关,我们可以看成一个0/1串,初始是一个全部为0的串,要求经过这些开关的操作后,出现的不同的0/1串的个数 建模就是存在一些数,这些数异或起来是0(等价于没有操作).那么需要求一个集 ...
- MLS(移动最小二乘)
https://blog.csdn.net/weixin_41484240/article/details/81204113 https://blog.csdn.net/baidu_38127162/ ...
- 在Vue项目中加载krpano全景图
在Vue-cli项目中做krpano全景图编辑器的时候,由于js插件的路径是动态的,做的过程中遇到了加载不到资源的难题,在网上搜索了好久也没找到合适的办法,最后想到了可能是JS加载的问题,于是解决了问 ...
- Linux的环境变量.bash_profile .bashrc profile文件
Shell变量有局部变量.环境变量之分.局部变量就是指在某个Shell中生效的变量,只在此次登录中有效.环境变量通常又称“全局变量”,虽然在Shell中变量默认就是全局的,但是为了让子Shall继承当 ...
- cs244a-Introduction to Computer Networking-Unit2
Unit2: Transport 学习目标: how TCP set up a connection what TCP segment looks like how can TCP be in hig ...
- Redis安装遇到的坑 stdlib.h: No such file or directory
我使用的是ubuntu,本来这几天失业,心情不是很好,准备复习一下新的知识,可是自己在安装redis的过程中遇到了很多的问题. 或许自己很菜. 废话不多说,说一下我遇到的一个大坑. root@ufiv ...
- Jade学习(四)之结合node如何编译执行
1.首先安装node 2.新建一个文件夹并进入该文件夹 3.安装jade 4.在新建的文件夹下新建js文件,写nodejs代码 5.在vscode中利用插件code runner直接执行js文件,输出 ...