Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save atchyut-re/36efdf1818324abab864e650468a4fe8 to your computer and use it in GitHub Desktop.
Save atchyut-re/36efdf1818324abab864e650468a4fe8 to your computer and use it in GitHub Desktop.
jQuery: Background color picker (pick color from image by clicking on it)
var image = new Image();
image.src = "sample.jpg";
$(image).load(function() {
ctx.drawImage(image, 0, 0);
});
$(canvas).click(function(e) {
var canvasOffset = $(canvas).offset();
var canvasX = Math.floor(e.pageX-canvasOffset.left);
var canvasY = Math.floor(e.pageY-canvasOffset.top);
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var pixels = imageData.data;
var pixelRedIndex = ((canvasY - 1) * (imageData.width * 4)) + ((canvasX - 1) * 4);
var pixelcolor = "rgba("+pixels[pixelRedIndex]+", "+pixels[pixelRedIndex+1]+", "+pixels[pixelRedIndex+2]+", "+pixels[pixelRedIndex+3]+")";
$("body").css("backgroundColor", pixelcolor);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment