在 Canvas/WebGL 中渲染 HTML

Posted 2023-03-05

【中文标题】在 Canvas/WebGL 中渲染 HTML

【英文标题】：Render HTML in Canvas/WebGL

【发布时间】：2011-09-14 04:34:21

【问题描述】：

是否可以在 Canvas 或 WebGL 中呈现 html 元素？ （类似于如何在 WebGL 中绘制视频元素纹理）

【参考方案1】：

不，目前不可能，还没有。 但正如a video from 3rd WebGL Camp (at about 6:44) 中指出的那样，计划包含此功能。

【讨论】：

我不相信有任何具体的计划将渲染 HTML 暴露给画布或纹理，除了特权 JS（即：扩展），因为这将是一个很大的安全问题

正如视频中所说的（来自谷歌的人），有（或者是，8 个月前）计划。我没有关注这个帖子，因为我目前需要的一切都已经在那里了。

我坐在那个人旁边 ;-) 据我所知，没有计划推出该扩展程序的非特权版本

【参考方案2】：

有一个尝试可以完成 80% 附近的工作。无法呈现下拉列表、按钮等，但页面中的大部分项目都已呈现。

从这里查看并下载。

http://html2canvas.hertzen.com/

还有

http://hertzen.com/experiments/jsfeedback/

【参考方案3】：

您还应该查看http://robert.ocallahan.org/2011/11/drawing-dom-content-to-canvas.html

它可能会在 Chrome 中引发安全错误，但在 Firefox 中可以正常工作。

【参考方案4】：

使用这个库https://github.com/PixelsCommander/HTML-GL就像用<html-gl>标签包装你的内容一样简单。

【参考方案5】：

我只是想补充一下原因。

这与脏画布和 WebGL 发布后不久修复的计时攻击问题相同

使用 canvas 2d，您可以使用 ctx.drawImage(someImage, ...) 将图像绘制到画布中；问题来自跨域图像。通常 javascript 无法读取图像内的像素。它可以读取画布内的像素。因此，要从图像中获取像素，您首先将图像绘制到画布上，然后从画布中读取像素ctx.getImageData(...)

这是跨域图像（来自页面域以外的域的图像）的安全问题。

canvas 2d 的解决方案是在您将跨域图像绘制到内部标记为 dirty 的 2d 画布中的那一刻，ctx.getImageData 和 canvas.toDataURL 都会引发安全错误。

最初的 WebGL 遵循相同的规则。如果您使用跨域图像或脏画布调用 gl.texImageXXX，则 webgl 画布将被标记为 dirty 并且 gl.readPixels 以及 canvas.toDataURL 将不起作用。

聪明的人指出，在 WebGL 的情况下，这还不够，因为即使你不能调用 gl.readPixels，你也可以根据它正在访问的纹理的颜色设计一个需要更多时间的着色器。使用它，您可以计算访问纹理像素并有效重构图像内容所需的时间。

解决方案是默认情况下 WebGL 不允许跨源图像。相反，您必须向其他服务器请求 CORS（跨源资源共享）权限。只有授予权限，WebGL 才能使用该图像。

好吧，毕竟希望您能明白为什么不能将 HTML 渲染到 WebGL 中。如果您可以将 HTML 渲染为画布，那么您可以使用上述技术来读取该 HTML 的内容，包括嵌入式 iframe 等、脏画布、来自其他域的图像等...

【讨论】：

而且我仍然不明白为什么跨源图像一开始就是一个安全问题，这是怎么回事？这些问题有多严重？如果有人偶然发现任何其他“创造性的变通方法”，他们应该怎么做？

也许这个问答？ security.stackexchange.com/questions/8264/…

不抱歉，我没有看到任何连接。他们提出了一些荒谬的说法，即访问其他选项卡显然真的很容易，我认为这真的很难。并且还荒谬地声称...如果我理解正确...即使您拥有 img 的 URL，您也应该只能将其显示给用户，但如果它来自另一个域而没有CORS。它是否正确？如果我能对此有所了解，我们都会死于一场可怕的信息安全噩梦吗？

也许你应该用谷歌搜索或自己问这个问题，而不是在 cmets 中做？这是另一个：***.com/questions/35020259/…