How to develop a cool color picker using HTML5 technology
How to use HTML5 technology to develop a cool color picker, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.
You may have seen a lot of color selectors developed using jquery/js, and today we will use HTML5 technology to implement a better color picker ourselves. I hope you like it!
The code is as follows:
R
G
B
RGB
HEX
The code is simple and consists of two parts, one click element and one element used to display the color picker.
JavaScript 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 '2clients:
Imagesrc= "images/colorwheel2.png"
Break
Case '3pm:
Imagesrc= "images/colorwheel3.png"
Break
Case '4pm:
Imagesrc= "images/colorwheel4.png"
Break
Case '5clients:
Imagesrc= "images/colorwheel5.png"
Break
}
Image.src = imageSrc
$('# picker') .mousemove (function (e) {/ / mousemove 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] + ")"
$('.clients') .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
});
$('.clients') .click (function (e) {/ / preview click
('.colorpicker') .fadeToggle ("slow", "linear")
BCanPreview = true
});
});
As you can see, this is a very short js code that is used to create new canvases and objects, and then we draw a circular color board. You can choose different color backplane. A parameter is used here to set different choices. As follows:
The code is as follows:
Let's add an event: the mousemove,click event. JQuery is used here to show and hide selectors.
The code is as follows:
$('.colors') .click (function (e) {/ / preview click $('.colorpicker') .fadeToggle ("slow", "linear"); bCanPreview = true;})
When we move the mouse over the selected object, we need to refresh the information, for example, the current color
The code is as follows:
$('# picker') .mousemove (function (e) {/ / mousemove 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] + ")"
$('.clients') .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 of different color backplane:
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
}
After reading the above, have you mastered how to use HTML5 technology to develop a cool color picker? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!
