使用javascript获取Base64 PNG的像素颜色?-前端问题

Get pixel color of Base64 PNG using javascript?(使用javascript获取Base64 PNG的像素颜色?)

本文介绍了使用javascript获取Base64 PNG的像素颜色?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个 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;

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