| 1 |
/*! |
| 2 |
* jQuery ImageColorPicker Plugin v0.3 |
| 3 |
* http://github.com/Skarabaeus/ImageColorPicker |
| 4 |
* |
| 5 |
* Copyright 2010, Stefan Siebel |
| 6 |
* Licensed under the MIT license. |
| 7 |
* http://github.com/Skarabaeus/ImageColorPicker/MIT-LICENSE.txt |
| 8 |
* |
| 9 |
* Released under the MIT |
| 10 |
* |
| 11 |
* Date: Tue May 17 11:20:16 2011 -0700 |
| 12 |
*/ |
| 13 |
(function(){ |
| 14 |
var uiImageColorPicker = function(){ |
| 15 |
|
| 16 |
var _d2h = function(d) { |
| 17 |
var result; |
| 18 |
if (! isNaN( parseInt(d) ) ) { |
| 19 |
result = parseInt(d).toString(16); |
| 20 |
} else { |
| 21 |
result = d; |
| 22 |
} |
| 23 |
|
| 24 |
if (result.length === 1) { |
| 25 |
result = "0" + result; |
| 26 |
} |
| 27 |
return result; |
| 28 |
}; |
| 29 |
|
| 30 |
var _h2d = function(h) { |
| 31 |
return parseInt(h,16); |
| 32 |
}; |
| 33 |
|
| 34 |
var _pointerPos = {}; |
| 35 |
|
| 36 |
var _createImageColorPicker = function(widget) { |
| 37 |
// store 2D context in widget for later access |
| 38 |
widget.ctx = null; |
| 39 |
|
| 40 |
// rgb |
| 41 |
widget.color = [0, 0, 0]; |
| 42 |
|
| 43 |
// create additional DOM elements. |
| 44 |
widget.$canvas = jQuery('<canvas class="ImageColorPickerCanvas"></canvas>'); |
| 45 |
widget.$canvas2 = jQuery('<canvas class="ImageColorPickerCanvasColor"></canvas>'); |
| 46 |
|
| 47 |
// add them to the DOM |
| 48 |
widget.element.wrap('<div class="ImageColorPickerWrapper"></div>'); |
| 49 |
widget.$wrapper = widget.element.parent(); |
| 50 |
widget.$wrapper.append(widget.$canvas); |
| 51 |
widget.$wrapper.append(widget.$canvas2); |
| 52 |
|
| 53 |
if (typeof(widget.$canvas.get(0).getContext) === 'function') { // FF, Chrome, ... |
| 54 |
widget.ctx = widget.$canvas.get(0).getContext('2d'); |
| 55 |
widget.ctx2 = widget.$canvas2.get(0).getContext('2d'); |
| 56 |
|
| 57 |
// this does not work yet! |
| 58 |
} else { |
| 59 |
widget.destroy(); |
| 60 |
if (console) { |
| 61 |
console.log("ImageColor Picker: Can't get canvas context. Use " |
| 62 |
+ "Firefox, Chrome or include excanvas to your project."); |
| 63 |
} |
| 64 |
|
| 65 |
} |
| 66 |
|
| 67 |
// draw the image in the canvas |
| 68 |
var img = new Image(); |
| 69 |
img.src = widget.element.attr("src"); |
| 70 |
widget.$canvas.attr("width", img.width); |
| 71 |
widget.$canvas.attr("height", img.height); |
| 72 |
|
| 73 |
//the floating color |
| 74 |
widget.$canvas2.attr("width", "40"); |
| 75 |
widget.$canvas2.attr("height", "40"); |
| 76 |
|
| 77 |
var canvas = widget.$canvas; |
| 78 |
var mouse={x:0,y:0} //make an object to hold mouse position |
| 79 |
|
| 80 |
canvas.onmousemove=function(e){mouse={x:e.pageX-this.offsetLeft,y:e.pageY-this.offsetTop};} |
| 81 |
canvas.onmousemove=function(e){mouse={x:e.pageX-this.offsetLeft,y:e.pageY-this.offsetTop};} |
| 82 |
|
| 83 |
|
| 84 |
|
| 85 |
|
| 86 |
widget.ctx.drawImage(img, 0, 0); |
| 87 |
|
| 88 |
// get the image data. |
| 89 |
try { |
| 90 |
try { |
| 91 |
widget.imageData = widget.ctx.getImageData(0, 0, img.width, img.height); |
| 92 |
} catch (e1) { |
| 93 |
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); |
| 94 |
widget.imageData = widget.ctx.getImageData(0, 0, img.width, img.height); |
| 95 |
} |
| 96 |
} catch (e2) { |
| 97 |
widget.destroy(); |
| 98 |
if (console) { |
| 99 |
console.log("ImageColor Picker: Unable to access image data. " |
| 100 |
+ "This could be either due " |
| 101 |
+ "to the browser you are using (IE doesn't work) or image and script " |
| 102 |
+ "are saved on different servers or you run the script locally. "); |
| 103 |
} |
| 104 |
} |
| 105 |
|
| 106 |
// hide the original image |
| 107 |
widget.element.hide(); |
| 108 |
|
| 109 |
// for usage in events |
| 110 |
var that = widget; |
| 111 |
|
| 112 |
widget.$canvas.bind("mousemove", function(e){ |
| 113 |
var point = imageCoordinates( that, e.pageX, e.pageY ); |
| 114 |
var color = lookupColor( that.imageData, point ); |
| 115 |
|
| 116 |
updateCurrentColor( that, color.red, color.green, color.blue, point ); |
| 117 |
}); |
| 118 |
|
| 119 |
widget.$canvas.bind("click", function(e){ |
| 120 |
var point = imageCoordinates( that, e.pageX, e.pageY ); |
| 121 |
var color = lookupColor( that.imageData, point ); |
| 122 |
|
| 123 |
updateSelectedColor( that, color.red, color.green, color.blue ); |
| 124 |
that._trigger("afterColorSelected", 0, that.selectedColor()); |
| 125 |
}); |
| 126 |
|
| 127 |
widget.$canvas.bind("mouseleave", function(e){ |
| 128 |
widget.$canvas2.css("display", "none"); |
| 129 |
}); |
| 130 |
|
| 131 |
// hope that helps to prevent memory leaks |
| 132 |
jQuery(window).unload(function(e){ |
| 133 |
that.destroy(); |
| 134 |
}); |
| 135 |
}; |
| 136 |
|
| 137 |
// for pageX and pageY, determine image coordinates using offset |
| 138 |
var imageCoordinates = function( widget, pageX, pageY ) { |
| 139 |
var offset = widget.$canvas.offset(); |
| 140 |
|
| 141 |
return { x: Math.round( pageX - offset.left ), |
| 142 |
y: Math.round( pageY - offset.top ) }; |
| 143 |
} |
| 144 |
|
| 145 |
// lookup color values for point [x,y] location in image |
| 146 |
var lookupColor = function( imageData, point) { |
| 147 |
var pixel = ((point.y * imageData.width) + point.x) * 4; |
| 148 |
|
| 149 |
return { red: imageData.data[pixel], |
| 150 |
green: imageData.data[(pixel + 1)], |
| 151 |
blue: imageData.data[(pixel + 2)] } |
| 152 |
|
| 153 |
} |
| 154 |
|
| 155 |
var updateCurrentColor = function(widget, red, green, blue, point) { |
| 156 |
var c = widget.ctx; |
| 157 |
var c2 = widget.ctx2; |
| 158 |
var canvasWidth = widget.$canvas.attr("width"); |
| 159 |
var canvasHeight = widget.$canvas.attr("height"); |
| 160 |
widget.$canvas2.css("display", "block"); |
| 161 |
|
| 162 |
|
| 163 |
// draw current Color |
| 164 |
c2.fillStyle = "rgb(" + red + "," + green + "," + blue + ")"; |
| 165 |
c2.fillRect (0, 0, 30, 30); |
| 166 |
|
| 167 |
// draw border |
| 168 |
c2.lineWidth = "3" |
| 169 |
c2.lineJoin = "round"; |
| 170 |
c2.strokeStyle="#FFFFFF"; |
| 171 |
c2.strokeRect (0, 0, 30, 30); |
| 172 |
|
| 173 |
widget.$canvas2.css("top", (point.y+30) - jQuery(widget.$canvas).parent().scrollTop() ); |
| 174 |
widget.$canvas2.css("left", (point.x+30) - jQuery(widget.$canvas).parent().scrollLeft() ); |
| 175 |
|
| 176 |
} |
| 177 |
|
| 178 |
var updateSelectedColor = function(widget, red, green, blue) { |
| 179 |
jQuery("#wpide_color_assist_input").css("borderRight", "30px solid #" + _d2h(red) + _d2h(green) + _d2h(blue) ); |
| 180 |
|
| 181 |
// set new selected color |
| 182 |
var newColor = [red, green, blue]; |
| 183 |
widget.color = newColor; |
| 184 |
} |
| 185 |
|
| 186 |
return { |
| 187 |
// default options |
| 188 |
options: { |
| 189 |
|
| 190 |
}, |
| 191 |
|
| 192 |
_create: function() { |
| 193 |
if (this.element.get(0).tagName.toLowerCase() === 'img') { |
| 194 |
if (this.element.get(0).complete) { |
| 195 |
_createImageColorPicker(this); |
| 196 |
} else { |
| 197 |
this.element.bind('load', { that: this }, function(e){ |
| 198 |
var that = e.data.that; |
| 199 |
_createImageColorPicker(that); |
| 200 |
}); |
| 201 |
} |
| 202 |
} |
| 203 |
}, |
| 204 |
|
| 205 |
destroy: function() { |
| 206 |
// default destroy |
| 207 |
jQuery.Widget.prototype.destroy.apply(this, arguments); |
| 208 |
|
| 209 |
// remove possible large array with pixel data |
| 210 |
this.imageData = null; |
| 211 |
|
| 212 |
// remove additional elements |
| 213 |
this.$canvas.remove(); |
| 214 |
this.element.unwrap(); |
| 215 |
this.element.show(); |
| 216 |
}, |
| 217 |
|
| 218 |
selectedColor: function() { |
| 219 |
return "#" + _d2h(this.color[0]) + _d2h(this.color[1]) + _d2h(this.color[2]); |
| 220 |
} |
| 221 |
|
| 222 |
}; |
| 223 |
}(); |
| 224 |
jQuery.widget("ui.ImageColorPicker", uiImageColorPicker); |
| 225 |
})(); |
| 226 |
|
| 227 |
|
| 228 |
|
| 229 |
|
| 230 |
|
| 231 |
|
| 232 |
|
