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

有没有可能从一个不在画布上而是在 DOM 树中的其他地方的图像中获得一个 ImageData对象作为一个正常的 <img>？

如果是，怎么做？

65527 次浏览
小开
最佳答案

你必须在内存中创建一个画布，然后在这个画布上绘制图像:

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 对象的唯一解决方案。

如果您确实反对使用画布元素来加载图像数据(也许我们说的是 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 数组提供可能会更容易。

小开

如果你正在使用一个网络工作者，你可以使用 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);

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


提交答案