Глазная пипетка JavaScript (говорят цвет пикселя под курсором мыши),
Я ищу инструмент "глазной пипетки", который дает мне шестнадцатеричное значение пикселя, курсор мыши находится под в JavaScript для CMS.
Для Firefox существует превосходное расширение ColorZilla, которое делает точно это. Однако это - FF только, конечно, и я действительно хотел бы поставить инструмент наряду с CMS.
У голландского разработчика была очень умная мысль использовать комбинацию Ajax и PHP's imagecolorat() для обнаружения Пикселя окрашивают на изображении. Но это ограничивает диапазон изображениями, я могу получить доступ к стороне сервера, и я действительно мечтаю об универсальном инструменте.
Я буду работать с одним из этих подходов, но очень предпочел бы перекрестный браузер, JavaScript или основанный на Flash путь, который не требует никакой игры серверной стороны и никакой установки расширений.
Я также интересуюсь любым IE определенные решения, которые делают то, что может сделать ColorZilla - я мог жить с поддержкой IE и FF только, хотя перекрестное решение для браузера, конечно, будет идеально.
4 ответа
Это невозможно с JavaScript, поскольку это противоречит междоменной безопасности. Было бы очень плохо, если бы вы знали, какие пиксели составляют изображение, http: //some-other-host/yourPassword.png . Вы можете определить цвет пикселя под мышью только в том случае, если мышь находится над холстом или элементом изображения того же домена (или элементом изображения другого домена, который обслуживается с помощью Access-Control-Allow- Источник: * заголовок). В случае холста вы должны сделать canvasElement.getContext ('2d'). GetImageData (x, y, 1, 1) .data . В случае изображений вам нужно будет нарисовать их на холсте с помощью:
var canvas = document.createElement("canvas");
canvas.width = yourImageElement.width;
canvas.height = yourImageElement.height;
canvas.getContext('2d').drawImage(yourImageElement, 0, 0);
А затем просто используйте предыдущий метод, описанный для холстов. Если у вас должна быть возможность конвертировать в различные представления значений цвета, попробуйте мою библиотеку color.js .
Кроме того, вы никогда не сможете поддерживать IE <9 (при условии, что IE9 поддерживает холст), а использование Flash не поможет, так как он также не может считывать пиксельные данные документа.
Я согласен с очень подробным ответом, предоставленным Илией. Кроме того, я бы сказал, что холст не нужен, когда речь идет об изображениях. Как вы сами сказали, у вас есть эти изображения, доступные в php, и вы можете делать цветной запрос на сервере.
Я бы предложил вам решить эту проблему с помощью внешнего инструмента - это делает его даже браузером indepedent (но зависимым от операционной системы): пишите небольшой инструмент (например, в c#), который делает цветной запрос за вас, вызывается с помощью ярлыка и отправляет цвет на ваш сервер. Сделайте инструмент доступным для скачивания на вашем CMS.
Другим подходом, который я использовал для CMS, было "кража" цветов при разборе CSS: дело в том, чтобы сделать цвета уже существующего сайта доступными в качестве цветовой палитры для моего приложения:
- Я попросил пользователя предоставить URL из целевой системы - в основном домашнюю страницу компании
- Я проанализировал страницу, чтобы найти все определения цветов во всех встроенных стилях и связанных стилях
- (вы можете легко расширить это на все связанные изображения)
- в результате получилась хорошая цветовая палитра со всеми цветами копоратов на выбор
Может быть, это также решение для вашей CMS?
Я не знаю, возможно ли это, но если ваши страницы статичны, вы могли бы сохранить скриншот изображения каждой из них (или, может быть, по одному для каждого браузера/разрешения экрана? ), а затем использовать AJAX для отправки координат курсора на сервер и возврата цвета пикселя с помощью PHP's imagecolorat().
Для получения скриншотов можно использовать Selenium IDE, как описано здесь.
Надеюсь, это поможет.
.Чтобы добавить к предыдущим ответам -
Один из способов подумать об этой проблеме состоит в том, что вы хотите иметь возможность сделать снимок экрана с областью 1px на 1px. Достаточно распространенный метод захвата областей экрана (например, из веб-систем сообщений об ошибках) заключается в использовании подписанного Java-апплета и java.awt.Robot для захвата изображения. Если вы подпишете апплет, ваши пользователи получат диалоговое окно «доверяете ли вы этому приложению» (с флажком «всегда доверять приложениям от этого издателя»), а затем смогут использовать инструмент.
Затем вы можете передать результат в JavaScript, используя LiveConnect (документы старые, но Java-апплеты все еще поддерживают это), или вы можете отправить его на свой сервер. Точно так же вы можете вызвать Java-апплет из JavaScript.