Ich möchte wissen, wie man eine Farbe Picker mit jQuery, die Sie irgendwo auf der Seite klicken und geben Sie die Hex-Farbwert der Farbe, die Sie angeklickt wird zu machen.
Ich weiß, dass es möglich ist, entweder mit Javascript oder Jquery als nicht nur sie haben viele Farb-Picker-Plugins, aber ich habe und Erweiterung für Chrome, dass die gleiche Funktionalität hat.
Irgendwelche Ideen?
Binden Sie eine globale click ou mouseup Ereignishörer. Verwenden Sie dann canvas um die Pixelinformationen zu erhalten. Die Pixelpositionen können über die event Objekt ( event.pageX , event.pageY ).
Im Folgenden finden Sie ein Beispiel, das in folgenden Fällen funktionieren sollte zukünftige Versionen von FireFox . Derzeit sind für Sicherheitsgründe die drawWindow Methode ist deaktiviert für Webseiten . Es sollte aber in Erweiterungen funktionieren. Wenn Sie wirklich daran interessiert sind, sehen Sie sich die Links für die ähnlichen Methoden in Chrome, Safari und Internet Explorer an.
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;
}canvas
Diese Plugins funktionieren nicht, indem sie die Farbe des Pixels unter der Maus kennen; sie funktionieren, weil die Farben in der Auswahlliste nach einer mathematischen Formel angeordnet sind, und indem sie diese Formel kennen und wobei Sie mit der Maus geklickt haben, kann das Plugin herausfinden, welche Farbe dort hingehört. Mit JavaScript haben Sie keine Möglichkeit, ein Bild der Seite oder die "Farbe unter dem Cursor" zu erhalten.
Ich hatte dieses Problem vor kurzem, standardmäßig IE gibt Hex-Farben zurück, während alle guten Browser rgb-Werte zurückgeben, ich einfach Bedingungen setzen, um mit beiden Zeichenfolgen zu behandeln, wäre dies effizienter.
Ich denke jedoch, dass diese Funktion den Zweck erfüllt, wenn Sie sie wirklich brauchen
function RGBToHex(rgb) {
var char = "0123456789ABCDEF";
return String(char.charAt(Math.floor(rgb / 16))) + String(char.charAt(rgb - (Math.floor(rgb / 16) * 16)));
} CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
