Javascript 未在webgl中加载纹理。从2D画布读取和操作，以数组形式存储

我正在尝试（新手）在webgl中构建一个应用程序。现在我要加载一组图像，并对其进行一些像素操作。我试图获取数组中每个图片的第一个像素列，并用它构建一个新图片。然后将新生成的图片推送到另一个数组中。（然后进入下一列等）

我通过在2D画布上绘制图像，然后读取像素来实现这一点。经过几次递归之后，我得到了所需的图像，并使用base64编码（和PNGlib.js库）将其写回数组

问题是加载页面时，纹理都保持黑色。这是如此，直到我手动重新加载页面

（仅在Firefox4中测试）

如果有人能看一下的话，我希望这些图像能立即显示出来

谢谢

    var crateTextures = Array();
    var crateArray = Array();
    var imageArray = Array();
    var crateImage
    var elem;
    var context;
    var r;
    var g;
    var b;

    function initTexture() {            
            cratefunction();
            for (var t=0; t < 3; t++) {
            var texture = gl.createTexture();
            texture.image = crateArray[t];
            crateTextures.push(texture);            
        }

        crateArray[0].onload = function () {
            handleLoadedTexture(crateTextures)
        }

    }
    function cratefunction(){
        initImages();
        toSagitaal();   
    }   
    function toSagitaal(){
        elem = document.getElementById('myCanvas');
        context = elem.getContext('2d');
        for(var z=0; z<3; z++){
            context.drawImage(imageArray[z], 0, 0);

            var p = new PNGlib(256, 256, 256); // construcor takes height, weight and color-depth
            var background = p.color(1, 1, 0, 1); // set the background transparent
            var canvasData = context.getImageData(0, 0, elem.width, elem.height);
            for (var i = 0; i < 256; i++) {
                    for (var j = 0; j < 256; j++) {
                            var idx = (j * canvasData.width + i) * 4;
                                r = canvasData.data[idx + 0];
                                g = canvasData.data[idx + 1];                           
                                b = canvasData.data[idx + 2];                           
                                p.buffer[p.index(255-i, j + 0)] = p.color(r, g, b);
                    }
            }
        crateImage = new Image();
        crateImage.src = "data:imagef/png;base64,"+p.getBase64();
        crateArray.push(crateImage);        
        }
    }   
    function initImages() {
                imageArray[0] = new Image();
        imageArray[0].src = "./data/data0000.png";
                imageArray[1] = new Image();
        imageArray[1].src = "./data/data0001.png";
                imageArray[2] = new Image();
        imageArray[2].src = "./data/data0002.png";
    }

var=Array（）；
var=Array（）；
var imageArray=Array（）；
var图像
var-elem；
var语境；
var-r；
var g；
var b；
函数initTexture（）{
函数（）；
对于（var t=0；t<3；t++）{
var texture=gl.createTexture（）；
texture.image=数组[t]；
推送（纹理）；
}
数组[0]。onload=函数（）{
手工装料织物（板条箱纹理）
}
}
函数{
initImages（）；
toSagitaal（）；
}   
函数toSagitaal（）{
elem=document.getElementById（'myCanvas'）；
context=elem.getContext（'2d'）；
例如，对于（var z=0；z，您的问题是

   imageArray[0].src = "./data/data0000.png";

启动映像加载，但不等待。因此，当您立即调用
toSagitaal（）
时，映像尚未加载

通常，您必须指定一个处理程序，该处理程序在加载图像时执行某些操作。为此，您需要为
onload
属性分配一个函数

如果进行重构，使sagitaal（i）

函数能够处理第i个映像，那么可以添加一行，如

   imageArray[0].onload = function(){toSagitaal(0);} ;

在

imageArray[0].src

赋值之后，对于其他两个图像也是如此

---

您当前的示例在重新加载时起作用的原因是浏览器当时已经加载了图像，因此您没有等待这一事实并不重要。

您的问题在于，例如，行

   imageArray[0].src = "./data/data0000.png";

启动映像加载，但不等待。因此，当您立即调用

toSagitaal（）

时，映像尚未加载

通常，您必须指定一个处理程序，该处理程序在加载图像时执行某些操作。为此，您需要为

onload

属性分配一个函数

如果进行重构，使sagitaal（i）函数能够处理第i个映像，那么可以添加一行，如

   imageArray[0].onload = function(){toSagitaal(0);} ;

在

imageArray[0].src

赋值之后，对于其他两个图像也是如此

您当前的示例在重新加载时起作用的原因是，此时浏览器已经加载了图像，因此您没有等待这一事实并不重要