是能够从BASE64图像读取的像素数据？ [英] Is is possible to read pixel data from base64 images?

问题描述

所以我在这里有一个base64连接codeD png图片：

<$p$p><$c$c>iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

和它使用我去codeD ATOB（）。它原来是：

  

PNG

  
  

IHDRo＆放大器;åIDAT×cøÿÿA AÐ1ñXÍõ5ËÑIEND®B`

是否有可能从这个字符串走出颜色值？ （不使用＆LT;＆帆布GT; ）

PS：现在看来似乎是可能的，因为我发现了一个演示：结果
http://labs.calyptus.eu/JSBin/Demo/Viewer.html 结果
但我不知道他是怎么做到的。

解决方案

在你指向的页面的源代码，有一个使用PNG.js和其他一些实用工具做你想要什么功能：

 功能显示（数据）{
    VAR PNG =新的PNG（数据）;
    VAR IMG =的document.getElementById（图像），limg =的document.getElementById（'largeimage'）;
    。的document.getElementById（'nativeimage'）SRC =数据：图像/ PNG; BASE64，'+数据;
    img.innerHTML ='';
    limg.innerHTML ='';
    img.style.width = png.width +'像素';
    img.style.height = png.height +'像素';
    limg.style.width =（png.width * 3）+'像素';
    limg.style.width =（png.height * 3）+'像素';
    VAR线;
    而（线= png.readLine（））
    {
        为（变量X = 0; X＆下; line.length; X ++）{
            变种PX =使用document.createElement（'DIV'），PX2 =使用document.createElement（'DIV'）;
            px.className = px2.className ='像素';
            px.style.backgroundColor = px2.style.backgroundColor ='＃'+线[X]的ToString（16）.padRight（'0'，6）;
            img.appendChild（PX）;
            limg.appendChild（PX2）;
        }
    }
}
 

如果你看一下这个函数的循环，你会发现，它的读取PNG，一行一行地ploting像素。

一个简单的例子是：

  VAR PNG =新的PNG（数据）; //数据以base64 EN codeD数据
VAR线;
变种Y = 0;
而（线= png.readLine（））
{
    为（变量X = 0; X＆下; line.length; X ++）{
        变种像素= doSomethingWithPixelData（X，Y，'＃'+线路[X]的ToString（16）.padRight（'0'，6））;
    }
    ÿ++;
}函数doSomethingWithPixelData（X，Y，颜色）{
    // 你猜怎么了？做像素数据的东西在这里;）
}
 

So here I have a base64 encoded png image:

iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

and I decoded it using atob(). It turns out to be:

PNG

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

Is it possible to get out the color values from this string? (without using <canvas>)

PS: It seems like it is possible since I found a demo:
　http://labs.calyptus.eu/JSBin/Demo/Viewer.html
　But I am not sure how he did it.

解决方案

In the source of the page you pointed, there's a function that uses the PNG.js and some other utilities to do what you want:

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

If you look at the loop in this function , you will notice that it's reading the PNG, line by line and ploting the pixels.

A simplified example would be:

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

这篇关于是能够从BASE64图像读取的像素数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！