如何从 IMG 元素中获取图像内容（不是 url）？答案

【问题标题】：How to get image content (not url) from IMG element?如何从 IMG 元素中获取图像内容（不是 url）？
【发布时间】：2011-10-24 12:49:39
【问题描述】：

我们正在使用 Eclipse SWT WebBrowser 控件来为我们的 Java 应用程序呈现 HTML 页面。如果页面包含图片，我们要获取图片内容。我们可以访问 DOM 来获取 IMG 元素，但是除了使用图像 URL 重新获取图像之外，似乎没有其他方法可以获取实际内容（即图像的字节数）。（我们可以通过 'src' 属性获取图像 URL。）有什么方法可以从 DOM 中获取图像的实际字节数？

【问题讨论】：

你可以试试browser.evaluate(..)方法，见Snippet query DOM node value (SWT 3.5 and greater)，不过只是猜测；]..
是的，我们已经使用 browser.evaluate(..) 进行 DOM 查询和操作。但是，问题是我们需要发送哪些 Javascipt/DOM 方法来评估以获取图像内容？
我想这可能已经有了答案：[Get image data in Javascript?][1] [1]: stackoverflow.com/questions/934012/get-image-data-in-javascript
我相信 ghirschorn 想要 Java 中的字节，而不是 javascript。所以它不是重复的。
有可用的书面代码吗？请附上您的问题。

标签： javascript dom browser swt image

【解决方案1】：

我不确定这是否是您要查找的内容，但基本上您可以为图像源创建一个类型化的 XHR（例如 ArrayBuffer）（它应该被缓存，所以这样做没有真正的影响）。我假设您使用的是兼容 HTML5 的浏览器（或支持 ArrayBuffer 或您需要的类型的浏览器）。我假设该文档至少有一个具有正确来源的图像，请参阅 Fiddle 的工作演示。

var img = document.querySelector('img'), xhr = new XMLHttpRequest();
xhr.open('GET', img.src, true);
xhr.responseType = 'arraybuffer';
xhr.addEventListener('load', handleBuffer, false);
xhr.send();
// Your image data ArrayBuffer, feel free to change the type.
function handleBuffer (data) {
   var arryBuffer = data.target.response;
}

Sample Fiddle

【讨论】：

PS：然后您可以使用相同的“responseType”通过另一个 XHR 将 arrayBuffer 发送到您的后端。 Java 应该可以毫无问题地处理接收类型化的数据。

【解决方案2】：

查看https://developer.mozilla.org/en-US/docs/Web/API/FileReader，它将让您创建 base64 数据 url，根据您的浏览器版本，可能无法正常工作。

【讨论】：