Como converter uma string png base64 em matriz de pixels sem usar canvas getImageData?

Embora pareça que essa pergunta tenha sido feita antes, as pessoas confiam na tela para essa conversão. O problema está vindo de um URL base64 assim:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAFElEQVQIW2NkYGD4D8RYAeOQkgQAERQHAbuZaGoAAAAASUVORK5CYII=

para um array de pixels com intensidades de cor como estevar array = [ [0x00,0x00,0x00], ... 49 times ]; para uma imagem de 7 px por 7 px (preto nesse caso), temos que usar código como este:

var mCanvas = document.createElement('canvas');
var base64DataUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAFElEQVQIW2NkYGD4D8RYAeOQkgQAERQHAbuZaGoAAAAASUVORK5CYII=";
mCanvas.width = 7;
mCanvas.height = 7;
var mContext = mCanvas.getContext('2d');
var myImage = new Image();
myImage.setAttribute("src", base64DataUrl);
myImage.onload = function() { 
    var mContext = mCanvas.getContext('2d');
    var mImgData = mContext.getImageData(0,0,mCanvas.width,mCanvas.height);
}

que se torna assíncrona por causa docarregando e muito doloroso de trabalhar (embora funcione).

Então, usaríamos código como esse para obter as cores RGBA da tela

function convertCanvasToPixelsArray(mCanvas){
    var mContext = mCanvas.getContext('2d');
    console.log(mCanvas.width);
    var mImgData = mContext.getImageData(0,0,mCanvas.width,mCanvas.height);

    var srcIndex=0, dstIndex=0, curPixelNum=0;
    var pixelsArray = new Array(mCanvas.width*mCanvas.height);
    for (curPixelNum=0; curPixelNum<mCanvas.width*mCanvas.height;  curPixelNum++)
    {
        pixelsArray[dstIndex] = new Array(3);
        pixelsArray[dstIndex][0] = mImgData.data[srcIndex]; // r
        pixelsArray[dstIndex][1] = mImgData.data[srcIndex+1];   // g
        pixelsArray[dstIndex][2] = mImgData.data[srcIndex+2];   // b

        dstIndex += 1;
        srcIndex += 4;
    }
    return pixelsArray;
}

Existe uma maneira de converter apenas da string de imagem png Base64 para uma matriz como o acima sem tela? Eu tentei PNG.js que diz que o png está corrompido ou incompleto (e eu tentei com ou sem odata:image/png;base64,. Eu tentei mais de base64.js e tomo bytes que não fazem qualquer sentido. Eu tentei chamadas atob / btoa sem resultados relevantes também.

A resposta para esta pergunta (É possível ler dados de pixel de imagens base64?) deveria estar funcionando mas eu recebo (apenas para o novo PNG (dados)):

Uncaught Error: Incomplete or corrupt PNG file 

com meu exemplo:

function show(data){
        var png = new PNG(data);
        var img = document.getElementById('image'), limg = document.getElementById('largeimage');
        document.getElementById('nativeimage').src = 'data:image/png;base64,' + data;
        img.innerHTML = '';
        limg.innerHTML = '';
        img.style.width = png.width + 'px';
        img.style.height = png.height + 'px';
        limg.style.width = (png.width * 3) + 'px';
        limg.style.width = (png.height * 3) + 'px';
        var line;
        while(line = png.readLine())
        {
            for (var x = 0; x < line.length; x++){
                var px = document.createElement('div'), px2 = document.createElement('div');
                px.className = px2.className = 'pixel';
                px.style.backgroundColor = px2.style.backgroundColor = '#' + line[x].toString(16).padRight('0', 6);
                img.appendChild(px);
                limg.appendChild(px2);
            }
        }
    }


    show("iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAFElEQVQIW2NkYGD4D8RYAeOQkgQAERQHAbuZaGoAAAAASUVORK5CYII=");

ou o exemplo nessa pergunta. Estou usando este PNG.js: [não estou mais usando isso]https://github.com/devongovett/png.js/blob/master/png.js

EDITAR Os dois pacotes não são os mesmos - vamos ver!

EDIT 2 quase funcionou usando issohttp://jsfiddle.net/6VqwC/8/ da outra perguntaMAS se você for você vai ver meu azulejo preto está se tornando listras deazul, verde, vermelho - isso é um bug do pacote: /?

EDITAR 3 então parece que o pacote está trabalhando com pngs comprimidos - e minhas pngs não estão compactadas - existe uma maneira de usar o PNG.js com arquivos não compactados?

EDIT 4 Então, se eu fizer uma função (como na resposta que foi excluída):

function convertBase64ToPixelsArray(tile,whatToDoNext){
        var base64DataUrl = tile.base64DataUrl;
        var mCanvas = newEl("canvas");
        var ctx = mCanvas.getContext("2d");
        var pixelsArray = [];

        var img = newEl("img");
        img.onload = getRGB;
        img.src = base64DataUrl;

        function getRGB(){
            mCanvas.width = img.width;
            mCanvas.height = img.height;
            ctx.drawImage(img,0,0);
            var data = ctx.getImageData(0,0,mCanvas.width, mCanvas.height).data;
            for (var i=0; i<data.length; i+=4){
                pixelsArray.push([data[i],data[i+1],data[i+2]]);
            }
            whatToDoNext(pixelsArray);
        }
    }

e tem várias funções diferentes como estas:

function doSomethingWithTile(tile,params){
   convertBase64ToPixelsArray(tile,function(pixelsArray){
    //manipulate the pixels 
    //convert them back to base64 and store it in the tile
    tile.base64UrlData = convertPixelsArrayToCanvas(pixelsArray,tile.width,tile.height).convertToBase64();
    });
}

então quando eu estou fazendo isso

var tile = initialize_tile();
doSomethingWithTile(tile,params1);
doSomethingWithTile2(tile,params2);
doSomethingWithTile(tile,params1);
...

O que acontece é que o bloco inicial está sendo manipulado para que os efeitos não se acumulem. Se você puder me ajudar com isso, então eu tenho uma resposta que irá usar canvas. A fila de chamadas do doSomethingWithTile não é predefinida / estática e pode ser arbitrária

Estou realmente perplexo e eu realmente aprecio sua ajuda :) Agradecemos antecipadamente!