使用回调获取图像像素数据

Question

我对 JavaScript 比较陌生。来自 OOP 背景的回调概念让我有点困惑

我正在尝试为图像对象创建隐藏 canvas，然后获取其像素数据。

我有一个 ImageObject，我最终想在其上存储所有属性，如图像、像素等。在 start() 中，首先我获得对 maincanvas 和 mainctx 的引用。然后加载图像，绘制图像后，将其像素数据存储在 ImageObject.pixels

中

然而在 start() 内部，代码异步运行并且日志语句显示 ImageObject.pixels return null

如何使用回调来解决这个问题？

下面是我的代码

ImageObject = {};
var MainCtx;
var MainCanvas;
//get the image pixel properties

function start()
{
    MainCanvas = document.getElementById("canvas");
    MainCtx = MainCanvas.getContext('2d');
    ImageObject.image = loadImage();
    console.log(" Image pixels " +ImageObject.pixels); // -> displays NULL because code runs asynchronously, how do I use callback here to avoid this? 
}

function loadImage()
{
    var image = new Image();
    image.src = 'image.jpg';
    image.addEventListener('load',function()
        {
            MainCtx.drawImage(image,MainCanvas.width/2,MainCanvas.height/2);
            console.log("width here" +image.width+ " maincanvas " +MainCanvas+ " mainctx " +MainCtx+ " image " +image);
            ImageObject.pixels = getImagePixels(image); //-> store pixel data in the image 
        });
    return image; 
}


function getImagePixels(img)
{
    var c = getCanvas(img.width,img.height);
    var ctx = c.getContext('2d');
    return ctx.getImageData(0,0,c.width,c.height);
}

function getCanvas(w,h)
{
    var c = document.createElement('canvas');
    c.width = w;
    c.height = h;
    return c;
}

start();

Answer 1

简单地添加将在所有过程完成时调用的新函数。变化

function start()
{
    MainCanvas = document.getElementById("canvas");
    MainCtx = MainCanvas.getContext('2d');
    ImageObject.image = loadImage();
    console.log(" Image pixels " +ImageObject.pixels); // -> displays NULL because code runs asynchronously, how do I use callback here to avoid this? 
}

至

function start()
{
    MainCanvas = document.getElementById("canvas");
    MainCtx = MainCanvas.getContext('2d');
    ImageObject.image = loadImage();
}

并改变

function loadImage()
{
    var image = new Image();
    image.src = 'image.jpg';
    image.addEventListener('load',function()
        {
            MainCtx.drawImage(image,MainCanvas.width/2,MainCanvas.height/2);
            console.log("width here" +image.width+ " maincanvas " +MainCanvas+ " mainctx " +MainCtx+ " image " +image);
            ImageObject.pixels = getImagePixels(image); //-> store pixel data in the image 
        });
    return image; 
}

至

function loadImage()
{
    var image = new Image();
    image.src = 'image.jpg';
    image.addEventListener('load',function()
        {
            MainCtx.drawImage(image,MainCanvas.width/2,MainCanvas.height/2);
            console.log("width here" +image.width+ " maincanvas " +MainCanvas+ " mainctx " +MainCtx+ " image " +image);
            ImageObject.pixels = getImagePixels(image); //-> store pixel data in the image 
            done();
        });
    return image; 
}

并添加这个

function done()
{
    console.log(" Image pixels " +ImageObject.pixels); // -> displays NULL because code runs asynchronously, how do I use callback here to avoid this? 
}

使用回调获取图像像素数据

Using callback to get image pixel data

javascript

callback