canvaseyeDropper

我需要实现一个吸管工具。 我想要它，所以你点击吸管按钮使其激活，然后使用onmove它将改变我的颜色选择器的颜色，当你点击使用onclick它将使用以下颜色选择颜色选择器：

$('#colorpickerHolder').ColorPickerSetColor(eyeDropperColour); 

变量eyeDropperColour将根据您所使用的颜色像素使用onlick设置。 我想知道我必须根据我拥有的图层来做它：canvas和canvasCursor。

我一直在看这个指南，但我不能让它适用于我的项目？ http://palebluepixel.org/2011/11/16/html5-canvas-eyedropper/

这是我的项目： http ： //www.taffatech.com/Paint.html

我有：

 var eyeDropperActive = false; var eyeDropperColour; 

和：

 $("#brushEyeDropper").click(function() { if ( eyeDropperActive == true) { eyeDropperActive = false; } else if ( eyeDropperActive == false) { eyeDropperActive = true; } }); 

Answer 1

创建canvas“吸管”工具

这是如何读取canvas上任何X / Y处的像素颜色：

  function getPixelColor(x, y) { var pxData = ctx.getImageData(x,y,1,1); return("rgb("+pxData.data[0]+","+pxData.data[1]+","+pxData.data[2]+")"); } 

其余的只是通过点击canvas来控制何时接受颜色。

  var eyedropperIsActive=false; // Activate reading pixel colors when a #startDropper button is clicked $("#startDropper").click(function(e){eyedropperIsActive=true;}); // if the tool is active, report the color under the mouse $("#canvas").mousemove(function(e){handleMouseMove(e);}); // when the user clicks on the canvas, turn off the tool // (the last color will remain selected) $("#canvas").click(function(e){eyedropperIsActive=false;}); 

这里是mousemove事件处理程序，它调用getPixelColor并报告该颜色

  // if the tool is active, report any color under the mouse function handleMouseMove(e){ if(!eyedropperIsActive){return;} mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); // Put your mousemove stuff here var eyedropColor=getPixelColor(mouseX,mouseY); $("#results").css("backgroundColor",getPixelColor(mouseX,mouseY)); } 

这是代码和小提琴： http ： //jsfiddle.net/m1erickson/zpfdv/

           
Click "Activate Eyedropper" to read pixel color under the mouse
 
Click canvas to set the color and de-active the eyedropper
 
 Activate Eyedropper