Estoy buscando un «cuentagotas» de la herramienta, que me da el valor hexadecimal del píxel el cursor del ratón es bajo, en JavaScript para un CMS.

Para Firefox, no es el excelente ColorZilla extensión que hace exactamente eso. Sin embargo, es FF sólo de curso, y realmente me gustaría entregar la herramienta junto con el CMS.

Un desarrollador holandés ha tenido la idea muy ingeniosa de utilizar una combinación de Ajax y PHP imagecolorat() a encontrar fuera del color del Píxel en una imagen. Pero que limita el número de imágenes que pueden acceder a lado del servidor, y realmente estoy soñando con una herramienta universal.

Voy a trabajar con uno de estos enfoques, pero preferiríamos un cross-browser, Javascript o Flash basado forma que no requiere del lado del servidor de tocar el violín y no la instalación de extensiones.

Yo también estoy interesado en cualquier IE soluciones específicas que hacer lo que ColorZilla puede hacer – yo podría vivir con el apoyo de IE y FF sólo, a través de un navegador cruz solución sería ideal.

  • No es posible en Javascript; no estoy seguro acerca de Flash.
  • En teoría, usted podría ser capaz de procesar la información de estilo asociada con el primer elemento bajo el cursor del ratón, y determinar cuál es el color del elemento debe ser, si no es una imagen o un lienzo. En la práctica esto sería, probablemente, volverte loco, el trato con los bordes y márgenes del navegador y peculiaridades. Creo que Elías respuesta es la única práctica.

9 Comentarios

  1. 74

    No es posible con JavaScript ya que va en contra de la seguridad entre dominios. Sería muy malo si usted sabía qué píxeles de la imagen, http://some-other-host/yourPassword.png. Sólo se puede decir que el color del píxel bajo el ratón si el ratón está sobre un lienzo o un elemento de la imagen del mismo dominio (o un elemento de imagen de otro dominio que se sirve con una Access-Control-Allow-Origin: * encabezado). En el caso de la tela, usted haría canvasElement.getContext('2d').getImageData(x, y, 1, 1).data. En el caso de las imágenes, usted tendría que dibujar a un lienzo con:

    var canvas = document.createElement("canvas");
    canvas.width = yourImageElement.width;
    canvas.height = yourImageElement.height;
    canvas.getContext('2d').drawImage(yourImageElement, 0, 0);

    Y, a continuación, sólo utilice el método anterior se explica por lienzos. Si usted debe ser capaz de convertir a las diversas representaciones de los valores de color, intente con mi color.js biblioteca.

    También, nunca vas a ser capaz de soportar IE <9 (eso suponiendo que IE9 soporta canvas) y el uso de Flash no ayuda, ya que no puede leer los datos de los píxeles del documento.

    • Aspecto interesante acerca de la seguridad, y gracias por el Lienzo ángulo. Sin embargo, yo podría vivir con el único ser capaz de acceder a los píxeles dentro de mi dominio.
    • Gracias Elías. Estoy un poco triste de que esta se limita a Firefox, pero que no es su culpa y esta es sin duda la solución más simple. Probablemente voy a combinar con una (la más lenta) en el lado del servidor opción de reserva para atender a IE. La aceptación de su respuesta.
    • No veo ninguna razón por qué esto sería un problema de seguridad. Como es de JavaScript puede acceder al texto en bruto de una contraseña de cualquier input:password.
    • Lo que me paraba de la incrustación de yourPassword.png en el lienzo, el muestreo es no? (suponiendo que yo sepa la url)
    • te estás perdiendo el punto: si se pudiera tomar cualquier píxeles en la pantalla, entonces usted podría mirar a valores diferentes en una ventana del navegador, o incluso en un archivo PDF estado de cuenta bancaria, en una ventana diferente. Nadie debe estar en ejecución que no son de confianza JS en una página que maneja información sensible, y servir a los archivos confidenciales y deben involucrar a la autenticación correcta. Usted necesita para secuestrar la sesión del usuario para poder acceder a sus password.png.
    • js no tiene de la cruz-sandbox de acceso para la ejecución de scripts (a menos que reciban el permiso explícito) no hay ninguna razón de una api no puede ser restringido a los valores de color de los marcos que se encuentran en el mismo entorno limitado de seguridad.
    • sí, eso tiene sentido. Se podría conseguir un poco complejo, pero sería factible. Un iframe con un contexto de seguridad diferente debe ser un rectángulo negro a la secuencia de comandos, excepto cuando el contenido de la actual recinto se coloca sobre ella.
    • Creo que es un mejor caso de uso para un null valor de retorno, pero eso es algo que sería mejor planchada a cabo por uno de los whatwg listas de correo
    • De esta manera Podemos obtener el color del pixel en la esquina de youtube vídeo en el que se incrusta como iframe? lanza cors excepción. Pero quién sabe, tal vez hay un hack. demo http://plnkr.co/edit/3PWdeY8lVMaOFRsLoarq?p=preview intenta llamar document.querySelector('iframe').contentWindow.document de la consola

  2. 15

    Usando una técnica llamada Navegador de Temporización Ataque, es posible (tipo de) determinar el color de cualquier píxel, incluso en iframes.

    Básicamente, esta técnica mide el tiempo para hacer un filtro SVG en un elemento, en vez de el color en sí (requestAnimationFrame() permite medir el tiempo con una exactitud mejor que setTimeout()). Dependiendo del color de los píxeles, el filtro lleva más o menos tiempo para aplicar. Esto hace que sea posible determinar si un píxel es el mismo color como un color conocidos – por ejemplo, el negro o el blanco.

    Más detalles en este documento (pdf): http://www.contextis.com/documents/2/Browser_Timing_Attacks.pdf

    Por cierto: sí, este es un navegador agujero de seguridad, pero no veo cómo los fabricantes de los navegadores puede parche.

    • Interesante solución, pero no es seguro porque de Origen de la Cruz de las Políticas?
  3. 11

    La fusión de las diversas referencias que se encuentran aquí en StackOverflow y en otros sitios, lo he hecho con 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í yo sólo se utiliza lienzo y una imagen, pero si usted necesita usar <map> sobre la imagen, esto también es posible. Espero haber ayudado.

    • ¿Utilizar el cuentagotas para permitir que para obtener el color de cualquier parte?
  4. 7

    Estoy de acuerdo con el muy detallado de la respuesta proporcionada por Elías. Además, yo diría que usted no necesita el lienzo cuando se trata de imágenes. Como se dijo a sí mismo, usted tiene esas imágenes disponibles en php y puede hacer que el color de la consulta en el servidor.

    Sugiero que trate este problema con una herramienta externa – esto hace que sea aún navegador independiente (pero OS dependientes): escribir una pequeña herramienta (por ejemplo en c#) que hace que el color de la consulta, se invoca con un acceso directo y presenta el color a tu servidor. Hacer que la herramienta disponible como descarga en tu CMS.

    Otro abordaje que he usado para un CMS fue para «robar» los colores de análisis de la CSS: el caso de uso era hacer que los colores de una web ya existente del sitio disponibles como paleta de colores, para mi aplicación:

    • Me pide el usuario para proporcionar una dirección URL en el sistema de destino – en su mayoría de la empresa página de inicio de
    • Yo analiza la página para encontrar todas las definiciones de color en todos los estilos en línea y vinculado estilos
    • (se puede extender fácilmente a todos los imágenes de referencia)
    • el resultado fue una bonita paleta de colores, con todos corporativa colores para elegir

    Tal vez eso es también una solución para su CMS?

    • Saludos Ralf. La construcción de una paleta personalizada es una muy buena idea, pero no para mi tarea a la mano, ya que habrá un montón de nuevo contenido con ningún color definido por el rango. De un lado cliente de la aplicación es sin duda el más limpio de enfoque, pero necesito una herramienta que funciona tanto en Windows y Mac OS. Sería un buen motivo para volver a entrar en lado del cliente programación de nuevo (y por primera vez en el Mac), pero tengo sooooo mucho para hacer en este momento. Creo que me voy con la imagen solo enfoque.
  5. 5

    Ver nuevos input[type=color] el 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 para Windows también). Se lanza el color de diálogo seleccionar proporcionados por el sistema operativo. Si hay un cuentagotas en este cuadro de diálogo es para Gnome), entonces es posible elegir un color desde cualquier punto en la pantalla. No cross-browser, pero limpia y basada en estándares.

    • De niza. Funciona en Firefox también, naturalmente, pero sería grande si usted podría hacer esto sin tener que abrirá un navegador de diálogo.
  6. 4

    No sé si esto es factible, pero si sus páginas son estáticas, usted puede guardar una imagen de captura de pantalla de cada uno de ellos (o, tal vez, uno para cada navegador/resolución de pantalla? ) y, a continuación, utilizar AJAX para enviar las coordenadas del cursor en el servidor y devolver el color de los píxeles con PHP imagecolorat().

    Para tomar las capturas de pantalla, puede utilizar Selenium IDE como se describe aquí.

    Espero que ayude.

  7. 3

    A añadir a las respuestas anteriores —

    Una forma de pensar de este problema es que usted quiere ser capaz de hacer una captura de pantalla de una 1px 1px región. Una forma bastante común de la técnica para la captura de pantalla de las regiones (por ejemplo desde dentro basada en la Web para informar de errores de los sistemas) es el uso de un subprograma Java y java.awt.Robot para capturar la imagen. Si usted firmar el applet, sus usuarios tendrán una «confiar en esta aplicación diálogo» (con un «siempre confiar en las aplicaciones de este editor» casilla de verificación) y, a continuación, será capaz de utilizar la herramienta.

    Usted puede, a continuación, pasar el resultado a JavaScript el uso de live connect (los documentos son viejos, pero los applets de Java siguen apoyando a este), o se puede publicar a su servidor. Del mismo modo, usted puede llamar en el applet de Java desde JavaScript.

    • El Applet de Java ángulo es muy interesante. Sin embargo no estoy competente en la codificación de los Applets, así que no puedo probablemente implementar esto para mi tarea a la mano, y recurro a la Lona enfoque descrito anteriormente. Sin embargo, gracias por traer esto a mi atención, que puede ser capaz de hacer algo con él en un momento posterior.
  8. 3

    Como una medida de seguridad que no se puede capturar la pantalla de píxeles con Javascript (por lo que los desarrolladores no pueden tomar instantáneas de sus datos personales), pero se PUEDE hacer en Flash, puedes recuperar los datos de los píxeles dentro de la Flash contenedor utilizando el flash.pantalla.Clase BitmapData.

    Retirar http://www.sephiroth.it/tutorials/flashPHP/print_screen/ — lo he utilizado en Flash basado en WYSYWIG proyectos para guardar imágenes en un LAMP (PHP) server.

    El problema con el uso de Flash es que no es compatible de forma nativa en los dispositivos iOS, que son muy populares ahora y vale la pena desarrollar para. El Flash está en su camino hacia los tubos.

    La tela-basado en el método sin duda será una buena brindado a todos sus visitantes, se han actualizado los navegadores web que soportan el lienzo de la etiqueta y JavaScript.

  9. 2

    No hay ninguna construido en el método DOM de forma genérica obtener el color de un elemento de DOM (que no sean imágenes o un <canvas>) en una determinada posición de píxel.

    Por lo tanto, con el fin de hacer esto, debemos usar algo como HTML2Canvas o DOM Panda a tomar una «captura de pantalla» de nuestro sitio web, acceder al usuario la ubicación, haga clic, y obtener el color de los píxeles de la «captura de pantalla» en ese lugar en particular.

    Utilizando 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

Dejar respuesta

Please enter your comment!
Please enter your name here