对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); });
所有可用的配置选项:
NameDefaultDescription
allowTaintfalseWhether to allow cross-origin images to taint the canvas
backgroundColor#ffffffCanvas background color, if none is specified in DOM. Set null for transparent
canvasnullExisting canvas element to use as a base for drawing on
foreignObjectRenderingfalseWhether to use ForeignObject rendering if the browser supports it
imageTimeout15000Timeout for loading an image (in milliseconds). Set to 0 to disable timeout.
ignoreElements(element) => falsePredicate function which removes the matching elements from the render.
loggingtrueEnable logging for debug purposes
onclonenullCallback 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.
proxynullUrl to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.
removeContainertrueWhether to cleanup the cloned DOM elements html2canvas creates temporarily
scalewindow.devicePixelRatioThe scale to use for rendering. Defaults to the browsers device pixel ratio.
useCORSfalseWhether to attempt to load images from a server using CORS
widthElement widthThe width of the canvas
heightElement heightThe height of the canvas
xElement x-offsetCrop canvas x-coordinate
yElement y-offsetCrop canvas y-coordinate
scrollXElement scrollXThe x-scroll position to used when rendering element, (for example if the Element uses position: fixed)
scrollYElement scrollYThe y-scroll position to used when rendering element, (for example if the Element uses position: fixed)
windowWidthWindow.innerWidthWindow width to use when rendering Element, which may affect things like Media queries
windowHeightWindow.innerHeightWindow 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
  • 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247229.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[Vue warn]: You are using the runtime-only build of Vue 牵扯到Vue runtime-compiler与runtime-only区别

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 1. Vue的编译渲染过程 template --> ast --> render函数 -…

亲历2013年TED大会:全球最潮灵感大会

本文转自:http://mooc.guokr.com/opinion/436837/ 本文由《外滩画报》供稿 文/华琪(发自美国) 编辑/吴慧雯 什么是TED的世界?在这里,你可以轻易发现各种名人出没的痕迹,和各个领域里最具远见卓识和创造…

Java生鲜电商平台-电商会员体系系统的架构设计与源码解析

Java生鲜电商平台-电商会员体系系统的架构设计与源码解析 说明:Java生鲜电商平台中会员体系作为电商平台的基础设施,重要性不容忽视。我去年整理过生鲜电商中的会员系统,但是比较粗,现在做一个最好的整理架构. 设计电商会员体系需…

为什么要上大学?

为了让自己成为更有意思的人。 (文/美国圣母大学哲学教授 Gary Gutting)再不久,千千万万的大学生又将走完一个学期。他们中的很多人以及他们的家人,可能为刚刚过去的几个月或是几年投入了相当可观的时间、努力以及金钱…

React AntD 表格查看修改时默认选中几行数据

hook定义selectedRowKeys const [selectedRowKeys, setSelectedRowKeys] useState([]); const [selectedRowsState, setSelectedRows] useState([]); 初始化时利用setSelectedRowKeys给selectedRowKeys塞值,时行数据的rowKey的数组。 设置table属性rowSelection <Table…

python面向对象三大特性、类的约束、print带颜色输出及super补充

面向对象三大特性、类的约束、print带颜色输出及super补充 简述&#xff1a; python面向对象的三大特性&#xff1a; 1.继承是一种创建新类的方式&#xff0c;在python中&#xff0c;新建的类可以继承一个或多个父类&#xff0c;父类又可称为基类或超类&#xff0c;新建的类称为…

dayjs也可回显AntD DatePicker的值

遇到的问题&#xff1a;react 使用AntD 表单里有多个RangePicker,查看修改时要回显值。 antd的DatePicker需要的是moment对象。但是项目里引的是dayjs库 解决方式&#xff1a; 方式一:直接多引moment.js库&#xff0c;字符串转moment对象 moment(2022-02) 方式二:不甘心引两…

打造“神犇”是教育的未来吗?

这年头&#xff0c;品学兼优、身怀特长的“神犇”&#xff0c;拼的不仅是天赋异禀和后天努力&#xff0c;更是身后爹妈的钱包&#xff0c;而本该实现社会公平的教育&#xff0c;反而加速和凝固了社会的不公。 高等教育的终极目标真的是造就学业超人吗&#xff1f;《纽约时报》刊…

洛谷 P3243 【[HNOI2015]菜肴制作】

第一眼看到这题&#xff0c;顿时懵逼&#xff0c;一个 \(SB\) 拓扑序竟然是黑题&#xff0c;当场笑喷。 \(Of\) \(course\)&#xff0c;这题我是用堆做的。&#xff08;其实是优先队列&#xff0c;手写堆这么垃圾我怎么可能会用呢&#xff09; \((1)\) 首先建图。如果 \(x\) 需…

AntD 官网样例 InputRef报错原因

在官网可编辑表格typescript样例里 const inputRef useRef<InputRef>(null); InputRef项目报错原因是ant design的版本问题! antd 4.19版本重写了input 可通过InputRef来使用input组件的ref

电路原理图检查的十大步骤详解

最近一直在做嵌入式系统&#xff0c;画原理图。最后&#xff0c;为了保证原理图准确无误&#xff0c;检查原理图花费我近两周的时间&#xff0c;在此&#xff0c;把我在检查原理图方面的心得体会总结在此&#xff0c;供大家参考&#xff0c;说得不对的地方欢迎大家指出。 往往我…

亚伦•斯沃茨:怎样有效利用时间

编者按&#xff1a;今天是著名黑客亚伦•斯沃茨&#xff08;Aaron Swartz&#xff09;头七的日子。斯沃茨14岁就参与创造RSS 1.0规格的制定&#xff0c;曾在斯坦福大学就读了一年&#xff0c;是社交新闻网站Reddit的三位创始人之一……斯沃茨自杀时才年仅26岁。这26岁的短暂生命…

AntD 可编辑行表格

本地数据代码模板自用,官网例子改改 // 编辑行的自定义表格 import React, { useState } from "react"; import {Table,Input,InputNumber,Popconfirm,Form,Typography,Divider, } from "antd";interface Item {key: string;name: string;age: number;add…

SharePoint 2013 - System Features

1. Embed Information & Convert to PDF 功能&#xff0c;在文档的preview界面&#xff08;hover panel&#xff09;; 2. Share功能可以选择是否发送邮件 -- Done 4. Shredded Storage, 将文档的内容和每次的更改分开存储&#xff0c;每次只存储更改的内容&#xff0c;而不…

三心二意,助你好运?

经验说&#xff1a;做事要专心致志。 实验说&#xff1a;专心致志常常让人缺少一双发现的眼睛。 专心致志从来都被当做一个美德来歌颂。从来我们就认为要想成为伟大的人就必须要像牛顿老师那样把钟当成吃的放到锅里煮才行&#xff0c;至少至少也得有能在集市上看书的本事。否则…

React Antd Upload自定义上传customRequest

单独的上传图片接口要传参,action方式不太适合,需要使用自定义上传customRequest覆盖 公司代码不可弄,就发一个可用的demo例子 import React, { useState } from "react"; import { render } from "react-dom"; import "antd/dist/antd.css"; i…

HDU 4109 Instrction Arrangement

题目链接&#xff1a;https://vjudge.net/problem/HDU-4109 题目大意 有 N 个指令&#xff0c;标号从 0 ~ N - 1&#xff0c;和 M 个指令间的先后关系&#xff0c;每个关系都有一个权值 w&#xff0c;表示后一个指令在前一个指令开始时间之后 w 纳秒才开始执行。现在要并发执行…

养成一个习惯需要多久?

有人说养成一个习惯需要21天&#xff0c;有人说30天……养成习惯到底需要多少天&#xff1f; _hzw 2012-11-09 18:04又快到年末了。 年初时&#xff0c;你曾许诺要养成一些好习惯&#xff0c;比如要常运动、多读书、少微博。有人说说养成一个习惯只需要坚持21天&#xff1b;21天…

vue3 eslint The template root requires exactly one element问题

vue项目中手动引入eslint npm install eslint --save-dev eslint初始化 npx eslint --init 运行时npm run lint 简单语法问题--fix会自动修复 但是vue3项目出现只能有一个根节点的问题 原因在于 eslintrc.js里extends中plugin:vue/essential的问题 看eslint-plugin-vue官网…

你所知道的学习方法,都是错的!

你所知道的学习方法&#xff0c;都是错的&#xff01; 上课的时候记笔记&#xff1f;哪门功课不行&#xff0c;就集中精力专项突击&#xff1f;自习的时候不要晃&#xff0c;选好一个地儿安安稳稳地待那儿学习&#xff1f;你还在这样学习吗&#xff1f;不要被骗了&#xff1a;这…