77

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

If yes, how?

serv-inc
  • 35,772
  • 9
  • 166
  • 188
clamp
  • 33,000
  • 75
  • 203
  • 299
  • See also: [Get image data url in JavaScript?](https://stackoverflow.com/questions/934012/get-image-data-url-in-javascript) – user26742873 Feb 24 '21 at 15:34

3 Answers3

83

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

James
  • 773
  • 2
  • 18
  • 29
Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • 3
    Another point to be careful of: pixel values rendered with drawImage may be different from values in your image because of color space correction. Good thing that this only happens if image contains color space information. – ironic Aug 13 '14 at 08:08
  • 1
    @ironic Yes, I encountered that problem, it's worth noting as it can be very painful to debug. – Denys Séguret Aug 13 '14 at 08:13
  • 28
    The title explicitly says "without canvas" regardless of the canvas is been exists onn DOM tree or not. This is why i gave -1 to this answer. – ozanmuyes Aug 21 '15 at 22:02
  • 19
    @ozanmuyes My answer is helpful and solves the real problem. You should try being helpful too. – Denys Séguret Aug 22 '15 at 07:54
  • so, you can't upload an image in an IMG tag to a server? that's a use case that canvas is useless for because (1) image likely is from a random domain and (2) rendering the image necessitates a lossy re-encoding at some point – Michael Jul 07 '16 at 23:31
  • 6
    You should probably use `img.naturalWidth` and `img.naturalHeight` to get the dimensions of the source data instead of the dimensions of the rendered DOM element. – Jared Deckard Jul 08 '17 at 21:45
  • @ozanmuyes On the other hand, the question has the tag "canvas," and it mentions "an image which is not on the canvas," implying there is a `canvas` somewhere. – sylbru Jul 30 '17 at 22:15
  • 1
    This "security restriction" you speak of, is that maybe circumventable by setting crossOrigin = "Anonymous"? (I'm doing that somewhere, and it seems to work.) – Caesar Dec 30 '17 at 20:06
  • @Caesar of course, that's why I precised "if you have no control of the server". [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) headers must be set on the resource server. – Denys Séguret Dec 31 '17 at 12:54
  • @DenysSéguret Ah. What got me confused is that I'm doing that on a server I have no control over (ipfs.io), but they do have that set. A few image sharing sites do, too, it seems. Ty. – Caesar Dec 31 '17 at 16:15
24

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

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

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

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.

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.

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.

Matt Esch
  • 22,661
  • 8
  • 53
  • 51
  • authentication and browser sniffing are two big reasons that server loading of the URL aren't feasible – Michael Jul 07 '16 at 23:34
  • Arg. Sadly the first link has died - the post loads, but the actual demo code never made it through a site transition, and the web archive never got it. – i336_ Jun 02 '17 at 01:37
  • @i336_ Look at the github repository https://github.com/calyptus/labs/blob/master/JSBin/Demo/Viewer.html – William Ardila Jul 28 '17 at 03:14
9

If you are using a webworker you can use OffscreenCanvas as an alternative for 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

Gobius Dolhain
  • 326
  • 3
  • 6