JavaScript:在没有画布的情况下获取 ImageData

JavaScript: getting ImageData without canvas

本文关键字：情况下 获取 ImageData JavaScript      更新时间：2023-09-26

是否可以从不在画布上而是在 DOM 树中的其他地方的图像中获取ImageData对象作为正常<img>？

如果是，如何？

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

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://）

正如已经暗示的那样，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 数组提供可能会更容易。

如果您使用的是 Web Worker，则可以使用 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

相关文章：