Is it possible to get the RGB value pixel under the mouse? Is there a complete example of this? Here's what I have so far:
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.src = 'Your URL';
img.onload = function(){
ctx.drawImage(img,0,0);
};
canvas.onmousemove = function(e) {
var mouseX, mouseY;
if(e.offsetX) {
mouseX = e.offsetX;
mouseY = e.offsetY;
}
else if(e.layerX) {
mouseX = e.layerX;
mouseY = e.layerY;
}
var c = ctx.getImageData(mouseX, mouseY, 1, 1).data;
$('#ttip').css({'left':mouseX+20, 'top':mouseY+20}).html(c[0]+'-'+c[1]+'-'+c[2]);
};
}
This question is related to
javascript
html
jquery
canvas
getimagedata
@Wayne Burkett's answer is good. If you wanted to also extract the alpha value to get an rgba color, we could do this:
var r = p[0], g = p[1], b = p[2], a = p[3] / 255;
var rgba = "rgb(" + r + "," + g + "," + b + "," + a + ")";
I divided the alpha value by 255 because the ImageData object stores it as an integer between 0 - 255, but most applications (for example, CanvasRenderingContext2D.fillRect()) require colors to be in valid CSS format, where the alpha value is between 0 and 1.
(Also remember that if you extract a transparent color and then draw it back onto the canvas, it will overlay whatever color is there previously. So if you drew the color rgba(0,0,0,0.1) over the same spot 10 times, it would be black.)
If you need to get the average color of a rectangular area, rather than the color of a single pixel, please take a look at this other question:
JavaScript - Get average color from a certain area of an image
Anyway, both are done in a very similar way:
To get the color of a single pixel, you would first draw that image to a canvas, which you have already done:
const image = document.getElementById('image');
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const width = image.width;
const height = image.height;
canvas.width = width;
canvas.height = height;
context.drawImage(image, 0, 0, width, height);
And then get the value of a single pixel like this:
const data = context.getImageData(X, Y, 1, 1).data;
// RED = data[0]
// GREEN = data[1]
// BLUE = data[2]
// ALPHA = data[3]
You need to use this same CanvasRenderingContext2D.getImageData() to get the values of the whole image, which you do by changing its third and fourth params. The signature of that function is:
ImageData ctx.getImageData(sx, sy, sw, sh);
sx: The x coordinate of the upper left corner of the rectangle from which the ImageData will be extracted.sy: The y coordinate of the upper left corner of the rectangle from which the ImageData will be extracted.sw: The width of the rectangle from which the ImageData will be extracted.sh: The height of the rectangle from which the ImageData will be extracted.You can see it returns an ImageData object, whatever that is. The important part here is that that object has a .data property which contains all our pixel values.
However, note that .data property is a 1-dimension Uint8ClampedArray, which means that all the pixel's components have been flattened, so you are getting something that looks like this:
Let's say you have a 2x2 image like this:
RED PIXEL | GREEN PIXEL
BLUE PIXEL | TRANSPARENT PIXEL
Then, you will get them like this:
[ 255, 0, 0, 255, 0, 255, 0, 255, 0, 0, 255, 255, 0, 0, 0, 0 ]
| RED PIXEL | GREEN PIXEL | BLUE PIXEL | TRANSPAERENT PIXEL |
| 1ST PIXEL | 2ND PIXEL | 3RD PIXEL | 4TH PIXEL |
As calling getImageData is a slow operation, you can call it only once to get the data of all the image (sw = image width, sh = image height).
Then, in the example above, if you want to access the components of the TRANSPARENT PIXEL, that is, the one at position x = 1, y = 1 of this imaginary image, you would find its first index i in its ImageData's data property as:
const i = (y * imageData.width + x) * 4;
const solidColor = document.getElementById('solidColor');_x000D_
const alphaColor = document.getElementById('alphaColor');_x000D_
const solidWeighted = document.getElementById('solidWeighted');_x000D_
_x000D_
const solidColorCode = document.getElementById('solidColorCode');_x000D_
const alphaColorCode = document.getElementById('alphaColorCode');_x000D_
const solidWeightedCOde = document.getElementById('solidWeightedCode');_x000D_
_x000D_
const brush = document.getElementById('brush');_x000D_
const image = document.getElementById('image');_x000D_
const canvas = document.createElement('canvas');_x000D_
const context = canvas.getContext('2d');_x000D_
const width = image.width;_x000D_
const height = image.height;_x000D_
_x000D_
const BRUSH_SIZE = brush.offsetWidth;_x000D_
const BRUSH_CENTER = BRUSH_SIZE / 2;_x000D_
const MIN_X = image.offsetLeft + 4;_x000D_
const MAX_X = MIN_X + width - 1;_x000D_
const MIN_Y = image.offsetTop + 4;_x000D_
const MAX_Y = MIN_Y + height - 1;_x000D_
_x000D_
canvas.width = width;_x000D_
canvas.height = height;_x000D_
_x000D_
context.drawImage(image, 0, 0, width, height);_x000D_
_x000D_
const imageDataData = context.getImageData(0, 0, width, height).data;_x000D_
_x000D_
function sampleColor(clientX, clientY) {_x000D_
if (clientX < MIN_X || clientX > MAX_X || clientY < MIN_Y || clientY > MAX_Y) {_x000D_
requestAnimationFrame(() => {_x000D_
brush.style.transform = `translate(${ clientX }px, ${ clientY }px)`;_x000D_
solidColorCode.innerText = solidColor.style.background = 'rgb(0, 0, 0)';_x000D_
alphaColorCode.innerText = alphaColor.style.background = 'rgba(0, 0, 0, 0.00)';_x000D_
solidWeightedCode.innerText = solidWeighted.style.background = 'rgb(0, 0, 0)';_x000D_
});_x000D_
_x000D_
return;_x000D_
}_x000D_
_x000D_
const imageX = clientX - MIN_X;_x000D_
const imageY = clientY - MIN_Y;_x000D_
_x000D_
const i = (imageY * width + imageX) * 4;_x000D_
_x000D_
// A single pixel (R, G, B, A) will take 4 positions in the array:_x000D_
const R = imageDataData[i];_x000D_
const G = imageDataData[i + 1];_x000D_
const B = imageDataData[i + 2];_x000D_
const A = imageDataData[i + 3] / 255;_x000D_
const iA = 1 - A;_x000D_
_x000D_
// Alpha-weighted color:_x000D_
const wR = (R * A + 255 * iA) | 0;_x000D_
const wG = (G * A + 255 * iA) | 0;_x000D_
const wB = (B * A + 255 * iA) | 0;_x000D_
_x000D_
// Update UI:_x000D_
_x000D_
requestAnimationFrame(() => {_x000D_
brush.style.transform = `translate(${ clientX }px, ${ clientY }px)`;_x000D_
_x000D_
solidColorCode.innerText = solidColor.style.background_x000D_
= `rgb(${ R }, ${ G }, ${ B })`;_x000D_
_x000D_
alphaColorCode.innerText = alphaColor.style.background_x000D_
= `rgba(${ R }, ${ G }, ${ B }, ${ A.toFixed(2) })`;_x000D_
_x000D_
solidWeightedCode.innerText = solidWeighted.style.background_x000D_
= `rgb(${ wR }, ${ wG }, ${ wB })`;_x000D_
});_x000D_
}_x000D_
_x000D_
document.onmousemove = (e) => sampleColor(e.clientX, e.clientY);_x000D_
_x000D_
sampleColor(MIN_X, MIN_Y);body {_x000D_
margin: 0;_x000D_
height: 100vh;_x000D_
display: flex;_x000D_
flex-direction: row;_x000D_
align-items: center;_x000D_
justify-content: center;_x000D_
cursor: none;_x000D_
font-family: monospace;_x000D_
overflow: hidden;_x000D_
}_x000D_
_x000D_
#image {_x000D_
border: 4px solid white;_x000D_
border-radius: 2px;_x000D_
box-shadow: 0 0 32px 0 rgba(0, 0, 0, .25);_x000D_
width: 150px;_x000D_
box-sizing: border-box;_x000D_
}_x000D_
_x000D_
#brush {_x000D_
position: absolute;_x000D_
top: 0;_x000D_
left: 0;_x000D_
pointer-events: none;_x000D_
width: 1px;_x000D_
height: 1px;_x000D_
mix-blend-mode: exclusion;_x000D_
border-radius: 100%;_x000D_
}_x000D_
_x000D_
#brush::before,_x000D_
#brush::after {_x000D_
content: '';_x000D_
position: absolute;_x000D_
background: magenta;_x000D_
}_x000D_
_x000D_
#brush::before {_x000D_
top: -16px;_x000D_
left: 0;_x000D_
height: 33px;_x000D_
width: 100%;_x000D_
}_x000D_
_x000D_
#brush::after {_x000D_
left: -16px;_x000D_
top: 0;_x000D_
width: 33px;_x000D_
height: 100%;_x000D_
}_x000D_
_x000D_
#samples {_x000D_
position: relative;_x000D_
list-style: none;_x000D_
padding: 0;_x000D_
width: 250px;_x000D_
}_x000D_
_x000D_
#samples::before {_x000D_
content: '';_x000D_
position: absolute;_x000D_
top: 0;_x000D_
left: 27px;_x000D_
width: 2px;_x000D_
height: 100%;_x000D_
background: black;_x000D_
border-radius: 1px;_x000D_
}_x000D_
_x000D_
#samples > li {_x000D_
position: relative;_x000D_
display: flex;_x000D_
flex-direction: column;_x000D_
justify-content: center;_x000D_
padding-left: 56px;_x000D_
}_x000D_
_x000D_
#samples > li + li {_x000D_
margin-top: 8px;_x000D_
}_x000D_
_x000D_
.sample {_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
left: 16px;_x000D_
transform: translate(0, -50%);_x000D_
display: block;_x000D_
width: 24px;_x000D_
height: 24px;_x000D_
border-radius: 100%;_x000D_
box-shadow: 0 0 16px 4px rgba(0, 0, 0, .25); _x000D_
margin-right: 8px;_x000D_
}_x000D_
_x000D_
.sampleLabel {_x000D_
font-weight: bold;_x000D_
margin-bottom: 8px;_x000D_
}_x000D_
_x000D_
.sampleCode {_x000D_
_x000D_
}<img id="image" src="data:image/gif;base64,R0lGODlhSwBLAPEAACMfIO0cJAAAAAAAACH/C0ltYWdlTWFnaWNrDWdhbW1hPTAuNDU0NTUAIf4jUmVzaXplZCBvbiBodHRwczovL2V6Z2lmLmNvbS9yZXNpemUAIfkEBQAAAgAsAAAAAEsASwAAAv+Uj6mb4A+QY7TaKxvch+MPKpC0eeUUptdomOzJqnLUvnFcl7J6Pzn9I+l2IdfII8DZiCnYsYdK4qRTptAZwQKRVK71CusOgx2nFRrlhMu+33o2NEalC6S9zQvfi3Mlnm9WxeQ396F2+HcQsMjYGEBRVbhy5yOp6OgIeVIHpEnZyYCZ6cklKBJX+Kgg2riqKoayOWl2+VrLmtDqBptIOjZ6K4qAeSrL8PcmHExsgMs2dpyIxPpKvdhM/YxaTMW2PGr9GP76BN3VHTMurh7eoU14jsc+P845Vn6OTb/P/I68iYOfwGv+JOmRNHBfsV5ujA1LqM4eKDoNvXyDqItTxYX/DC9irKBlIhkKGPtFw1JDiMeS7CqWqySPZcKGHH/JHGgIpb6bCl1O0LmT57yCOqoI5UcU0YKjPXmFjMm0ZQ4NIVdGBdZRi9WrjLxJNMY1Yr4dYeuNxWApl1ALHb+KDHrTV1owlriedJgSr4Cybu/9dFiWYAagsqAGVkkzaZTAuqD9ywKWMUG9dCO3u2zWpVzIhpW122utZlrHnTN+Bq2Mqrlnqh8CQ+0Mrq3Kc++q7eo6dlB3rLuh3abPVbbbI2mxBdhWdsZhid8cr0oy9F08q0k5FXSadiyL1mF5z51a8VsQOp3/LlodkBfzmzWf2bOrtfzr48k/1hupDaLa9rUbO+zlwndfaOCURAXRNaCBqBT2BncJakWfTzSYkmCEFr60RX0V8sKaHOltCBJ1tAAFYhHaVVbig3jxp0IBADs=" >_x000D_
_x000D_
<div id="brush"></div>_x000D_
_x000D_
<ul id="samples">_x000D_
<li>_x000D_
<span class="sample" id="solidColor"></span>_x000D_
<div class="sampleLabel">solidColor</div>_x000D_
<div class="sampleCode" id="solidColorCode">rgb(0, 0, 0)</div>_x000D_
</li>_x000D_
<li>_x000D_
<span class="sample" id="alphaColor"></span>_x000D_
<div class="sampleLabel">alphaColor</div>_x000D_
<div class="sampleCode" id="alphaColorCode">rgba(0, 0, 0, 0.00)</div>_x000D_
</li>_x000D_
<li>_x000D_
<span class="sample" id="solidWeighted"></span>_x000D_
<div class="sampleLabel">solidWeighted (with white)</div>_x000D_
<div class="sampleCode" id="solidWeightedCode">rgb(0, 0, 0)</div>_x000D_
</li>_x000D_
</ul>?? Note I'm using a small data URI to avoid Cross-Origin issues if I include an external image or an answer that is larger than allowed if I try to use a longer data URI.
If you move the cursor around the borders of the asterisk shape, you will see sometimes avgSolidColor is red, but the pixel you are sampling looks white. That's because even though the R component for that pixel might be high, the alpha channel is low, so the color is actually an almost transparent shade of red, but avgSolidColor ignores that.
On the other hand, avgAlphaColor looks pink. Well, that's actually not true, it just looks pink because we are now using the alpha channel, which makes it semitransparent and allows us to see the background of the page, which in this case is white.
Then, what can we do to fix this? Well, it turns out we just need to use the alpha channel and its inverse as the weights to calculate the components of our new sample, in this case merging it with white, as that's the color we use as background.
That means that if a pixel is R, G, B, A, where A is in the interval [0, 1], we will compute the inverse of the alpha channel, iA, and the components of the weighted sample as:
const iA = 1 - A;
const wR = (R * A + 255 * iA) | 0;
const wG = (G * A + 255 * iA) | 0;
const wB = (B * A + 255 * iA) | 0;
Note how the more transparent a pixel is (A closer to 0), the lighter the color.
I know this is an old question, but here's an alternative. I'd store that image data in an array, then, on mouse move event over the canvas:
var index = (Math.floor(y) * canvasWidth + Math.floor(x)) * 4
var r = data[index]
var g = data[index + 1]
var b = data[index + 2]
var a = data[index + 3]
A lot easier than getting the imageData everytime.
context.getImageData(x, y, 1, 1).data; returns an rgba array. e.g. [50, 50, 50, 255]
Here's a version of @lwburk's rgbToHex function that takes the rgba array as an argument.
function rgbToHex(rgb){
return '#' + ((rgb[0] << 16) | (rgb[1] << 8) | rgb[2]).toString(16);
};
calling getImageData every time will slow the process ... to speed up things i recommend store image data and then you can get pix value easily and quickly, so do something like this for better performance
// keep it global
let imgData = false; // initially no image data we have
// create some function block
if(imgData === false){
// fetch once canvas data
var ctx = canvas.getContext("2d");
imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
}
// Prepare your X Y coordinates which you will be fetching from your mouse loc
let x = 100; //
let y = 100;
// locate index of current pixel
let index = (y * imgData.width + x) * 4;
let red = imgData.data[index];
let green = imgData.data[index+1];
let blue = imgData.data[index+2];
let alpha = imgData.data[index+3];
// Output
console.log('pix x ' + x +' y '+y+ ' index '+index +' COLOR '+red+','+green+','+blue+','+alpha);
I have a very simple working example of geting pixel color from canvas.
First some basic HTML:
<canvas id="myCanvas" width="400" height="250" style="background:red;" onmouseover="echoColor(event)">
</canvas>
Then JS to draw something on the Canvas, and to get color:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "black";
ctx.fillRect(10, 10, 50, 50);
function echoColor(e){
var imgData = ctx.getImageData(e.pageX, e.pageX, 1, 1);
red = imgData.data[0];
green = imgData.data[1];
blue = imgData.data[2];
alpha = imgData.data[3];
console.log(red + " " + green + " " + blue + " " + alpha);
}
Here is a working example, just look at the console.
You can try color-sampler. It's an easy way to pick color in a canvas. See demo.
Merging various references found here in StackOverflow (including the article above) and in other sites, I did so using javascript and JQuery:
<html>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script src="jquery.js"></script>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var img = new Image();
img.src = 'photo_apple.jpg';
context.drawImage(img, 0, 0);
};
function findPos(obj){
var current_left = 0, current_top = 0;
if (obj.offsetParent){
do{
current_left += obj.offsetLeft;
current_top += obj.offsetTop;
}while(obj = obj.offsetParent);
return {x: current_left, y: current_top};
}
return undefined;
}
function rgbToHex(r, g, b){
if (r > 255 || g > 255 || b > 255)
throw "Invalid color component";
return ((r << 16) | (g << 8) | b).toString(16);
}
$('#myCanvas').click(function(e){
var position = findPos(this);
var x = e.pageX - position.x;
var y = e.pageY - position.y;
var coordinate = "x=" + x + ", y=" + y;
var canvas = this.getContext('2d');
var p = canvas.getImageData(x, y, 1, 1).data;
var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
alert("HEX: " + hex);
});
</script>
<img src="photo_apple.jpg"/>
</body>
</html>
This is my complete solution. Here I only used canvas and one image, but if you need to use <map> over the image, it's possible too.
Source: Stackoverflow.com