Приветствую Вас, уважаемые форумчане! Необходимо при клике по картинке получить цвет пикселя, по которому был произведен клик. Может быть кто-то встречал готовое решение?
уверен слово colorpicker в гугле выдаст стопицот готовых решений. но js не моё, советовать ничего не буду.
colorpicker - это выбор цвета из палитры. мне нужна пипетка, и без canvas её никак не реализовать, на сколько понимаю. готового не нашел пока-что. --- Добавлено --- вот это отметнул сначала в поисках более простого решения и забыл) походу это и нужно изучать)
https://stackoverflow.com/a/21457424/272885 > Using a technique called Browser Timing Attack, it is possible to (sort of) determine the color of any pixel, even on iframes. --- Добавлено --- Ты же сказал надо не с палитры, а сам приводишь пример с фотографии, то есть с ограниченной канвы. Да ещё с руселлер. Женя Попов фу.
под палитрой подразумевал набор цветов. фу не фу, а вариант рабочий. и, сюдя по наличию англоязычных комментов в коде, вряд ли это его решение. @Deonis на твоё решение хром ругается почему-то. Особо не разбирался, но спасибо Есть еще один вопрос. Если изменить размер холста с помощью CSS (я давал 100% от контейнера), то почему-то картинка не правильно масштабируется и пипетка ведет себя не правильно (указывает не те цвета, над которыми находится). На эту тему ничего толкового не нагуглил и просто дал контейнеру overflow:hidden (этажикастыль!) Думается мне, что @Fell-x27 что-то знает об этом ибо был замечен в любви к JS в целом и канвасу в частности P. S. Вот и канвас потрогал
Протокол file:// тут не прокатит. Для Хрома http(s) Хоть это и не его скрипты, а только чужие переведенные материалы, но он умеет обосрать всё, к чему прикасается --- Добавлено --- Его можно сравнить с сапрогеном (гнилостной бактерией). От таких нужно беречь парное молоко ))
отвечаю на свой же вопрос. изменение размеров холста производится следущим образом: Код (Javascript): var canvas = document.getElementById('canv'); // тут наш холст canvas.width = 128; canvas.height = 128; обращаю Ваше внимание: 1. Это делается не через встроенный объект элемента style (canvas.style.width). 2. В качестве значений присваиваются целые числа, а не строки ('128px')
Потому что размер-то ты изменил, а количество пикселей на битмапе осталось прежним. Если у тебя раньше 100 пикселей занимали 100 пикселей в ширину, то теперь, грубо, у тебя 100 пикселей занимают 1000 пикселей в ширину. Стало быть, браузер должен либо тупо пиксель изображения "растягивать", либо интерполяцию делать. Это управляемо, кстати, через CSS. По умолчанию изображение интерполируется. После интерполяции видимое изображение только выглядит похожим на исходное. На деле, там уже другие пиксели, другие цвета. Иными словами, сколь ты битмап не масштабируй, в памяти он останется тем же, ты коверкаешь только его представление финальное. И пипетка работает с финальным представлением. Ты меняешь его размеры, но реальное разрешение у него не меняется. Это как с обычными картинками.