Как захватить цвет?

Question

[pin3]

Надо захватить все цвета по ширине определенного блока в 1px.
Как это сделать, я не знаю, идей нет.
Искал в яндексе, толком не нашел нужного. Где искать? Можете поделится ссылкой?

Comments

[Kovalsky]

Захват цвета это вроде бы дико сложная задача, вот гляньте на попытку реализации - https://html2canvas.hertzen.com/documentation.html, а это реализация захвата цвета из одной картинки - jsfiddle.net/thirtydot/9SEMf/869

В данный момент наверное нет реально работающих сервисов способных такое сделать.

[pin3]

Сложно, но все же я сделал. Правда пошел уже другим путем. Осталась одна проблема.. Это колоссальная нагрузка на машинку. А ну и возможно поддержка.. не у всех будет работать xD

Answer 1

[pin3]

Отрисовка в через метод drawImage():

var canvas = document.createElement('canvas'),
video = document.getElementsByTagName('video')[0],
ctx = canvas.getContext('2d');
 
canvas.width = video.width;
canvas.height = video.height;
 
ctx.drawImage(video, 0, 0, video.width, video.height);

узнаем цвет getImageData():

var block_width = 50;
 
var pixels = ctx.getImageData(0, 0, block_width, canvas.height);

ну а дальше сами думайте)

сейчас все сделал через маску с использованием свечения.
Позже с использованием градиента

Answer 2

[Станислав Третьяков]

Вам нужно окрасить блок всеми цветами? И каждый цвет - это 1px?

Если да, то первое что приходит в голову, то взять RGB и пробежаться циклом
от rgb(0, 0, 0) до rgb(255, 255, 255), создавая блоки 1px на 1px для каждого цвета.

Посмотрите пример на хабре как делают Color Picker на JavaScript, все достаточно
примитивно и даже можно скачать исходник. Я понимаю, что вам не нужен Color
Picker, просто посмотрите на реализацию цикла и сделайте то, что надо вам.