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

我有一个base64编码的PNG。我需要使用javascript获得像素的颜色。我想我必须把它转换回一个正常的PNG。

---

有人能给我指出正确的方向吗？

创建一个

图像

对象，将base64图像作为源。然后，您可以将图像绘制到画布上，并使用

getImageData

函数获取像素数据

以下是基本想法（我还没有测试过）：

---

是的，您必须对base64进行解码，然后用Javascript对PNG流进行解码。这是一个困难（尽管不是不可能）的问题。实际上，您可能会受限于此需求，但如果您提供更多的上下文，您可能会得到一些范围更广的答案，并在这种情况下提供其他解决方法。例如，PNG数据来自哪里？它要去哪里？你需要一个单一的，固定的像素从每个图像？你有服务器支持吗？更详细一点：我正在尝试编写一个Safari扩展。它将模仿Firefox的Colorzilla功能。我所看到的唯一可能的方法是，如果你拍一张“截图”。输出为Base64 PNG格式。我最终需要跟踪鼠标，然后将其与图像同步，以从图像中提取单击像素的数据。@BenZotto为什么很难？非常感谢！然后我把它转换成十六进制代码。有没有办法从getImageData中提取十六进制数据，或者我必须转换它。不管怎样，谢谢@斯威茨：不是直接的。您只需使用

toString（16）

或类似工具分别转换每个通道。

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;