Блог

Я пытаюсь (новичок) создать приложение на 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";
    }
  

Ваша проблема в том, что, например, строка

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

инициирует загрузку изображения, но не ожидает ее. Поэтому, когда вы немедленно вызываете toSagitaal() , изображения еще не загружены.

Обычно вам приходится указывать обработчик, который что-то делает при загрузке изображения. Для этого onload свойству присваивается функция.

Если вы проведете рефакторинг, чтобы у вас был function toSagitaal(i) , который обрабатывает i-е изображение, тогда вы могли бы добавить строку типа

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

после imageArray[0].src присвоения и аналогично для двух других изображений.

Причина, по которой ваш нынешний пример работает при перезагрузке, заключается в том, что браузер к тому времени уже загрузил изображения, поэтому тот факт, что вы не ждете, не имеет значения.