JavaScript eyedropper (указать цвет пикселя под курсором мыши)

Я ищу инструмент eyedropper, который дает мне шестнадцатеричное значение пикселя, на котором находится курсор мыши, в JavaScript для CMS.

Для Firefox существует отличное расширение ColorZilla, которое делает именно это. Тем не менее, это только FF, и я действительно хотел бы доставить инструмент вместе с CMS.

У голландского разработчика была очень умная идея с использованием комбинации Ajax и PHP imagecolorat() чтобы узнать цвет пикселя на изображении. Но это ограничивает диапазон изображений, которые я могу получить на стороне сервера, и я действительно мечтаю о универсальном инструменте.

Я буду работать с одним из этих подходов, но предпочел бы использовать кросс-браузерный, Javascript или Flash-способ, который не требует загрузки на стороне сервера и без установки расширений.

Меня также интересуют любые специфические для IE решения, которые делают то, что может сделать ColorZilla, - я мог бы жить только с поддержкой IE и FF, хотя решение для перекрестного браузера, конечно, было бы идеальным.

ОТВЕТЫ

Ответ 1

Это невозможно с JavaScript, поскольку это противоречит междоменной безопасности. Было бы очень плохо, если бы вы знали, какие пиксели составили изображение, http://some-other-host/yourPassword.png. Вы можете указать цвет пикселя под мышью, если мышь находится над холстом или элементом изображения того же домена (или элементом изображения другого домена, который подается с заголовком Access-Control-Allow-Origin: *). В случае с холстом вы делаете 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 не поможет, поскольку оно не может считывать данные пикселов документа.

Ответ 2

Объединяя различные ссылки, найденные здесь в StackOverflow и на других сайтах, я сделал это с помощью javascript и JQuery:

<html>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script src="jquery.js"></script>
<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var img = new Image();
        img.src = 'photo_apple.jpg';
        context.drawImage(img, 0, 0);
    };

    function findPos(obj){
    var current_left = 0, current_top = 0;
    if (obj.offsetParent){
        do{
            current_left += obj.offsetLeft;
            current_top += obj.offsetTop;
        }while(obj = obj.offsetParent);
        return {x: current_left, y: current_top};
    }
    return undefined;
    }

    function rgbToHex(r, g, b){
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
    }

$('#myCanvas').click(function(e){
    var position = findPos(this);
    var x = e.pageX - position.x;
    var y = e.pageY - position.y;
    var coordinate = "x=" + x + ", y=" + y;
    var canvas = this.getContext('2d');
    var p = canvas.getImageData(x, y, 1, 1).data;
    var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
    alert("HEX: " + hex);
});
</script>
<img src="photo_apple.jpg"/>
</body>
</html>

Это мое полное решение. Здесь я использовал только холст и одно изображение, но если вам нужно использовать <map> по изображению, это тоже возможно. Надеюсь, я помог.

Ответ 3

Используя технику, называемую Timer Attack Attack, можно (сортировать) определять цвет любого пикселя, даже на iframes.

В принципе, этот метод измеряет время визуализации SVG-фильтра на элементе, а не самого цвета (requestAnimationFrame() позволяет измерять время с гораздо лучшей точностью, чем setTimeout()). В зависимости от текущего пиксельного цвета фильтр занимает больше или меньше времени для применения. Это позволяет определить, является ли пиксель тем же цветом, что и известный цвет - например, черный или белый.

Подробнее в этом техническом документе (pdf): http://www.contextis.com/documents/2/Browser_Timing_Attacks.pdf

Кстати: да, это дыра в браузере, но я не вижу, как производители браузеров могут ее исправлять.

Ответ 4

Я согласен с очень подробным ответом, предоставленным Илией. Кроме того, я бы сказал, что вам не нужен холст, когда дело касается изображений. Как вы сами заявили, у вас есть эти изображения, доступные из php, и вы можете выполнять запрос цвета на сервере.

Я бы предположил, что вы справляетесь с этой проблемой с помощью внешнего инструмента - это делает его даже независимым от браузера (но зависит от ОС): напишите небольшой инструмент (например, в С#), который выполняет запрос цвета для вас, вызывается с помощью ярлык и передает цвет вашему серверу. Сделайте инструмент доступным для загрузки на CMS.

Еще один подход, который я использовал для CMS, заключался в том, чтобы "украсть" цвета, проанализировав CSS: прецедент должен был сделать цвета уже существующего веб-сайта доступными в качестве цветовой палитры для моего приложения:

  • Я попросил пользователя указать URL-адрес из целевой системы - в основном домашняя страница компании
  • Я проанализировал страницу, чтобы найти все определения цветов во всех встроенных стилях и связанных стилях.
  • (вы можете легко распространить это на все ссылки на изображения)
  • результат был приятной цветовой палитрой со всеми цветами собора, чтобы выбрать из

Может быть, это тоже решение для вашей CMS?

Ответ 5

Я не знаю, возможно ли это, но если ваши страницы статичны, вы можете сохранить снимок экрана каждого из них (или, возможно, один для каждого разрешения браузера/экрана?), а затем использовать AJAX для отправки курсора координирует сервер и возвращает цвет пикселя с помощью PHP imagecolorat().

Чтобы сделать скриншоты, вы можете использовать Selenium IDE, как описано .

Надеюсь, что это поможет.

Ответ 6

Чтобы добавить к предыдущим ответам -

Один из способов думать об этой проблеме состоит в том, что вы хотите иметь возможность делать захват экрана области 1px на 1px. Довольно распространенный метод захвата областей экрана (например, из систем отчетов об ошибках в Интернете) заключается в использовании подписанного Java-апплета и java.awt.Robot для захвата изображения. Если вы подпишете апплет, ваши пользователи получат диалог "доверяете ли вы этому приложению" (с флажком "всегда доверять приложениям из этого издателя" ), а затем сможете использовать этот инструмент.

Затем вы можете передать результат на JavaScript с помощью LiveConnect (документы старые, но Java-аплеты все еще поддерживают это), или вы можете отправить их на свой сервер. Аналогично, вы можете вызвать Java-апплет из JavaScript.

Ответ 7

См. новый элемент ввода [type = color] HTML5: http://www.w3.org/TR/html-markup/input.color.html, http://demo.hongkiat.com/html5-form-input-type/index2.html.

Теперь он работает, по крайней мере, в Chrome (протестирован в Ubuntu, должен работать и для Windows). Он запускает диалог выбора цвета , предоставляемый операционной системой. Если в этом диалоговом окне есть пипетка (это для Gnome), тогда можно выбрать цвет из любой точки на экране. Не кросс-браузер, но чистый и основанный на стандартах.

Ответ 8

В качестве меры предосторожности вы не можете захватить пиксели экрана с помощью Javascript (чтобы разработчики не могли делать снимки ваших персональных данных), но вы МОЖЕТЕ сделать это во Flash - вы можете получить пиксельные данные в контейнере Flash, используя flash.display.BitmapData.

Отъезд http://www.sephiroth.it/tutorials/flashPHP/print_screen/ - Я использовал его во Flash-проектах WYSYWIG для сохранения изображений на сервере LAMP (PHP).

Проблема с использованием Flash заключается в том, что она не поддерживается на iOS-устройствах, которые чрезвычайно популярны сейчас и стоят того, чтобы их развивать. Вспышка идет по трубам.

Метод на основе холста, безусловно, будет хорошим, если бы все ваши посетители имели современные веб-браузеры, поддерживающие теги canvas и JavaScript.

Ответ 9

Нет встроенного метода DOM для получения цвета элемента DOM (кроме изображений или <canvas>) в определенном месте пикселя.

Таким образом, чтобы сделать это, мы должны использовать что-то вроде HTML2Canvas или DOM Panda, чтобы снять "скриншот" нашего веб-сайта, получить местоположение щелчка пользователя и получить цвет пикселя "снимок экрана" в этом конкретном месте.

Используя HTML2Canvas (версия 0.5.0-beta3), вы можете сделать что-то вроде этого:

// Take "screenshot" using HTML2Canvas
var screenshotCanvas,
    screenshotCtx,
    timeBetweenRuns = 10,
    lastTime = Date.now();
function getScreenshot() {
    // Limit how soon this can be ran again
    var currTime = Date.now();
    if(currTime - lastTime > timeBetweenRuns) {
        html2canvas(document.body).then(function(canvas) {
            screenshotCanvas = canvas;
            screenshotCtx = screenshotCanvas.getContext('2d');
        });
        lastTime = currTime;
    }
}
setTimeout(function() { // Assure the initial capture is done
    getScreenshot();
}, 100);

// Get the user click location
document.onclick = function(event) {
    var x = event.pageX,
        y = event.pageY;

    // Look what color the pixel at the screenshot is
    console.log(screenshotCtx.getImageData(x, y, 1, 1).data);
}


// Update the screenshot when the window changes size
window.onresize = getScreenshot;

Демо