使用JavaScript获取Base64编码的PNG的像素颜色？ [英] Get pixel color of Base64 PNG using javascript?

问题描述

我有一个base64连接codeD 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?

推荐答案

创建一个图片使用的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;

这篇关于使用JavaScript获取Base64编码的PNG的像素颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！