对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不会解决您的浏览器设置的内容政策限制。绘制位于当前页面原点之外的图像会污染它们所绘制的画布。如果画布受到污染,则无法再读取。如果要加载位于页面原点之外的图像,可以使用代理加载图像。
- node.js
为什么不渲染我的图像?
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的相关信息。
转载于:https://www.cnblogs.com/zhouyideboke/p/11315289.html
对html2canvas的研究相关推荐
- html2canvas 截图div_浏览器端网页截图方案详解
简介 剖析流行的截图插件 html2canvas 的实现方案,探索其功能上的一些不足之处及不能正确截取的一些场景,比如不支持 CSS 的 box-shadow 截取情况等.探索一种新的实现方式,能够避 ...
- html2canvas图片坐标,html2canvas生成的图片偏移不完整的解决方法
情景一: 问题背景:生成的图片在一个弹窗里面,如果页面没有滚动条就是正常的,但是一旦出现滚动条并且页面发生滚动时html2canvas绘制成的图片就会偏移出对应滚动高度的白边,如下: 解决办法: 楼主 ...
- html2canvas实现网页局部存为图片和打印
1.html2canvas.js简介 html2canvas.js具体来说是一个脚本或者js插件, 该脚本允许您直接在用户浏览器上截取网页或部分网页的"内容截图".该脚本是基于DO ...
- html页面整体偏移了怎么办,html2canvas生成的图片偏移不完整的解决方法
情景一: 问题背景:生成的图片在一个弹窗里面,如果页面没有滚动条就是正常的,但是一旦出现滚动条并且页面发生滚动时html2canvas绘制成的图片就会偏移出对应滚动高度的白边,如下: 解决办法: 楼主 ...
- html2canvas图片的文字偏移,html2canvas在Vue项目踩坑-生成图片偏移不完整
背景 最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...
- 解决-使用html2canvas截取页面时,页面的div背景图无法截取并跨域
今天在研究html2canvas截取页面的时候,发现截取后的图片没有把应该截取元素的背景图片截掉,背景图片空白.此时谷歌浏览器控制台报Failed to load resource: net::ERR ...
- 前端使用html2canvas生成图片踩坑
前端使用html2canvas生成图片经验总结 前言 主要是总结一下html2canvas生成图片的基础用法,以及自己在使用html2canvas过程中踩过的坑和相应的解决思路 背景 近段时间接手一个 ...
- JS生成二维码以及保存页面为图片的解决方案:html2Canvas+file-saver+qrcodejs2的使用心得以及解决图片失真,保存不完整的解决办法
前言 最近因为工作需求,需要前端根据后端传过来的链接生成二维码,并且要使用JS保存页面为图片.然后网上搜了很多解决办法.最终都是用h5的canvas进行绘制然后保存为图片.其中,又以html2Canv ...
- 前端生成海报图片(html2canvas偏移坑)
好久没写博客了,今天必须立刻马上现在写一个,记录一下悲惨的两天进坑旅程! 业务需求: 大佬要求前端生成一个海报图片,用户在微信内长按图片可以进行分享,并且海报内要有分享二维码. 嗯?前端生成海报?图片 ...
最新文章
- 时间同步软件 windows_电脑便签设置事件时间提醒软件哪个好用
- 模型越大,真的越香吗?千亿参数之后是万亿,万亿之后呢?
- 无法启动MYSQL服务”1067 进程意外终止”解决的方法
- python post请求参数错误,爬虫POST请求Json格式不清楚报错原因
- JAVA——Windows双击jar包为可执行操作
- html、sqlserver、java基础总结
- 利用indent格式化源文件的脚本
- php依赖注入 简书,依赖注入
- 高等代数第3版下 [丘维声 著] 2015年版_全国硕士研究生入学统一考试管理类联考综合能力考试大纲(2021年版)...
- MacOS版/Windows桌面版微信多开双开教程技巧以及双开代码
- 电脑总是弹出广告弹窗怎么办?
- PCB多层板层的设置原则
- 每月一书(202104):《浪潮之巅》
- 稿定科技内推|稿定让设计更简单,只要你来,稿定就能给你无限可能
- VS Code快速实现Git PR操作
- React(Js)学习
- Atom的安装及使用
- 简易交通灯控制电路设计
- 链路聚合的定义、链路聚合的概念和基本术语、链路聚合的特点
- 基于unity的2D横版游戏开发日志 小结
热门文章
- mysql 51 bin_mysqldump和bin-log备份以及恢复示例
- mysql date类型计算_MySQL date类型
- 计算机网络期末复习提纲
- Python+Opencv实现无参数、全自动的Canny算法
- [深度学习] 自然语言处理---Transformer原理(一)
- [深度学习] PyTorch-BigGraph 使用
- 【Transformer】Augmented Shortcuts for Vision Transformers
- sagan 自注意力_请使用英语:自我注意生成对抗网络(SAGAN)
- 【Android 修炼手册】常用技术篇 -- Android 插件化解析
- new fabu