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

2022-01-21 00:00:00 image png base64 javascript

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

I have a base64 encoded PNG. I need to get the color of a pixel using javascript. I assume I'll have to convert it back to a normal PNG. Can anyone point me in the right direction?

推荐答案

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

Create an Image object with the base64 image as the source. Then you can draw the image to a canvas and use the getImageData function to get the pixel data.

这是基本的想法(我没有测试过):

Here's the basic idea (I haven't tested this):

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;

相关文章