[英]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.