如何从 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 调用来获取图像，并且正如您所见，尽管 it is possible 进行 AJAX 调用有问题。只需将图像加载为图像，将其绘制到 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 控制台中为该页面运行代码。