Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.10.2016, 10:58
Интересующийся
Отправить личное сообщение для greenrow Посмотреть профиль Найти все сообщения от greenrow
 
Регистрация: 22.01.2016
Сообщений: 12

cololpicker canvas
Добрый день!

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

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

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

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

Вопрос к тем кто реализовывал подобную реализацию - получение координаты холста по введенному hex значению ( или rgb)- правильный ли алгоритм я выбрал (Варинат2), есть ли друге пути решения данной проблемы?
Ответить с цитированием
  #2 (permalink)  
Старый 31.10.2016, 12:09
Профессор
Отправить личное сообщение для clecar Посмотреть профиль Найти все сообщения от clecar
 
Регистрация: 11.02.2015
Сообщений: 255

Не понятна цель. У меня в раскраске при нажатие на пробел rgb под мышкой передаётся на кисточку или лейку. http://clecar.ru/ris.html
Ответить с цитированием
  #3 (permalink)  
Старый 31.10.2016, 12:25
Интересующийся
Отправить личное сообщение для greenrow Посмотреть профиль Найти все сообщения от greenrow
 
Регистрация: 22.01.2016
Сообщений: 12

Есть холст Canvas с различными rgb цветами. По клике на холст отображает цвет и hex значение цвета, по которому кликнули. Цель сделать так, чтобы при вводе в поле определенного hex значение курсор на холсте переместился именно на тот цвет
У Firefox есть расширение ColorZila . Вот там есть такая реализация. Тоже хочу сделать также
Ответить с цитированием
  #4 (permalink)  
Старый 31.10.2016, 13:05
Профессор
Отправить личное сообщение для clecar Посмотреть профиль Найти все сообщения от clecar
 
Регистрация: 11.02.2015
Сообщений: 255

На ближайшую точку с этим значением и переместится, а зачем.
Ответить с цитированием
  #5 (permalink)  
Старый 31.10.2016, 13:50
Интересующийся
Отправить личное сообщение для greenrow Посмотреть профиль Найти все сообщения от greenrow
 
Регистрация: 22.01.2016
Сообщений: 12

Сообщение от clecar Посмотреть сообщение
На ближайшую точку с этим значением и переместится, а зачем.
Мне интересно как реализован сам процесс смены курсора. Я в первом сообщение описал алгоритмы, как я делаю. Хотелось бы узнать, есть ли еще другие способы.
Ответить с цитированием
  #6 (permalink)  
Старый 31.10.2016, 15:32
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 802

Сообщение от greenrow
Перебирать все координаты холста и к каждой координате вызывать метод Canvas Api-> getImageData, который вычисляет rgb значение. Затем сохранять в обьект координату и полученное rgb значение.
так можно сразу получить значения всех пикселей
см. описание к getImageData
Ответить с цитированием
  #7 (permalink)  
Старый 31.10.2016, 16:07
Интересующийся
Отправить личное сообщение для greenrow Посмотреть профиль Найти все сообщения от greenrow
 
Регистрация: 22.01.2016
Сообщений: 12

Спасибо за совет, попробую. Если просто вызвать метод getImageData(0,300,200,200), то возвращается общий массив всех значений rgb. Придется его разбивать на отдельные элементы и наверное перебор массива также будет ресурсоемким. Сейчас буду изучать подробно Uint8ClampedArray, может все нет так уж сложно
Ответить с цитированием
  #8 (permalink)  
Старый 31.10.2016, 16:13
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 802

Сообщение от greenrow
getImageData(0,300,200,200)
getImageData(0,0,300,200) - вот так, для всей картинки.
полный перебор массива займет доли секунды
Ответить с цитированием
  #9 (permalink)  
Старый 31.10.2016, 16:16
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,663

Быстрее массив можно перебрать, если проверять сразу весь цвет, примерно так:
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))
Однако на самом деле перебор тут не нужен. В нормальном колорпикере используется изображение само по себе сгенерированное алгоритмом, и когда надо узнать цвет под мышкой или положение цвета на изображении само изображение вообще не трогают, а обращаются напрямую к алгоритму его сгенерировавшему и получают прямой ответ. Таким образом колорпикеры делались ещё до канваса.
__________________
29375, 35

Последний раз редактировалось Aetae, 31.10.2016 в 17:31.
Ответить с цитированием
  #10 (permalink)  
Старый 31.10.2016, 17:04
Профессор
Отправить личное сообщение для clecar Посмотреть профиль Найти все сообщения от clecar
 
Регистрация: 11.02.2015
Сообщений: 255

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Петербург: Javascript + Canvas. Разработчик для портирования игры. В офис. waxattack Работа 0 21.07.2016 15:06
Повтор фото (getUserMedia(),HTML5 Canvas) aspex Элементы интерфейса 1 27.12.2014 16:46
Canvas картинка с обесцвечиванием. cheba Общие вопросы Javascript 9 31.05.2013 09:13
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 12:55
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16