翻译自:html2canvas:faq

Explore Frequently Asked Questions regarding html2canvas
探索有关 html2canvas 的常见问题


为什么我的图像没有渲染?

html2canvas does not get around content policy restrictions set by your browser. Drawing images that reside outside of the origin of the current page taint the canvas that they are drawn upon. If the canvas gets tainted, it cannot be read anymore.
As such, html2canvas implements methods to check whether an image would taint the canvas before applying it. If you have set the allowTaint option to false, it will not draw the image.
If you wish to load images that reside outside of your pages origin, you can use a proxy to load the images.
Html2canvas无法绕过浏览器设置的内容策略限制(同源策略)。绘制跟当前站点不同源的图像时会污染在其上绘制的画布。如果画布被污染了就不能再阅读了(导致截图失败)。
因此,html2canvas内部实现了方法,该方法会在应用图像之前检查是否会污染画布。如果你设置了allowTaint参数为false,它将不会绘制该图像。
如果您希望加载不同源的图像,可以使用代理来加载图像。

为什么生成的画布是空的或中途切断?

Make sure that canvas element doesn’t hit browser limitations for the canvas size or use the window configuration options to set a custom window size based on the canvas element:
确保canvas元素没有达到浏览器对画布大小的限制,或者使用窗口配置选项来设置一个基于canvas元素的自定义窗口大小:

  1. await html2canvas(element, {
  2. windowWidth: element.scrollWidth,
  3. windowHeight: element.scrollHeight
  4. });

The window limitations vary by browser, operating system and system hardware.
窗口限制因浏览器、操作系统和系统硬件而异。

谷歌

Maximum height/width: 32,767 pixels Maximum area: 268,435,456 pixels (e.g., 16,384 x 16,384)

火狐

Maximum height/width: 32,767 pixels Maximum area: 472,907,776 pixels (e.g., 22,528 x 20,992)

IE浏览器

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 canvas元素的最大尺寸对于小于256mb RAM的设备为300万像素,对于大于或等于256mb RAM的设备为500万像素

为什么 CSS 属性 X 不能正确呈现或仅部分呈现?

As each CSS property needs to be manually coded to render correctly, html2canvas will never have full CSS support. The library tries to support the most commonly used CSS properties to the extent that it can. If some CSS property is missing or incomplete and you feel that it should be part of the library, create test cases for it and a new issue for it.
由于每个CSS属性都需要手工编码才能正确呈现,html2canvas永远不会有完整的CSS支持。库尽量支持最常用的CSS属性。如果某些CSS属性缺失或不完整,并且您觉得它应该成为库的一部分,那么为它创建测试用例并为它创建一个新issue

如何让 html2canvas 在浏览器扩展中工作?

You shouldn’t use html2canvas in a browser extension. Most browsers have native support for capturing screenshots from tabs within extensions. Relevant information for Chrome and Firefox).
你不应该在浏览器扩展插件中使用html2canvas,大多数的浏览器都自带截屏支持,不需要用扩展。相关信息可以参考ChromeFirefox)各自的文档。