Question

我是JavaScript的新手。回调的概念令我感到困惑，有点来自OOP背景

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

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

中

但是在start（）中，代码以异步方式运行，而显示ImageObject.pixels的log语句返回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? 
}

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

1 个答案: