开发者

Get pixel color of Base64 PNG using javascript?

开发者 https://www.devze.com 2023-01-12 03:46 出处:网络
I have a base64 encoded PN开发者_如何学编程G. I need to get the color of a pixel using javascript.I assume I\'ll have to convert it back to a normal PNG.

I have a base64 encoded PN开发者_如何学编程G. 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?


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;
0

精彩评论

暂无评论...
验证码 换一张
取 消