是否有可能(通过标准 JS 或某些浏览器扩展)获取 DOM 元素的图像数据？
我在想这样的用法:
- 创建一个屏幕外 DOM 元素
- 动态填充一些 CSS 样式的内容
- 获取其图像数据
- 以某种方式使用图像数据:
- 作为背景(装饰性重复文字)
- 作为子弹图像(unicode 子弹)
- 作为 WebGL 纹理(神奇!)
- ...
这能做到吗？有过这样的提案吗？
最佳答案
我能想到的唯一方法是将元素呈现为 HTML5 canvas 对象。这至少很难说。我通过快速谷歌搜索找到的一个这样的渲染引擎可以在以下位置找到:http://www.isogenicengine.com/2011/08/19/rendering-html-css-to-canvas/
其他显然存在，包括:
绘制到 Canvas 后，您可以检索数据 url，该 url 可用于设置图像和 css 的 src 属性，最有可能使用以下方法设置 WebGL 纹理。
var canvas = document.getElementById("mycanvas");
var img = canvas.toDataURL("image/png");
此外，如果您专门针对 Firefox，它们具有专有功能，可以完全满足您的需求。 https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas
关于javascript - 获取 DOM 元素的图像数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10145676/