Yet Another jQuery Photoshop Like Color Picker Plugin
Yes, there are many different color picker widgets out there implemented using JavaScript. Yet this one is different with any of them from the root. As you might have noticed, yes, it's implemented using the HTML5 <canvas> element. The transparent image based color picker has a big drawback: it's hard to resize. You always limited by the image size when you want to display a proper-sized color picker for you application. But canvas based color picker is different. You can change the color picker to any size you want.
Many demos and demo source code are provided in the following section. They are all alive for you to try. Detailed document and source code are also available for download.
-
Simple popup color picker linked to DIV element
Click MeSource Code:$(".cp2").CanvasColorPicker();
-
Simple popup color picker linked to INPUT element
Source Code:$(".cp3").CanvasColorPicker();
-
Flat mode color picker with different size:
70x3090x60140x100280x140340x200This is the test text for Flat mode color picker. When color is changing, the color of this text will be changed as well.Source Code:$(".cp1").CanvasColorPicker({ flat:true, onColorChange:function(rgb,hsv){ $(".cp1-preview").css("color","RGB(" + rgb.r + "," + rgb.g + "," + rgb.b + ")"); $(".cp1-preview pre") .css("color","rgb(0,0,0)") .css("background-color","RGB(" + rgb.r + "," + rgb.g + "," + rgb.b + ")"); } });
-
Customized Color Picker
Click MeSource Code:$(".cp5").CanvasColorPicker({ width:300, height:160, color:{r:64,g:255,b:255}, drawColorMapPointer:function(ctx,w,h,x,y,l){ if ( this.icon == null ){ this.icon = document.createElement("canvas"); this.icon.width = "16"; this.icon.height = "16"; var ctx1 = this.icon.getContext("2d"); ctx1.beginPath(); ctx1.strokeStyle = "rgb(255,255,255)"; ctx1.moveTo(0,0);ctx1.lineTo(16,16); ctx1.moveTo(0,16);ctx1.lineTo(16,0); ctx1.stroke(); } ctx.drawImage(this.icon,x-8,y-8); }, drawHueMapPointer:function(ctx,w,h,x,y,l){ if ( this.icon == null ){ this.icon = document.createElement("canvas"); this.icon.width = "8"; this.icon.height = "8"; var ctx1 = this.icon.getContext("2d"); ctx1.beginPath(); ctx1.strokeStyle = "rgb(255,255,255)"; ctx1.moveTo(0,0);ctx1.lineTo(8,8); ctx1.moveTo(0,8);ctx1.lineTo(8,0); ctx1.stroke(); } ctx.drawImage(this.icon,x-4,y-4); } });
-
Another Customized Color Picker
Click MeSource Code:$(".cp6").CanvasColorPicker({ width:300,height:150, drawColorMapPointer:function(ctx,w,h,x,y,l){ ctx.beginPath(); ctx.lineWidth = 1; ctx.strokeStyle = ( l < 128 ) ? "rgb(255,255,255)" : "rgb(0,0,0)"; ctx.moveTo(x+0.5,0.5); ctx.lineTo(x+0.5,h-0.5); ctx.moveTo(0.5,y + 0.5); ctx.lineTo(w-0.5,y+0.5); ctx.stroke(); } });
Canvas Color Picker Document
Options | Default value | Description |
---|---|---|
flat | false | Set to true to make the color picker showing in current page. The matched elements will become the container of the color picker and the size of the matched elements is the size of the color picker. |
width | 400 | The width of the color picker. If the color picker is in flat mode, this value will be ignored and the matched element width will be used instead. The minimum width of a color picker is 60. Any setting with less than 60 width will be adjusted to 60. |
height | 400 | The height of the color picker. If the color picker is in flat mode, this value will be ignored and the matched element height will be used instead. The minimum height of a color picker is 30. Any setting with less than 30 height will be adjusted to 30. |
color | rgb(0,0,0) | Initial color when the color picker is visible. If the matched element is an input box, the initial color will be the value of the input text if the text can be parsed as a valid color value like #FFFFFF |
showColor | true | Flag to show or hide the color value. By default it will show the color value, however these flag will be auto-overwritten to false when there is not enough space to show it. It will be set to false when width of the color picker is less than 200 or height of the color picker is less than 100. |
showRGB | true | Flag to show or hide the individual R,G,B channel value. By default it will show the R,G,B value, however these flag will be auto-overwritten to false when there is not enough space to show it. It will be set to false when width of the color picker is less than 200 or height of the color picker is less than 150. |
showHSB | true | Flag to show or hide the individual hue, saturation and brightness value. By default it will show the H,S,B value, however these flag will be auto-overwritten to false when there is not enough space to show it. It will be set to false when width of the color picker is less than 200 or height of the color picker is less than 150. |
showButtons | true | Flag to show or hide the OK, Cancel button. By default it will show these two buttons. However this flag will be auto-overwritten to false when there is not enough space to show it. It will be set to false when width of the color picker is less than 200 or height of the color picker is less than 150. |
showPreview | true | Flag to show or hide the preview color box. By default it will show the preview color box. However this flag will be auto-overwritten to false when there is not enough space to show it. It will be set to false when width of the color picker is less than 200 or height of the color picker is less than 100. |
onColorChange | callback function |
Callback function triggered when color is changed.$(".cp6").CanvasColorPicker({ onColorChange: function(RGB,HSB){ // RGB, current color in rgb format: {r,g,b} // HSB: current color in hsb format: {h,s,b} // Your code starts from here } }); |
onOK | callback function |
Callback function triggered when OK button is clicked.$(".cp6").CanvasColorPicker({ onOK: function(RGB,HSB){ // RGB, current color in rgb format: {r,g,b} // HSB: current color in hsb format: {h,s,b} // Your code starts from here // return true will hide the color picker, // false will not hide the color picker } }); |
onCancel | callback function |
Callback function triggered when Cancel button is clicked.$(".cp6").CanvasColorPicker({ onCancel: function(RGB,HSB){ // RGB, original color in rgb format: {r,g,b} // HSB: original color in hsb format: {h,s,b} // Your code starts from here // return true will hide the color picker, // false will not hide the color picker } }); |
drawColorMapPointer | callback function |
Callback function triggered to draw a customized color map pointer.$(".cp6").CanvasColorPicker({ drawColorMapPointer: function(context,width,height,x,y,luminosity){ // context : Canvas context of the color map // width : width of color map canvas // height : height of color map canvas // x : Horizontal position relative to color map canvas // y : Vertical position relative to color map canvas // luminosity : Calculated luminosity value of the color in (x,y) // position of color map canvas // Your code starts from here } }); |
drawHueMapPointer | callback function |
Callback function triggered to draw a customized hue map pointer.$(".cp6").CanvasColorPicker({ drawHueMapPointer: function(context,width,height,x,y,luminosity){ // context : Canvas context of the hue map // width : width of hue map canvas // height : height of hue map canvas // x : Horizontal position relative to hue map canvas // y : Vertical position relative to hue map canvas // luminosity : Calculated luminosity value of the color in (x,y) // position of hue map canvas // Your code starts from here } }); |