代码之家 › 专栏 › 技术社区 › switz

使用javascript获取base64 png的像素颜色?

base64 png image javascript

10

switz · 技术社区 · 16 年前

我有一个base64编码的png。我需要使用javascript获取像素的颜色。我想我必须把它转换回一个正常的PNG。有人能给我指出正确的方向吗?

1 回复 | 直到 16 年前

1

14

Matthew Crumley 16 年前

创建一个 Image 以base64映像作为源的对象。然后您可以将图像绘制到画布上并使用 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;