javascript - 如何从ajax调用中获取img数据(如像素)？

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 调用并操作 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 调用会出现问题，尽管 it is possible 。只需将图像作为图像加载，将其绘制到 Canvas 中，然后像以前一样进行。

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

请注意，这取决于 Same Origin Policy限制，但如果您从同一域上的页面访问图像，这将不是问题。 (否则您需要在图像上有适当的 CORS policy 并设置 img.crossOrigin = "Anonymous"。)

读者注意:要运行上面的代码同时避免 CORS 问题，请打开 image link在浏览器中，然后在浏览器的 JavaScript 控制台中运行该页面的代码。