JavaScript：在没有画布的情况下获取 ImageData答案

【问题标题】：JavaScript: getting ImageData without canvasJavaScript：在没有画布的情况下获取 ImageData
【发布时间】：2012-06-01 01:12:59
【问题描述】：

是否可以像普通的<img> 一样从不在画布上而是在 DOM 树中的其他位置的图像中获取 ImageData 对象？

如果是，怎么做？

【问题讨论】：

另见：Get image data url in JavaScript?

标签： javascript html canvas

【解决方案1】：

您必须在内存中创建一个画布，然后在此画布上绘制图像：

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = document.getElementById('myimg');
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0 );
var myData = context.getImageData(0, 0, img.width, img.height);

但如果图像来自另一个域，这将不起作用。如果您无法控制服务器，这是您无法绕过的安全限制（请注意，如果您使用 file:// 打开 html 文件，您将有很多额外的限制，请使用 http://）

【讨论】：

还有一点需要注意：由于色彩空间校正，使用 drawImage 渲染的像素值可能与图像中的值不同。好在只有图像包含色彩空间信息时才会发生这种情况。
@ironic 是的，我遇到了这个问题，值得注意的是，调试起来非常痛苦。
标题明确表示“没有画布”，无论画布是否存在于 DOM 树上。这就是为什么我给这个答案-1。
@ozanmuyes 我的回答很有帮助，解决了真正的问题。你也应该尝试提供帮助。
您可能应该使用img.naturalWidth 和img.naturalHeight 来获取源数据的尺寸，而不是渲染的DOM 元素的尺寸。

【解决方案2】：

正如已经暗示的那样，canvas 提供了创建 ImageData 对象的唯一解决方案。

如果你真的反对使用 canvas 元素来加载图像数据（也许我们正在谈论 lte IE8），你总是可以考虑使用图像对象的 src 位置来解析 base64 图像数据

http://blog.calyptus.eu/seb/2009/05/png-parser-in-javascript/

这很困难，但如果必须，可以通过这种方式将图像解析为数组。

https://github.com/devongovett/png.js/blob/master/png.js

这将向您展示如何使用 xhr 请求加载数据并解析 png 数据。在内部，它使用画布做其他事情，但您感兴趣的子集是无画布的。对于您感兴趣的每种图像格式，您都需要遵循类似的实现。

我应该提到，图像像素读取限制在安全性方面是相同的。无论有没有画布，您将永远无法读取来自第三方的像素。 XMLHTTPRequest 将绑定到跨域策略的治理。这可以防止脚本窃取第三方内容，其中包括可能包含敏感用户信息的图像。

如果您需要读取第三方域上的图像（不需要身份验证即可查看），您应该在您的域上运行一个图像代理服务器，它允许您请求同一域上的图像。如果您需要麻烦，首先将图像数据简单地提供为 json 数组可能会更容易。

【讨论】：

身份验证和浏览器嗅探是服务器无法加载 URL 的两大原因
精氨酸。遗憾的是，第一个链接已失效——帖子已加载，但实际的演示代码从未通过站点转换，网络存档也从未得到它。
@i336_看github仓库github.com/calyptus/labs/blob/master/JSBin/Demo/Viewer.html

【解决方案3】：

如果您使用的是网络工作者，您可以使用OffscreenCanvas 作为document.createElement('canvas') 的替代品

  var response = await fetch(imageUrl);
  var fileBlob = await response.blob();
  var bitmap = await createImageBitmap(fileBlob);
  var canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
  var context = canvas.getContext('2d');
  context.drawImage(bitmap, 0, 0);
  var myData = context.getImageData(0, 0, bitmap.width, bitmap.height);

请注意，对 OffscreenCanvas 的支持是有限的：https://caniuse.com/#feat=offscreencanvas

【讨论】：