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

Question

我正在尝试(菜鸟)用webgl构建一个应用程序。我已经到了想要加载一个图像数组，并对其进行一些像素操作的地步。我正在尝试获取数组中每个图片的第一个像素列，并用它构建一个新图片。然后将这个新生成的图片推入另一个数组中。(然后进入下一列，等等)

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

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

http://home.scarlet.be/~cornetp/ (仅在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";
    }

Answer 1

你的问题是，例如，这行

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

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

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

如果重构使您有一个处理第i个映像的function toSagitaal(i)，那么您可能会添加如下所示的行

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

在imageArray[0].src赋值之后，对于其他两个图像也是如此。

您当前的示例在重新加载时工作的原因是，到那时浏览器已经加载了图像，所以您不等待的事实并不重要。