How to get img data (like pixel) from an ajax call?

Question

I have a image here : https://tx3.travian.fr/hero_body.php?uid=446, by using a userscript (with Tampermonkey) I know how to read pixel data but this script runs on the page itself, so it has to be open :

var img = $('img')[0];
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
var pixelData = canvas.getContext('2d').getImageData(195, 56, 1, 1).data;

If possible, I want to achieve that from another page of the website, make a get call and manipulate the img, but I only get weird data (unknown encoding or something else) and I don't know how to deal with the result :

$.get(link , function( data ) {
    // test 1
    //let obj = $(data).find('img');

    // test 2
    $$("#content").html('<img src="data:image/png;base64,' + data + '" />');

    // test 3
    let img = data;

    let canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

    var pixelData = canvas.getContext('2d').getImageData(195, 56, 1, 1).data;
});

The image is well-load, i can see in "preview" tab, and everything is ok here :

But then how to deal with it :

Edit

$.get( link, function( data ) {

    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext("2d");

    var image = new Image();
    image.onload = function() {
        ctx.drawImage(this, 0, 0);
    };
    image.src = "data:image/png;base64," + data;   // ERROR GET data:image/png;base64,%EF%B ... F%BD net::ERR_INVALID_URL

});

To try : just open the dev console on the login page https://tx3.travian.fr/ and execute (the img page does not require login) :

$.get("/hero_body.php?uid=446" , function( data ) { console.log(data) });

Possible duplicate of [Base64 PNG data to HTML5 canvas](https://stackoverflow.com/questions/4409445/base64-png-data-to-html5-canvas) — showdev, Nov 01 '18 at 19:57
@showdev this pointed me to a good direction, I now have an image and I'm able to look pixels, but the image I get does ot fit `GET data:image/png;base64,%EF%B ... F%BD net::ERR_INVALID_URL` — azro, Nov 01 '18 at 20:14
@showdev I've edit my post and add the code I write and the error linked — azro, Nov 01 '18 at 20:34
@showdev also, I add a `console.log` into the .onload function but it's never triggered, is that because there is no real element in my DOM ? — azro, Nov 01 '18 at 20:44
Are you sure that the data is returned as a base64 encoded string? It looks like it might be raw image or blob data. — showdev, Nov 01 '18 at 20:46
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/182964/discussion-between-azro-and-showdev). — azro, Nov 01 '18 at 20:47

score 1 · Accepted Answer · edited Dec 03 '18 at 02:53

There is no reason to make an AJAX call to get the image, and as you have seen, making the AJAX call has problems, although it is possible. Just load the image as an image, draw it into a Canvas, and proceed as before.

const link = "https://tx3.travian.fr/hero_body.php?uid=446";

var img = new Image();
img.onload = function() {
    var canvas = document.createElement('canvas');
    canvas.width = this.naturalWidth;
    canvas.height = this.naturalHeight;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(this, 0, 0);
    var pixelData = canvas.getContext('2d').getImageData(200, 200, 1, 1).data;
    console.log('pixelData', pixelData);
}
img.src = link

Note that this is subject to Same Origin Policy limitations, but if you are accessing the image from a page on the same domain, that will not be an issue. (Otherwise you need to have an appropriate CORS policy on the image and set img.crossOrigin = "Anonymous".)

Note to readers: to run the code above while avoiding CORS issues, open the image link in your browser and then run the code in your browser's JavaScript console for that page.

@azro The pixel shows up as 0,0,0,0 because the picture is transparent black at the point you chose. I changed the sampling point so you get non-zero data. — Old Pro, Dec 03 '18 at 01:09

How to get img data (like pixel) from an ajax call?

1 Answers1