bootstrap - Cuentagotas de JavaScript(indicar el color del píxel debajo del cursor del mouse)
jquery color picker set value (9)
Como precaución de seguridad, no puede capturar píxeles de pantalla con Javascript (para que los desarrolladores no puedan tomar instantáneas de sus datos personales), pero PUEDE hacerlo en Flash: puede obtener datos de píxeles dentro del contenedor de Flash usando flash.display .BitmapData class.
Visite http://www.sephiroth.it/tutorials/flashPHP/print_screen/ - Lo he usado en proyectos WYSYWIG basados en Flash para guardar imágenes en un servidor LAMP (PHP).
El problema con el uso de Flash es que no es compatible nativamente con los dispositivos con iOS, que ahora son extremadamente populares y vale la pena desarrollarlos. Flash está bajando por los tubos.
El método basado en lienzo será ciertamente bueno siempre que todos sus visitantes tengan navegadores web actualizados que admitan la etiqueta canvas y JavaScript.
Estoy buscando una herramienta " cuentagotas ", que me da el valor hexadecimal del píxel debajo del cursor del mouse, en JavaScript para un CMS.
Para Firefox, existe la excelente extensión ColorZilla que hace exactamente eso. Sin embargo, es solo FF por supuesto, y realmente me gustaría entregar la herramienta junto con el CMS.
Un desarrollador holandés ha tenido la muy inteligente idea de utilizar una combinación de Ajax y el imagecolorat() de PHP imagecolorat() para descubrir el color de píxel en una imagen. Pero eso limita el rango de las imágenes a las que puedo acceder desde el lado del servidor , y realmente estoy soñando con una herramienta universal.
Trabajaré con uno de estos enfoques, pero preferiría mucho un navegador cruzado, Javascript o basado en Flash que no requiera ningún tipo de manipulación del lado del servidor ni la instalación de extensiones.
También estoy interesado en cualquier solución específica de IE que haga lo que ColorZilla puede hacer, podría vivir solo con IE y FF, aunque una solución de navegador cruzado sería, por supuesto, ideal.
Estoy de acuerdo con la respuesta muy detallada proporcionada por Elijah. Además, diría que no necesitas el lienzo cuando se trata de imágenes. Como usted mismo afirmó, tiene esas imágenes disponibles desde dentro de php y puede hacer la consulta de color en el servidor.
Sugeriría que manejes este problema con una herramienta externa, esto hace que incluso el navegador sea independiente (pero dependiente del SO): escribe una pequeña herramienta (por ejemplo en c #) que hace la consulta de color para ti, se invoca con un atajo y envía el color de tu servidor Haga que la herramienta esté disponible como descarga en su CMS.
Otro enfoque que utilicé para un CMS fue "robar" colores mediante el análisis del CSS: el caso de uso fue hacer que los colores de un sitio web ya existente estuvieran disponibles como paleta de colores para mi aplicación:
- Le pedí al usuario que proporcionara una URL del sistema de destino, principalmente la página de inicio de la compañía
- Analicé la página para encontrar todas las definiciones de color en todos los estilos en línea y estilos vinculados
- (puede extenderlo fácilmente a todas las imágenes a las que se hace referencia)
- el resultado fue una bonita paleta de colores con todos los colores corporativos para elegir
Tal vez esa es también una solución para su CMS?
Fusionando varias referencias encontradas aquí en 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. Espero haber ayudado.
No es posible con JavaScript, ya que va en contra de la seguridad entre dominios. Sería muy malo si supiera qué píxeles componen la imagen, http://some-other-host/yourPassword.png . Solo puede indicar el color del píxel debajo del mouse si el mouse está sobre un lienzo o un elemento de imagen del mismo dominio (o un elemento de imagen de otro dominio que se sirve con un Access-Control-Allow-Origin: * encabezamiento). En el caso del lienzo, debe hacer canvasElement.getContext(''2d'').getImageData(x, y, 1, 1).data . En el caso de las imágenes, tendrías que dibujarlas en un lienzo con:
var canvas = document.createElement("canvas");
canvas.width = yourImageElement.width;
canvas.height = yourImageElement.height;
canvas.getContext(''2d'').drawImage(yourImageElement, 0, 0);
Y luego solo use el método anterior explicado para lienzos. Si debe poder convertir a varias representaciones de valores de color, intente con mi biblioteca color.js .
Además, nunca podrá admitir IE <9 (suponiendo que IE9 admita lienzos) y usar Flash no servirá de ayuda ya que tampoco puede leer los datos de píxeles del documento.
No existe un método DOM incorporado para obtener genéricamente el color de un elemento DOM (que no sea imágenes o un <canvas> ) en una ubicación de píxel particular.
Por lo tanto, para hacer esto, debemos usar algo como HTML2Canvas o DOM Panda para tomar una "captura de pantalla" de nuestro sitio web, obtener la ubicación de clic del usuario y obtener el color de píxel de la "captura de pantalla" en esa ubicación en particular.
Usando HTML2Canvas (versión 0.5.0-beta3) puedes hacer algo como esto:
// Take "screenshot" using HTML2Canvas
var screenshotCanvas,
screenshotCtx,
timeBetweenRuns = 10,
lastTime = Date.now();
function getScreenshot() {
// Limit how soon this can be ran again
var currTime = Date.now();
if(currTime - lastTime > timeBetweenRuns) {
html2canvas(document.body).then(function(canvas) {
screenshotCanvas = canvas;
screenshotCtx = screenshotCanvas.getContext(''2d'');
});
lastTime = currTime;
}
}
setTimeout(function() { // Assure the initial capture is done
getScreenshot();
}, 100);
// Get the user''s click location
document.onclick = function(event) {
var x = event.pageX,
y = event.pageY;
// Look what color the pixel at the screenshot is
console.log(screenshotCtx.getImageData(x, y, 1, 1).data);
}
// Update the screenshot when the window changes size
window.onresize = getScreenshot;
Demo
No sé si esto es factible, pero si sus páginas son estáticas, podría guardar una captura de pantalla de cada una de ellas (o tal vez una para cada resolución de navegador / pantalla) y luego usar AJAX para enviar las coordenadas del cursor al servidor y devuelve el color del píxel con el imagecolorat() de imagecolorat() de PHP imagecolorat() .
Para tomar capturas de pantalla, puede usar Selenium IDE como se describe here .
Espero eso ayude.
Para agregar a las respuestas anteriores -
Una forma de pensar en este problema es que desea poder hacer una captura de pantalla de una región de 1px por 1px. Una técnica bastante común para capturar regiones de pantalla (por ejemplo, desde sistemas de notificación de errores basados en Web) es usar un applet Java firmado y java.awt.Robot para capturar la imagen. Si firmas el applet, tus usuarios obtendrán un diálogo "¿confías en esta aplicación?" (Con una casilla de verificación "confiar siempre en las aplicaciones de este editor") y luego podrán usar la herramienta.
A continuación, puede pasar el resultado a JavaScript utilizando LiveConnect (los documentos son antiguos, pero los applets de Java aún lo admiten), o puede publicarlo en su servidor. Del mismo modo, puede llamar al applet de Java desde JavaScript.
Usando una técnica llamada Ataque de temporización del navegador , es posible determinar (tipo de) el color de cualquier píxel, incluso en iframes.
Básicamente, esta técnica mide el tiempo para representar un filtro SVG en un elemento, en lugar del color en sí mismo ( requestAnimationFrame() permite medir el tiempo con una precisión mucho mejor que setTimeout() ). Según el color de píxel actual, el filtro tarda más o menos tiempo en aplicarse. Esto permite determinar si un píxel es del mismo color que un color conocido, por ejemplo, negro o blanco.
Más detalles en este libro blanco (pdf): http://www.contextis.com/documents/2/Browser_Timing_Attacks.pdf
Por cierto: sí, este es un agujero de seguridad del navegador, pero no veo cómo los proveedores de navegadores pueden parchearlo.
Ver nueva entrada [tipo = color] Elemento HTML5: http://www.w3.org/TR/html-markup/input.color.html , http://demo.hongkiat.com/html5-form-input-type/index2.html .
Ahora funciona al menos en Chrome (probado en Ubuntu, debería funcionar también para Windows). Se inicia el diálogo de selección de color proporcionado por el sistema operativo . Si hay un cuentagotas en este diálogo (es para Gnome), entonces es posible elegir un color desde cualquier punto de la pantalla . Sin navegador cruzado todavía, pero limpio y basado en estándares.