Extract rgba data from image

Question

I am looking for a way to extract all the rgba data of an image.

I came across the getImageData() method from the module canvas and for a 10x10 in my case it returns an array only with zero. Below is how I extract the data right now. Any ideas, thank you

fs.readFile(__dirname + '/image.jpg', function(err, data) {
    if (err) throw err;
    var img = new Canvas(10, 10)   
    img.src = data;
    var c = img.getContext('2d');
    var imgData = c.getImageData(0, 0, img.width, img.height);
})

When you say "all the rgba data" of an image, what exactly are you asking for? What are you trying to do with the canvas. Maybe easier for context: what are planning to do with the rgba data once you have it? — barry-johnson, Mar 25 '17 at 04:21
I mean the rgba data in an array one after another, the same way they would be if I wanted the rgb data, I am using canvas to get that data, that's all. — worer, Mar 25 '17 at 04:23
I get a 400 element array calling getImageData on a 10x10. That's the RGB and A. What am I missing? Also, if you are in node, are you using electron or nwjs, or how are you getting a Canvas? — barry-johnson, Mar 25 '17 at 04:37
shit, yeah I do so too, it's just that it is full of zero, at least the first 100 I log onto my console - checked them, all zero. (I know I should edit the question cause that's not what it's saying) — worer, Mar 25 '17 at 04:44
The zeros would be transparent black pixels in RGBA. Is that possible with the image you have? I ask because I have certainly chased my tail a time or two only to realize that the data was unexpected, but still correct. — barry-johnson, Mar 25 '17 at 04:50
nope, my image is not of one color. the first two inputs in the getImageData are the upper left corners to start copying from in the x-y axes right? - yep I have made a mistake with the way I am calling getImageData(), after changing the first two inputs to 0,10 it gave me 40 values, which they where not all zero. Did you use the method with the first two inputs as zero and returned non-filled-with-zeros array? — worer, Mar 25 '17 at 05:02
Yes on the first two params being the x/y for the upper left. And yes, I actually just tried it again and I am getting correct (i.e. non-zero) data with a 0,0 origin. — barry-johnson, Mar 25 '17 at 05:10
Oh I am so blind!!! I just looked at your code again and see the issue. You are reading in raw binary data and trying to set it as the src. That will not work. You will need to convert it to a dataURL (i.e. a base64 encoded string prefixed by the mime type) — barry-johnson, Mar 25 '17 at 05:13
hehe no problem at all, so I should add something like `c= canvas.toDataURL("image/jpg");`. By the way if you want to wrap it up in an answer to accept it would be cool, cause I saw you have the unsung hero badge uh :P — worer, Mar 25 '17 at 05:17
That would return the right format, but the data won't be in the canvas yet. You'll want to convert the data to base 64 and then prepend the details appropriately. I believe I have the dataURL syntax correct in the answer below. Good luck with it. I am going to sleep soon, but will check in the AM. — barry-johnson, Mar 25 '17 at 05:23

score 1 · Accepted Answer · answered Mar 25 '17 at 05:21

1

As I mentioned in my final comment, I believe the root issue is that fs.readFile is returning you raw data, which is of no use for the canvas' src attribute. I think the below will work, but I will confess I haven't tested it.

fs.readFile(__dirname + '/image.jpg', function(err, data) {
    if (err) throw err;
    var img = new Canvas(10, 10)
   img.src = 'data:image/jpeg;base64,'+ data.toString('base64');
   var c = img.getContext('2d');
   var imgData = c.getImageData(0, 0, img.width, img.height);
})

answered Mar 25 '17 at 05:21

barry-johnson

3,204
1
17
19

1

Okay thank you, very much you really helped me and, you sound like a really nice guy :). It hasnt worked exactly yet but I think it just needs a few tweaks. – worer Mar 25 '17 at 05:28
Well, some people might debate the "nice guy" label, but only when they catch me in a bad mood! Like I said, I'll check in tomorrow too. The one thing that occurs to me is that I don't know how a canvas treats a src image that is larger than itself. That can be some fun javascript trivia for me to read about tomorrow. – barry-johnson Mar 25 '17 at 05:31
Last thing: [this question](http://stackoverflow.com/questions/3709391/node-js-base64-encode-a-downloaded-image-for-use-in-data-uri) may be helpful. – barry-johnson Mar 25 '17 at 05:36
hmm yep, unfortunately I didn't get it to work, if you could take a look at it would be cool – worer Mar 25 '17 at 17:42
I asked originally: what are you writing this in? Electron or nwjs, or do you have some third-party lib that is giving you the Canvas? There is no canvas in node's core core, it is a DOM thing. – barry-johnson Mar 25 '17 at 17:44
I simply have this line `const Canvas = require('canvas');` to get the canvas,if you mean that – worer Mar 25 '17 at 17:46
That means you are using [this module](https://www.npmjs.com/package/canvas) it appears. I honestly have no idea if it is even 100% compliant with HTML canvas. I know it does have 203 open issues on Github. at least I don't have to set up a new proj. Back in a few. – barry-johnson Mar 25 '17 at 17:54
okay, btw if you know of a tool/program to view rgba files, that would do the trick as well at this point, I searched a bit but didnt find any – worer Mar 25 '17 at 18:05
@worer View? If you are running node it is just a server, there is no display. – barry-johnson Mar 25 '17 at 18:06
yeah i know I was thinking with imagemagic, never mind its just me getting desperate. – worer Mar 25 '17 at 18:10
@worer Question: what OS are you running? I ask because - please see this [open issue for Windows jpeg support](https://github.com/Automattic/node-canvas/pull/841) Honestly, it seems like you are having problem with this library specifically. I would spend some time on its github issues pages. Also see [here](https://github.com/Automattic/node-canvas/pull/815) for addl info. You may have some add'l things needed to install. – barry-johnson Mar 25 '17 at 18:14
1

Good luck getting it working. Seems like a somewhat finicky package. I also changed your canvas tag to 'node-canvas' so it is clearer to anyone else. you might also check other similarly-tagged questions. – barry-johnson Mar 25 '17 at 18:25

Extract rgba data from image

1 Answers1