cololpicker canvas
 

Добрый день!

Делаю colorpicker с использованием Canvas Api
Реализована возможность получения hex значение при клику на холст.

Пытаюсь сделать обратную реализацию - то есть при вводе hex значения в инпут , автоматически курсор перемещается на необходимую координату на холсте,соответствующая hex значению.

1 Вариант - Перебирать все координаты холста и к каждой координате вызывать метод Canvas Api-> getImageData, который вычисляет rgb значение. Затем сохранять в обьект координату и полученное rgb значение. Данные вариант не подходит, так как необходимо очень много времени для получения всех значений( Например холст 300 на 200px -время обработки около 3 мин)

2 Вариант я еще только реализую: Начинаю так же как и в первом варианте, но затем планирую сохранить обьект всех значений, отправить его на сервер, сформировать xml и сохранить в статичный файл, что бы не выполнять ресурсоемкуй цикл каждый раз. Затем обращаться к серверу за получением координат .Но есть минус-это то что при смене холста (размер, новый холст) -надо заново формировать xml

Вопрос к тем кто реализовывал подобную реализацию - получение координаты холста по введенному hex значению ( или rgb)- правильный ли алгоритм я выбрал (Варинат2), есть ли друге пути решения данной проблемы?

Не понятна цель. У меня в раскраске при нажатие на пробел rgb под мышкой передаётся на кисточку или лейку. http://clecar.ru/ris.html

Есть холст Canvas с различными rgb цветами. По клике на холст отображает цвет и hex значение цвета, по которому кликнули. Цель сделать так, чтобы при вводе в поле определенного hex значение курсор на холсте переместился именно на тот цвет
У Firefox есть расширение ColorZila . Вот там есть такая реализация. Тоже хочу сделать также

На ближайшую точку с этим значением и переместится, а зачем.

Мне интересно как реализован сам процесс смены курсора. Я в первом сообщение описал алгоритмы, как я делаю. Хотелось бы узнать, есть ли еще другие способы.

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

Спасибо за совет, попробую. Если просто вызвать метод getImageData(0,300,200,200), то возвращается общий массив всех значений rgb. Придется его разбивать на отдельные элементы и наверное перебор массива также будет ресурсоемким. Сейчас буду изучать подробно Uint8ClampedArray, может все нет так уж сложно

getImageData(0,0,300,200) - вот так, для всей картинки.
полный перебор массива займет доли секунды

Быстрее массив можно перебрать, если проверять сразу весь цвет, примерно так:

var color32bit = new Uint8Array(new Uint32Array([0x0a0b0c0d]).buffer)[3] === 0x0a ? //LITTLE_ENDIAN
	function(r, g, b, a){
    	return a << 24 | b << 16 | g << 8 | r; 
    } : 
	function(r, g, b, a){
    	return r << 24 | g << 16 | b << 8 | a;
    };
function pixelByColor(imageData, color) {
  var data = new Uint32Array(imageData.data.buffer),
      i = data.length;        
  while(i-- && data[i] ^ color);
  return i
}
pixelByColor(ctx.getImageData(0,0,width,height), color32bit(255,1,2,255))

Однако на самом деле перебор тут не нужен. В нормальном колорпикере используется изображение само по себе сгенерированное алгоритмом, и когда надо узнать цвет под мышкой или положение цвета на изображении само изображение вообще не трогают, а обращаются напрямую к алгоритму его сгенерировавшему и получают прямой ответ. Таким образом колорпикеры делались ещё до канваса.

greenrow,
Я не понимаю цели, мне бы не понравилось если бы курсор куда то прыгал. Выглядит чисто хулиганством, и такие вирусы мне попадались.