Javascript 在 Canvas/WebGL 中渲染 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6335383/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Render HTML in Canvas/WebGL
提问by Derek
Is it possible to render HTML elements in Canvas or WebGL? (similar to how one can draw a video element texture in WebGL)
是否可以在 Canvas 或 WebGL 中呈现 HTML 元素？（类似于如何在 WebGL 中绘制视频元素纹理）
回答by Aristos
There is an attempt that can do the work near 80%. Fail to render dropdownlist, buttons and some more, but mostly items from the page are rendered.
有一种尝试可以完成接近 80% 的工作。无法呈现下拉列表、按钮等，但页面中的大部分项目都已呈现。
See and download it from here.
从这里查看并下载它。
http://html2canvas.hertzen.com/
http://html2canvas.hertzen.com/
also
还
回答by Sujay
You should also check out http://robert.ocallahan.org/2011/11/drawing-dom-content-to-canvas.html
您还应该查看http://robert.ocallahan.org/2011/11/drawing-dom-content-to-canvas.html
It might throw a security error in Chrome but works fine in Firefox.
它可能会在 Chrome 中引发安全错误，但在 Firefox 中运行良好。
回答by Artur Czajka
No, it's currently not possible, not yet. But it is planned to include this functionality as pointed out in a video from 3rd WebGL Camp (at about 6:44).
不，目前不可能，还没有。但是，正如第三届 WebGL Camp（大约 6:44）的视频中指出的那样，计划包含此功能。
回答by gman
I just thought I'd add why.
我只是想我会加上为什么。
This is the same issue as dirty canvases and the timing attack that was fixed soon after WebGL shipped
这与脏画布和 WebGL 发布后不久修复的时间攻击是相同的问题
With canvas 2d you can draw images into the canvas with ctx.drawImage(someImage, ...); The problem comes from cross domain images. Normally JavaScript can not read the pixels inside an image. It can read the pixels inside a canvas. So, to get the pixels from an image you first draw the image to the canvas then read the pixels from the canvas ctx.getImageData(...)
使用 canvas 2d，您可以将图像绘制到画布中ctx.drawImage(someImage, ...)；问题来自跨域图像。通常 JavaScript 无法读取图像内的像素。它可以读取画布内的像素。因此，要从图像中获取像素，您首先将图像绘制到画布上，然后从画布中读取像素ctx.getImageData(...)
This is a security problem for cross domain images (images from domains other than the domain of the page).
这是跨域图像（来自页面域以外的域的图像）的安全问题。
The solution for canvas 2d is the moment you draw a cross domain image into a 2d canvas that canvas is internally marked as dirtyand both ctx.getImageDataand canvas.toDataURLwill throw a security error.
画布2D解决方案是你画的那一刻跨域图像成2D画布画布内部标记为脏两者ctx.getImageData并canvas.toDataURL会抛出一个安全错误。
Originally WebGL followed the same rule. If you called gl.texImageXXXwith a cross domain image or a dirty canvas the webgl canvas would be marked as dirtyand gl.readPixelsas well as canvas.toDataURLwould not work.
最初 WebGL 遵循相同的规则。如果你叫gl.texImageXXX一个跨域图像或肮脏的画布的WebGL画布会被标记为脏和gl.readPixels以及canvas.toDataURL是行不通的。
Smart people pointed out that in the case of WebGL this was not enough because even if you couldn't call gl.readPixelsyou could design a shader that takes more time based on the colors of the textures it's accessing. Using that you could time how long it takes to access the pixels of a texture and effectively reconstitute the contents of the image.
聪明的人指出，在 WebGL 的情况下，这还不够，因为即使您无法调用，gl.readPixels您也可以设计一个着色器，该着色器会根据它访问的纹理的颜色花费更多时间。使用它，您可以计算访问纹理像素并有效重建图像内容所需的时间。
The solution was that WebGL doesn't allow cross origin images by default. Instead, you have to request CORS (cross origin resource sharing) permission from the other server. Only if it grants permission can WebGL use the image.
解决方案是 WebGL 默认不允许跨源图像。相反，您必须向其他服务器请求 CORS（跨源资源共享）权限。只有授予权限，WebGL 才能使用该图像。
Okay, after all that hopefully you can see why you can't render HTML into WebGL. If you could render HTML a canvas then you could use the above techniques to read the contents of that HTML including embedded iframes etc, dirty canvases, images from other domains, etc...
好的，毕竟希望你能明白为什么你不能将 HTML 呈现到 WebGL 中。如果您可以将 HTML 渲染为画布，那么您可以使用上述技术来读取该 HTML 的内容，包括嵌入的 iframe 等、脏画布、来自其他域的图像等...
回答by PixelCommander
Use this library https://github.com/PixelsCommander/HTML-GLit is as easy as wrap your content with <html-gl>tag.
使用这个库https://github.com/PixelsCommander/HTML-GL就像用<html-gl>标签包装你的内容一样简单。
