获取 DOM 元素的图像数据 [英] Get image data of a DOM element

问题描述

是否可以(通过标准 JS 或某些浏览器扩展)获取 DOM 元素的图像数据?

Is it possible (by standard JS or some browser extensions) to get the image data of a DOM element?

我正在考虑这样的用法:

I'm thinking of usage like:

• 创建一个离屏 DOM 元素
• 用一些 CSS 样式的内容动态填充它
• 获取其图像数据
• 以某种方式使用图像数据:
  • 作为背景(装饰性重复文字)
  • 作为项目符号图像(Unicode 项目符号)
  • 作为 WebGL 纹理(神奇！)
  • ...

  能做到吗?有没有类似的提议?

  Can this be done? Was there ever a proposal for something like this?

  推荐答案

  我能想到的唯一方法是将元素渲染到 HTML5 画布对象.这至少很难说.我通过谷歌快速搜索找到了一个这样的渲染引擎:http://www.isogenicengine.com/2011/08/19/rendering-html-css-to-canvas/

  The only method I can think of would be rendering the elements to a HTML5 canvas object. Which is difficult to say the least. One such rendering engine I found with a quick google search can be found at: http://www.isogenicengine.com/2011/08/19/rendering-html-css-to-canvas/

  其他显然存在，包括:

  • http://html2canvas.hertzen.com/
  • http://ajaxian.com/archives/crazy-times-渲染-html-in-canvas

  一旦绘制到画布上，您就可以检索一个数据 url，该数据 url 可用于设置图像和 css 的 src 属性，并且很可能使用以下方法设置 WebGL 纹理.

  Once drawn to the canvas, you can retrieve a data url which can be used to set the src attribute of images and css, and most likely WebGL Textures with the following method.

  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

  Also, if you are targeting Firefox specifically they have a proprietary feature which does exactly what you want. https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas

  这篇关于获取 DOM 元素的图像数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！