Можно ли присвоить переменной значение цвета с фото в javascript? Если да, то как?

Question

[JaneK2000]

Если возможно создать переменную, которой присваивается значение цвета с фото, напишите пожалуйста код.

Answer 1

[sta-ger]

Можно нарисовать фото на canvas и далее получить цвет в нужной позиции:

var p = canvas.getContext('2d').getImageData(x, y, 1, 1).data;
var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);

function rgbToHex(r, g, b) {
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
}

В переменной hex будет значение цвета в формате #000000.

Comments

[JaneK2000]

а можно объяснить, как это работает вместе с фото внутри canvas, пожалуйста

[sta-ger]

Предположим, фото, с которого вы хотите получить цвет находится у вас на странице как элемент <img id="photo" src="photo.png">

Тогда:

var img = document.getElementById("photo"); //кладете в переменную img вашу фотографию
var canvas = document.createElement("canvas"); //создаете новый элемент canvas
//назначаете канвасу такие же размера как и фотографии
canvas.style.width = img.width;
canvas.style.height = img.height;

canvas.getContext("2d").drawImage(img, 0, 0); //рисуете вашу фотографию на канвасе

var p = canvas.getContext('2d').getImageData(x, y, 1, 1).data; //получаете с канваса цвет пикселя в позиции x, y как массив [R, G, B] (допустим вы получили белый [255, 255, 255])

var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6); //функцией rgbToHex конвертируете полученный массив в привычный 16-ричный формат, получится #FFFFFF

Каким образом вы хотите получить цвет в той или иной точке на картинке - это уже другая история.

[JaneK2000]

sta-ger: спасибо огромное, ваша помощь неоценима, спасибо