2

我正在尝试（新手）在 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";
    }
4

1 回答 1

0

你的问题是，例如，这条线

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

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

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

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

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

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

您当前的示例适用于重新加载的原因是浏览器到那时已经加载了图像，因此您不等待的事实并不重要。

于 2011-04-14T15:12:45.857 回答