Подтвердить что ты не робот

Получить пиксельный цвет Base64 PNG с помощью javascript?

У меня есть PNG с кодировкой base64. Мне нужно получить цвет пикселя с помощью javascript. Я предполагаю, что мне придется преобразовать его в обычный PNG. Может ли кто-нибудь указать мне в правильном направлении?

Ответ 1

Создайте объект 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 a one-dimensional array of RGBA values.
    // Here an example of how to get a pixel 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;

Ответ 2

не могу оставить комментарий. Просто немного исправить ответ Мэтью Крамли.

var imageData = context.getImageData(0, 0, canvas.width, canvas.height) .data;