是否可以在不实际渲染画布的情况下创建画布来提取图像数据？

Posted 2023-03-05

【中文标题】是否可以在不实际渲染画布的情况下创建画布来提取图像数据？

【英文标题】：Is it possible to create a canvas to extract image data without actually rendering the canvas?

【发布时间】：2016-08-25 04:56:43

【问题描述】：

所以，我在 Angular 中有一个应用程序，它使用 Chart.js 在应用程序的某些视图中生成一些动态图表。 该应用程序还可以通过 PDFMake javascript 库将部分数据导出为 PDF 格式，该库相当基本，但允许将基本文本和图像输出到 PDF 文件。

问题是 - 我是否可以在我生成将由 PDFMake 库解析的数据的工厂内动态地执行以下操作：

创建一个 Canvas 元素而不渲染它， 为画布分配一个 Chart.js 图表（我知道怎么做），最重要的是： 从画布中导出图像数据，这样我就可以将图像数据转发到 PDFMake，而无需向最终用户显示画布。它必须在后台、代码内部进行。

可以在不绘制画布元素甚至将其添加到 DOM 的情况下将画布数据提取为图像吗？

【问题讨论】：

您始终可以将画布放在主要内容容器的后面，或者简单地使用带有大负位置的绝对定位。当然它会渲染，但对用户不可见。

但是有什么方法可以不在页面上的任何地方放置画布，而只在内存中进行渲染/绘图？我问是因为可能会影响性能，可能会添加和删除数百个画布。

您确定您甚至需要将画布附加到 DOM 以使其将内容呈现到自己的内存中吗？我认为您不需要将其放入 DOM 中。

除了将画布添加到 DOM 并获取图像数据之外，我不知道还有其他方法可以做到这一点，这就是我问这个问题的原因。

【参考方案1】：

我做了一个快速测试，但 ChartJS 似乎不接受使用 document.createElement('canvas') 创建的内存中画布，因此您也可以将画布移出屏幕使其不可见。

【讨论】：

实际上它确实接受它，但似乎chartjs使用computedStyles来设置图表，我没有找到任何宽度或高度参数，所以你只会得到一个0*最后是 0 画布。一个更简单的解决方法 IMO 是在调用 Chart 构造函数之前附加画布并在之后直接将其删除：jsfiddle.net/t25j7xve

@Kaiido。是的，这就是我的测试显示的结果——与在 dom 中找不到 canvas 元素有关的内部 ChartJS 错误。

啊，我用的是verison 1.0.2，没有抛出这样的错误。 v2 确实如此。

我放弃了这样做并切换到服务器端生成的图像，因为我在 PDF 导出中需要它们。很抱歉我没有看到这个答案。无论如何，这种方法会过于复杂，因为所有东西中间都有angular-chart 库，所以根本不值得:) 另外，我切换到 v2，所以我想它不会工作。