7

虽然这个问题似乎以前被问过，但人们依靠画布进行转换。问题来自这样的base64 url​​： 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);
}

由于加载而变得异步并且使用起来非常痛苦（尽管它有效）。

然后我们将使用这样的代码从画布中获取 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(data)）：

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，因此该软件包似乎正在使用压缩的 png - 而我的 png 未压缩 - 有没有办法将 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 的调用队列不是预定义/静态的，可以是任意的

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

4

0 回答 0