是否可以从 base64 图像中读取像素数据？

Question

所以这里我有一个 base64 编码的 png 图片：

iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

我使用atob() 对其进行了解码。原来是：

PNG

IHDRo&åIDAT×cøÿÿ?Ã Ã Ð1ñXÍõ5ËÑIEND®B`

是否可以从此字符串中取出颜色值？ （不使用<canvas>）

PS：好像有可能，因为我找到了一个演示：
http://labs.calyptus.eu/JSBin/Demo/Viewer.html
但我不确定他是怎么做到的。

Answer 1

在不依赖画布或浏览器渲染周期的情况下执行此操作会很有用。例如，如果您需要在单元测试运行器等无头环境中完成这项工作。

这可以在名为 png.js 的库的帮助下实现

const PNGReader = require('png.js');

function parseDataImage(data: string) {
  console.log('Data is', data); // Data is data:image/png;base64,iVBORw0KGgoAAAANSUh...
  const base64 = data.split(',')[1];
  console.log('Base64 is', base64); // Base64 is iVBORw0KGgoAAAANSUh...
  const bytes = atob(base64); // Base64 Decode
  console.log('Bytes are', bytes); // Bytes are <Some binary data>
  const png = new PNGReader(bytes);
  png.parse((err, png) => {
    console.log('Pixels are', png.pixels); // Pixels are Buffer{0: 255, 1: 0, 2: 65, ...
  });
}

Answer 2

在您指向的页面的源代码中，有一个函数使用 PNG.js 和其他一些实用程序来执行您想要的操作：

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

如果您查看此函数中的循环，您会注意到它正在逐行读取 PNG 并绘制像素。

一个简化的例子是：

var png = new PNG(data); // data is the base64 encoded data
var line;
var y = 0;
while(line = png.readLine())
{
    for (var x = 0; x < line.length; x++){
        var pixel = doSomethingWithPixelData(x, y, '#' + line[x].toString(16).padRight('0', 6));
    }
    y++;
}

function doSomethingWithPixelData(x, y, color) {
    // guess what? do something with pixel data here ;)
}

Answer 3

不，您不能直接从该字符串中获取颜色值。您必须以某种方式解码 PNG 图像数据（已压缩）。使用<canvas> 是一种方法。