Как получить данные img (например, пиксели) из ajax-вызова?

Question

У меня есть изображение здесь: https://tx3.travian.fr/hero_body.php?uid=446, с помощью скрипта пользователя (с Tampermonkey ) Я знаю, как читать данные пикселей, но этот скрипт выполняется на самой странице, поэтому должно быть открыто:

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;

---

Если возможно, я хочу добиться этого с другой страницы сайта, сделать get call и манипулировать img, но я получаю только странные данные (неизвестная кодировка) или что-то еще) и я не знаю, как справиться с результатом:

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

• Изображение хорошо загружено, я вижу его на вкладке «Предварительный просмотр», и здесь все в порядке:

• Но тогда как с этим бороться:

Редактировать

$.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

});

---

Чтобы попробовать: просто откройте консоль разработчика на странице входа в систему https://tx3.travian.fr/ и выполните (страница img не требует входа):

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

Answer 1

Нет причин делать AJAX-вызов для получения изображения, и, как вы видели, при вызове AJAX возникают проблемы, хотя возможно . Просто загрузите изображение как изображение, нарисуйте его на холсте и продолжайте как раньше.

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

Обратите внимание, что на это распространяются Одинаковая политика происхождения ограничения, но если вы получаете доступ к изображению со страницы в том же домене, это не будет проблемой. (В противном случае вам нужно иметь соответствующую политику CORS на образе и установить img.crossOrigin = "Anonymous".)

Примечание для читателей : для запуска приведенного выше кода, избегая проблем с CORS, откройте в своем браузере ссылку image и затем запустите код в консоли JavaScript вашего браузера для эта страница.