Question

虽然以前似乎已经问过这个问题，但人们依靠画布进行转换。问题来自这样的base64网址：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAFElEQVQIW2NkYGD4D8RYAeOQkgQAERQHAbuZaGoAAAAASUVORK5CYII=

到像这样的颜色强度的像素阵列对于7px x 7px图像var array = [ [0x00,0x00,0x00], ... 49 times ];（在这种情况下为黑色），我们必须使用这样的代码：

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);
}

由于 onload 而变得异步，并且非常痛苦（尽管它有效）。

然后我们将使用这样的代码从画布中获取RGBA颜色

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;
}

有没有办法只需将Base64 png图像字符串转换为上面没有画布的数组？我已经尝试了PNG.js，它说png已损坏或不完整（我尝试使用或不使用data:image/png;base64,。我尝试了大部分base64.js并且我接受了没有任何意义的字节。我尝试了atob / btoa调用，没有相关结果。

这个问题的答案（Is is possible to read pixel data from base64 images?）本来应该有效，但我得到了（仅适用于新的PNG（数据））：

Uncaught Error: Incomplete or corrupt PNG file

以我的例子：

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=");

或该问题中的示例。我正在使用这个PNG.js：[我不再使用它了] https://github.com/devongovett/png.js/blob/master/png.js

编辑两个包不一样 - 让我们看看！

编辑2 它几乎可以使用其他问题中的http://jsfiddle.net/6VqwC/8/ 但是如果你去了，你会发现我的黑色瓷砖正在成为的条纹蓝色，绿色，红色 - 这是包的错误：/？

编辑3 所以看起来软件包正在使用压缩的pngs - 我的pngs没有被压缩 - 有没有办法将PNG.js与非压缩文件一起使用？

编辑4 因此，如果我创建一个函数（就像在删除的答案中那样）：

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);
        }
    }

并具有多种不同的功能：

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();
    });
}

然后当我这样做

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

发生的事情是正在操纵初始图块，因此效果不会累积。如果你可以帮助我那么我有一个将使用画布的答案。 doSomethingWithTile的调用队列不是预定义/静态的，可以是任意的

我真的很困惑，我真的很感谢你的帮助:) 提前谢谢！

如何在不使用canvas getImageData的情况下将png base64字符串转换为像素数组？

0 个答案: