代码之家 › 专栏 › 技术社区 › azro

如何从ajax调用中获取img数据(比如pixel)?

get image ajax jquery javascript

azro · 技术社区 · 7 年前

我在这里有一个图像: https://tx3.travian.fr/hero_body.php?uid=446 ,通过使用用户脚本(与 捣蛋猴

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;

如果可能的话,我想从网站的另一个页面上实现,做一个得到调用并操纵 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

});

只需打开登录页上的dev控制台 https://tx3.travian.fr/

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

1 回复 | 直到 7 年前

azro 7 年前

没有理由通过AJAX调用来获取图像,正如您所看到的,尽管 it is possible . 只需将图像加载为图像,将其绘制到画布中,然后像以前一样继续。

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