Making Color Picker Draggable instead of just onclick

Question

So I have a HTML Color picker and it works really well when you simply click on a color, but say you want to drag around the canvas seeing different colors in real-time, how would you go about that with the following code? I can't seem to wrap my head around it even after studding other color pickers.

Here is the code I am working with:

<canvas style="cursor:crosshair;margin-left: 4px;" width="505" height="301" id="canvas_picker"></canvas><br><br><hr><br>
<div id="hex"><font style="font-family: monospace;" color="#f20000">HEX:</font> <input onclick="this.setSelectionRange(0, this.value.length)" id="hexinput" value="#FFFFFF" type="text" readonly></div>
<div id="color-label" style="background-color: #FFFFFF;"></div><br>
<div id="rgb"><font style="font-family: monospace;" color="#f20000">RGB:</font> <input onclick="this.setSelectionRange(0, this.value.length)" id="rgbinput" value="rgb(255, 255, 255)" type="text" readonly></div>
<script type="text/javascript">
    var colorLabel = document.getElementById('color-label');
    var canvas = document.getElementById('canvas_picker').getContext('2d');
    var img = new Image();

    img.src = 'cpb.png';
    
    $(img).load(function(){
      canvas.drawImage(img,0,0);
    });

    function rgbToHex(R,G,B) {
        return toHex(R)+toHex(G)+toHex(B)
    }
    
    function toHex(n) {
      n = parseInt(n,10);
      if (isNaN(n)) return "00";
      n = Math.max(0,Math.min(n,255));
      return "0123456789ABCDEF".charAt((n-n%16)/16)  + "0123456789ABCDEF".charAt(n%16);
    }

    $('#canvas_picker').click(function(event){
        var x = event.pageX - this.offsetLeft;
        var y = event.pageY - this.offsetTop;
        var img_data = canvas.getImageData(x, y, 1, 1).data;
        var R = img_data[0];
        var G = img_data[1];
        var B = img_data[2];  
        var rgb = 'rgb(' + R + ', ' + G + ', ' + B + ')';
        var hex = rgbToHex(R,G,B);

        $('#rgb input').val(rgb);
        $('#hex input').val('#' + hex);
        colorLabel.style.backgroundColor = '#' + hex;
    });     
</script>

dantheman · Accepted Answer · 2020-07-28T12:26:09.863

1

You'd need to use $('#canvas_picker').mousemove(function(event){ instead.

But you would need to also listen for a mousedown and mouseup event as well to only allow the function to run when the mouse is held down. Something like this:

function pickColour(element) {

    var x = event.pageX - element.offsetLeft;
    var y = event.pageY - element.offsetTop;
    var img_data = canvas.getImageData(x, y, 1, 1).data;
    var R = img_data[0];
    var G = img_data[1];
    var B = img_data[2];  
    var rgb = 'rgb(' + R + ', ' + G + ', ' + B + ')';
    var hex = rgbToHex(R,G,B);

    $('#rgb input').val(rgb);
    $('#hex input').val('#' + hex);
    colorLabel.style.backgroundColor = '#' + hex;

}

var canPick = false

$('#canvas_picker').mousedown(function(){
  canPick = true
});   

$('#canvas_picker').mouseup(function(){
  canPick = false
});  

$('#canvas_picker').mouseleave(function(){
  canPick = false
}); 

$('#canvas_picker').on('mousemove', function() {

  if(canPick) {
    pickColour(this);
  }
  
})

edited Jul 28 '20 at 12:26

answered Jul 28 '20 at 11:51

dantheman

3,189
2
10
18

How would I do the mousedown and mouseup events tho, thats where I am stuck at – Crimin4L Jul 28 '20 at 12:11
I've added an example for you – dantheman Jul 28 '20 at 12:21
Thanks so much bud! Really helped me out! For some strange reason I was putting the boolean outside the mousemove instead of inside.... Thank you so much once again! – Crimin4L Jul 28 '20 at 12:32
What about adding a little outlined circle? Would that be easy or no? – Crimin4L Jul 28 '20 at 12:38
You would probably need to create a circle div element then make it move to the cursor position on mousemove. https://stackoverflow.com/questions/3385936/jquery-follow-the-cursor-with-a-div – dantheman Jul 28 '20 at 12:44

Making Color Picker Draggable instead of just onclick

1 Answers1