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割り当て後、他の2つの画像についても同様です。

現在の例がリロードで機能する理由は、ブラウザがその時点ですでに画像をロードしているため、待機していないという事実は問題ではありません。

于 2011-04-14T15:12:45.857 に答える