当前位置：文江博客话题详情

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

发布于 2024-09-15 01:25:57 字数 84 浏览 4 评论 0原文

我有一个 Base64 编码的 PNG。我需要使用 javascript 获取像素的颜色。我想我必须将其转换回正常的 PNG。有人能指出我正确的方向吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

话少心凉 2024-09-22 01:25:57

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

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 原文

~没有更多了~