纹理不能在webgl中加载.读取和操作2D画布，存储在数组中

Question

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

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

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

http://home.scarlet。Be/~cornetp/(仅在firefox 4中测试)

我想让图像立即显示，如果有人可以看到它，

谢谢,

    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属性分配一个函数。

如果你重构，你有一个function toSagitaal(i)处理第i个图像，那么你可以添加一行，如

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

在imageArray[0].src赋值之后，其他两个图像也类似。

你现在的例子是重载的原因是浏览器已经加载了图像，所以你不等待的事实并不重要。