javascript - texto - pasar el mouse por la imagen y dar informacion
Obtener el color de píxel del lienzo, al pasar el ratón sobre él (7)
¿Es posible obtener el píxel de valor RGB debajo del mouse? ¿Hay un ejemplo completo de esto? Esto es lo que tengo hasta ahora:
<script>
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]);
};
}
</script>
Respuesta rápida
context.getImageData(x, y, 1, 1).data; devuelve una matriz de rgba. por ejemplo [50, 50, 50, 255]
Aquí hay una versión de la función rgbToHex de @lwburk que toma la matriz rgba como argumento.
function rgbToHex(rgb){
return ''#'' + ((rgb[0] << 16) | (rgb[1] << 8) | rgb[2]).toString(16);
};
Aquí hay un ejemplo completo e independiente. Primero, usa el siguiente HTML:
<canvas id="example" width="200" height="60"></canvas>
<div id="status"></div>
El JavaScript relevante:
// set up some sample squares
var example = document.getElementById(''example'');
var context = example.getContext(''2d'');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(0, 0, 50, 50);
context.fillStyle = "rgb(0,0,255)";
context.fillRect(55, 0, 50, 50);
$(''#example'').mousemove(function(e) {
var pos = findPos(this);
var x = e.pageX - pos.x;
var y = e.pageY - pos.y;
var coord = "x=" + x + ", y=" + y;
var c = this.getContext(''2d'');
var p = c.getImageData(x, y, 1, 1).data;
var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
$(''#status'').html(coord + "<br>" + hex);
});
El código anterior asume la presencia de jQuery y las siguientes funciones de utilidad:
function findPos(obj) {
var curleft = 0, curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return { x: curleft, y: curtop };
}
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);
}
Véalo en acción en JSFIDDLE:
Fusionando varias referencias encontradas aquí en (incluyendo el artículo anterior) y en otros sitios, lo hice usando javascript y 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>
Esta es mi solución completa. Aquí solo usé lienzo y una imagen, pero si necesita usar <map> sobre la imagen, también es posible.
Puedes probar color-sampler . Es una forma fácil de elegir el color en un lienzo. Ver demo
Sé que esta es una vieja pregunta, pero aquí hay una alternativa. Almacenaba esos datos de imagen en una matriz, luego, en el evento de movimiento del mouse sobre el lienzo:
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]
Mucho más fácil que obtener imageData cada vez.
Tengo un ejemplo de trabajo muy simple de geting pixel color from canvas.
Primero algo de HTML básico:
<canvas id="myCanvas" width="400" height="250" style="background:red;" onmouseover="echoColor(event)">
</canvas>
Luego, JS dibujará algo en el lienzo y obtendrá 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);
}
Aquí hay un ejemplo de trabajo , solo mira la consola.
llamar a getImageData cada vez ralentizará el proceso ... para acelerar las cosas, almacenaré datos de imagen y luego puedo recorrer todos los píxeles como
var imgData = ctx.getImageData(0,0,can_ida.width,can_ida.height);
var data = imgData.data;
for (var y = 0; y < imgData.height; ++y) {
for (var x = 0; x < imgData.width; ++x) {
var index = (y * imgData.width + x) * 4; // index of the current pixel
var red = data[index];
var green = data[index+1];
var blue = data[index+2];
var alpha = data[index+3];
console.log(''pix x '' + x +'' y ''+y+ '' index ''+index +'' COLOR ''+red+'',''+green+'',''+blue+'',''+alpha);
}
}