使用pako.js将数据Uri PNG解码为RGBA单维数组

Question

在用Javascript编码的网页中，我需要对PNG图像进行像素修改。为了实现它，我首先需要有一个PNG的像素表示。但PNG图像封装在数据uri方案中。

我使用测试图像尝试了以下步骤RGBA = 255/0/0/20的图像（5px，5px） 但我得到的单维矩阵是错误的。

这是一段代码：

var b64Data     = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQIW2P8z8AgwoAGGGkgCABN
var strData     = atob(b64Data);
console.log("strData "+strData.length)
var charData    = strData.split('').map(function(x){return x.charCodeAt(0);});
console.log("charData "+charData.length)
var binData= new Uint8Array(charData);
console.log("binData "+binData.length)
var data        = pako.inflate(binData.subarray(41));//41 in order to get the data chunk
console.log(data);
length = data.length
console.log('=============================');
for(i=1;i<length;i+=4){
    console.log(''+data[i]+'-'+data[i+1]+'-'+data[i+2]+'-'+data[i+3]);
}

但我最终在控制台中使用了以下矩阵：

1-255-0-0-20
0-0-0-0
0-0-0-0
0-0-0-0
0-0-0-0
1-255-0-0
20-0-0-0
0-0-0-0
0-0-0-0
0-0-0-0
0-1-255-0
0-20-0-0
0-0-0-0
0-0-0-0
0-0-0-0
0-0-1-255
0-0-20-0
0-0-0-0
0-0-0-0
0-0-0-0
0-0-0-1
255-0-0-20
0-0-0-0
0-0-0-0
0-0-0-0
0-0-0-0

为什么？