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

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



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



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



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



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

1466   9  

9 ответов:

это невозможно с 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);

а затем просто использовать предыдущий метод, объясненный для холстов. Если вы должны быть в состоянии преобразовать в различные представления значений цвета, попробуйте my цвета.js библиотека.

кроме того, вы никогда не сможете поддерживать IE

66  
2010-10-13 23:14:33

используя технику под названием Браузер Синхронизации Атаки, можно (вроде) определить цвет любого пикселя, даже на фреймы.

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

более подробная информация в этом документе (pdf):http://www.contextis.com/documents/2/Browser_Timing_Attacks.pdf

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

13  
2016-09-16 19:11:21

объединение различных ссылок, найденных здесь в 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> над изображением, это тоже возможно. Надеюсь, я вам помог.

11  
2012-01-10 15:22:58

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

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

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

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

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

6  
2010-01-03 21:55:47

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

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

надеюсь, что это помогает.

4  
2010-01-05 00:03:49

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

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

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

3  
2010-01-07 04:10:56

см. новый элемент ввода [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), то можно выбрать цвет из любой точки на вашем экран. Еще не кросс-браузер, но чистый и основанный на стандартах.

3  
2013-03-03 06:11:39

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

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

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

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

2  
2012-03-19 23:29:04

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

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

используя 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's 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;

демо

1  
2017-03-13 23:16:40

Comments

    Ничего не найдено.
Click here to cancel reply.