簡體   English   中英

使用回調獲取圖像像素數據

[英]Using callback to get image pixel data

我對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();

簡單添加新函數,當所有過程完成時將調用該函數。 更改

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? 
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM