是否可以ImageData从不在画布上而是在 DOM 树中的其他位置正常的图像中获取对象<img>？
如果是，如何？
JavaScript：在没有画布的情况下获取 ImageData
IT技术
javascript
html
canvas
2021-02-21 12:39:16
3个回答
您必须在内存中创建一个画布，然后在此画布上绘制图像：
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://）
正如已经暗示的那样，画布提供了创建 ImageData 对象的唯一解决方案。
如果您真的反对使用 canvas 元素加载图像数据（也许我们正在谈论 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 数组提供可能会更容易。
如果您使用的是网络工作者，您可以将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