CODEWITHSUNDEEP
javascriptjqueryajaximageget
azro
azro

Reputation: 54168

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

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

enter image description here

enter image description here

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

Upvotes: 0

Views: 616

Answers (1)

Old Pro
Old Pro

Reputation: 25557

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.

Upvotes: 1

Related Questions