Use HTML5 technology to develop your own cool color picker_html5 tutorial skills

You may have seen many color pickers developed using jquery/js. Today we will use HTML5 technology to implement a better color picker ourselves. Hope you all like it!

Copy code

The code is as follows:

R

G< /label>

B

RGB

HEX

The code is very simple and contains two parts, a click element and an element used to display the color selector.

JavaScript code

Copy code

The code is as follows:

$(function(){
var bCanPreview = true; // can preview
// create canvas and context objects
var canvas = document.getElementById('picker');
var ctx = canvas.getContext('2d');
// drawing active image
var image = new Image();
image.onload = function () {
ctx.drawImage( image, 0, 0, image.width, image.height); // draw the image on the canvas
}
// select desired colorwheel
var imagesrc="images/colorwheel1.png";
switch ($(canvas).attr('var')) {
case '2':
imagesrc="images/colorwheel2.png";
break;
case '3' :
imagesrc="images/colorwheel3.png";
break;
case '4':
imagesrc="images/colorwheel4.png";
break;
case ' 5':
imagesrc="images/colorwheel5.png";
break;
}
image.src = imageSrc;
$('#picker').mousemove(function(e ) { // mouse move handler
if (bCanPreview) {
// get coordinates of current position
var canvasOffset = $(canvas).offset();
var canvasX = Math.floor( e.pageX - canvasOffset.left);
var canvasY = Math.floor(e.pageY - canvasOffset.top);
// get current pixel
var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
var pixel = imageData.data;
// update preview color
var pixelColor = "rgb(" pixel[0] ", " pixel[1] ", " pixel[2 ] ")";
$('.preview').css('backgroundColor', pixelColor);
// update controls
$('#rVal').val(pixel[0]) ;
$('#gVal').val(pixel[1]);
$('#bVal').val(pixel[2]);
$('#rgbVal'). val(pixel[0] ',' pixel[1] ',' pixel[2]);
var dColor = pixel[2] 256 * pixel[1] 65536 * pixel[0];
$( '#hexVal').val('#' ('0000' dColor.toString(16)).substr(-6));
}
});
$('#picker') .click(function(e) { // click event handler
bCanPreview = !bCanPreview;
});
$('.preview').click(function(e) { // preview click
$('.colorpicker').fadeToggle("slow", "linear");
bCanPreview = true;
});
});

Everyone As you can see, this is a very short js code that is used to create a new canvas and object, and then we draw a circular color plate. You can choose different color base plates. A parameter is used here to set different options. As follows:

Copy code

The code is as follows:

Now we add events: mousemove, click events. jQuery is used here to display and hide the selector.

Copy code

The code is as follows:

$('.preview').click (function(e) { // preview click $('.colorpicker').fadeToggle("slow", "linear"); bCanPreview = true; });

When our mouse moves On the selected object, we need to refresh the information. For example, the current color

Copy the code

The code is as follows:

$('#picker').mousemove(function(e) { // mouse move handler
if (bCanPreview) {
// get coordinates of current position
var canvasOffset = $ (canvas).offset();
var canvasX = Math.floor(e.pageX - canvasOffset.left);
var canvasY = Math.floor(e.pageY - canvasOffset.top);
/ / get current pixel
var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
var pixel = imageData.data;
// update preview color
var pixelColor = "rgb( " pixel[0] ", " pixel[1] ", " pixel[2] ")";
$('.preview').css('backgroundColor', pixelColor);
// update controls
$('#rVal').val(pixel[0]);
$('#gVal').val(pixel[1]);
$('#bVal').val (pixel[2]);
$('#rgbVal').val(pixel[0] ',' pixel[1] ',' pixel[2]);
var dColor = pixel[2] 256 * pixel[1] 65536 * pixel[0];
$('#hexVal').val('#' ('0000' dColor.toString(16)).substr(-6));
}
});
$('#picker').click(function(e) { // click event handler
bCanPreview = !bCanPreview;
});

CSS code

CSS for different color base plates:

Copy code

The code is as follows:

/* colorpicker styles */
.colorpicker {
background-color: #222222;
border-radius: 5px 5px 5px 5px;
box-shadow: 2px 2px 2px #444444;
color: #FFFFFF;
font-size: 12px;
position: absolute;
width: 460px;
}
#picker {
cursor: crosshair;
float: left;
margin: 10px;
border: 0;
}
.controls {
float: right;
margin: 10px;
}
.controls > div {
border: 1px solid #2F2F2F;
margin-bottom: 5px;
overflow: hidden;
padding: 5px ;
}
.controls label {
float: left;
}
.controls > div input {
background-color: #121212;
border: 1px solid #2F2F2F;
color: #DDDDDD;
float: right;
font-size: 10px;
height: 14px;
margin-left: 6px;
text-align: center;
text-transform: uppercase;
width: 75px;
}
.preview {
background: url("../images/select.png") repeat scroll center center transparent;
border-radius: 3px;
box-shadow: 2px 2px 2px #444444;
cursor: pointer;
height: 30px;
width: 30px;
}

Hope you all like it

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn