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

Question

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

12

我有一个base64编码的PNG图片。我需要使用JavaScript获取像素颜色。我认为我需要将它转换回普通的PNG图片。有没有人能指点我正确的方向？

- switz

是的，您需要在JavaScript中对base64进行解码，然后再对PNG流进行解码。这是一个困难的问题（虽然不是不可能）。您可能实际上受到此要求的限制，但如果您提供更多上下文，您可能会得到一些更广泛的答案，提供其他解决方案。例如，PNG数据来自哪里？它要去哪里？您需要从每个图像中获取单个固定像素吗？您有任何服务器支持吗？等等。 - Ben Zotto

稍微详细解释一下：我正在尝试编写一个Safari扩展程序。它将模仿Firefox的Colorzilla的功能。我所见过的唯一可能实现这一点的方法是通过"截屏"。输出结果为Base64 PNG格式。最终，我需要跟踪鼠标，然后将其与图像同步，以从图像中获取所点击像素的数据。 - switz

@BenZotto 为什么会很难？ - Melab

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matthew Crumley · Accepted Answer

使用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;