CODEWITHSUNDEEP
javascripthtml
Crimin4L
Crimin4L

Reputation: 615

Making Color Picker Draggable instead of just onclick

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>

Upvotes: 0

Views: 641

Answers (1)

dantheman
dantheman

Reputation: 3814

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);
  }
  
})

Upvotes: 1

Related Questions