所以这里我有一个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
但我不确定他是怎么做到的。
答案 0 :(得分:3)
在您指向的页面的源代码中,有一个函数使用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 ;)
}
答案 1 :(得分:1)
不,您无法直接从该字符串中获取颜色值。您必须以某种方式解码PNG图像数据(它是压缩的)。使用<canvas>
是一种方法。
答案 2 :(得分:0)
无需依赖画布或浏览器渲染周期即可执行此操作。例如,如果您需要在无头环境(如单元测试运行器)中进行此工作。
借助名为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, ...
});
}