Получить шестнадцатеричное значение кликаемого по цвету с помощью jQuery - PullRequest
Новая
       43

Получить шестнадцатеричное значение кликаемого по цвету с помощью jQuery

1 голос
/ 07 октября 2011

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

Я знаю, что этовозможно с javascript или jquery, так как у них есть не только множество плагинов для выбора цвета, но у меня есть и расширение для Chrome, которое обладает точно такой же функциональностью.

Есть идеи?

Ответы [ 3 ]

4 голосов
/ 07 октября 2011

Привязать глобальный click или mouseup прослушиватель событий.Затем используйте canvas для получения информации о пикселях.Положение пикселей можно получить с помощью объекта event (event.pageX, event.pageY).

Ниже приведен пример, который должен работать в будущих версиях FireFox .В настоящее время по причинам безопасности метод drawWindow отключен для веб-страниц .Это должно работать в расширениях, все же.Если вы действительно заинтересованы, см. Ссылки для похожих методов в Chrome, Safari и Internet Explorer. 

var canvas = $("<canvas>"); //Create the canvas element

//Create a layer which overlaps the whole window
canvas.css({position:"fixed", top:"0", left:"0",
            width:"100%", height:"100%", "z-index":9001});

//Add an event listener to the canvas element
canvas.click(function(ev){
    var x = ev.pageX, y = ev.pageY;
    var canvas = this.getContext("2d");
    canvas.drawWindow(window, x, y, 1, 1, "transparent");
    var data = canvas.getImageData(0, 0, 1, 1).data;
    var hex = rgb2hex(data[0], data[1], data[2]);
    alert(hex);
    $(this).remove();
});

canvas.appendTo("body:first"); //:first, in case of multiple <body> tags (hmm?)

//Functions used for conversion from RGB to HEX
function rgb2hex(R,G,B){return num2hex(R)+num2hex(G)+num2hex(B);}
function num2hex(n){
    if (!n || !parseInt(n)) return "00";
    n = Math.max(0,Math.floor(Math.round(n),255)).toString(16);
    return n.length == 1 ? "0"+n : n;
}

Ссылки

2 голосов
/ 07 октября 2011

Эти плагины не работают, зная цвет пикселя под мышью;они работают, потому что цвета в средстве выбора расположены в соответствии с математической формулой, и, зная эту формулу и , где вы щелкнули мышью, плагин может выяснить, какой цвет принадлежит ему.JavaScript не дает никакого способа получить изображение страницы или «цвет под курсором».

0 голосов
/ 07 октября 2011

У меня недавно была эта проблема, по умолчанию IE возвращает шестнадцатеричные цвета, тогда как все хорошие браузеры возвращают значения rgb, я просто ставлю условия для работы с обеими строками, это было бы более эффективно ..

как бы я ни думалэта функция делает то, что вам нужно 

function RGBToHex(rgb) { 
var char = "0123456789ABCDEF"; 
return String(char.charAt(Math.floor(rgb / 16))) + String(char.charAt(rgb - (Math.floor(rgb / 16) * 16))); 
}
...