使用javascript获取Base64 PNG的像素颜色？答案

【问题标题】：Get pixel color of Base64 PNG using javascript?使用javascript获取Base64 PNG的像素颜色？
【发布时间】：2011-04-01 11:52:13
【问题描述】：

我有一个 base64 编码的 PNG。我需要使用 javascript 获取像素的颜色。我想我必须将它转换回普通的 PNG。谁能指出我正确的方向？

【问题讨论】：

是的，您必须同时进行 base64 解码，然后在 Javascript 中解码 PNG 流。这是一个很难（尽管并非不可能）的问题。您实际上可能受到此要求的限制，但如果您提供更多上下文，您可能会得到一些范围更广的答案，提供在这种情况下的其他解决方法。例如。 PNG数据来自哪里？它要去哪里？您是否需要每个图像中的单个固定像素？有服务器支持吗？等等。
为了让它更详细一点：我正在尝试编写一个 Safari 扩展。它将模仿 Colorzilla for Firefox 的功能。我看到这是可能的唯一方法是，如果你采取“截图”。输出为 Base64 PNG。我最终需要跟踪鼠标，然后将其与图像同步以从图像中提取点击像素的数据。
@BenZotto 为什么会很难？

标签： javascript image png base64

【解决方案1】：

创建一个以 base64 图像为源的Image 对象。然后可以将图像绘制到画布上，并使用getImageData 函数获取像素数据。

这是基本的想法（我没有测试过）：

var image = new Image();
image.onload = function() {
    var canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;

    var context = canvas.getContext('2d');
    context.drawImage(image, 0, 0);

    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);

    // Now you can access pixel data from imageData.data.
    // It's a one-dimensional array of RGBA values.
    // Here's an example of how to get a pixel's color at (x,y)
    var index = (y*imageData.width + x) * 4;
    var red = imageData.data[index];
    var green = imageData.data[index + 1];
    var blue = imageData.data[index + 2];
    var alpha = imageData.data[index + 3];
};
image.src = base64EncodedImage;

【讨论】：

非常感谢！然后我把它转换成十六进制代码。有没有办法从 getImageData 中提取十六进制数据，或者我必须转换它。不管怎样，谢谢！
@Switz：不直接。您只需使用 toString(16) 或类似的东西单独转换每个频道。