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

JavaScript: getting ImageData without canvas

提问by clamp

Is it possible to get an ImageDataObject from an image which is not on the canvas but somewhere else in the DOM tree as a normal <img>?

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

If yes, how?

如果是，如何？

回答by Denys Séguret

You have to create an in memory canvas and then draw on this canvas the image :

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

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);

But this won't work if the image comes from another domain. This is a security restriction you can't get around if you have no control of the server (be careful that if you open your html file with file:// you'll have a lot of additional restrictions, use http://)

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

回答by Matt Esch

As already implied, canvas offers the only solution for creating ImageData objects.

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

If you are really set against using the canvas element to load image data (perhaps we are talking lte IE8), you could always consider parsing the base64 image data using the src location of an image object

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

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

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

It's difficult, but if you must, could potentially parse images to an array this way.

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

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

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

This shows you how to load the data with an xhr request and parse the png data. Internally it uses the canvas for some other things but the subset you are interested in is canvas free. You would need to follow a similar implementation for each image format you are interested in.

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

I should mention that the image pixel reading limitations are identical in terms of security. You will never be able to read pixels that have come from a third party, with or without canvas. The XMLHTTPRequest is going to be bound to the governance of cross-domain policies. This prevents scripts from stealing third party content, which includes images that may contain sensitive user information.

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

If you need to read images on a third party domain (that don't require authentication to view), you should run an image proxy server on your domain which allows you to request images on the same domain. If you need to go to the trouble of that, it might be easier to simply provide the image data as a json array in the first place.

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

回答by Gobius Dolhain

If you are using a webworker you can use OffscreenCanvasas an alternative for document.createElement('canvas')

如果您使用的是网络工作者，则可以将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);

Note that support for OffscreenCanvas is limited: https://caniuse.com/#feat=offscreencanvas

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