Estoy construyendo algo que se llama el «HTML Pruebas». Es completamente corrió en JavaScript y es muy cool.

Al final, en los resultados aparece el cuadro que dice «Sus Resultados:» y que muestra la cantidad de tiempo que se tomaron, ¿qué porcentaje de ellos lo tienen, y cómo muchas de las preguntas que tienes a la derecha de 10. Me gustaría tener un botón que dice «Captura de resultados» y tener de alguna manera, tomar una captura de pantalla o algo de el div y, a continuación, mostrar la imagen capturada en la página donde se puede hacer clic derecho y «Guardar imagen como».

Realmente me encantaría hacer esto para que puedan compartir sus resultados con los demás. Yo no quiero que ellos se «copia» de los resultados, ya que fácilmente pueden cambiar eso. Si cambian lo que dice en la imagen, bueno.

¿Alguien sabe una manera de hacer esto o algo similar?

InformationsquelleAutor Nathan | 2011-07-31

11 Comentarios

  1. 89

    No, yo no conozco una manera de ‘captura de pantalla’ un elemento, pero de lo que podría hacer, es dibujar los resultados de la prueba en un elemento canvas, a continuación, utilizar la HTMLCanvasElement del objeto toDataURL función para obtener una data: URI con la imagen del contenido.

    Que el concurso ha terminado, hacer esto:

    var c = document.getElementById('the_canvas_element_id');
    var t = c.getContext('2d');
    /* then use the canvas 2D drawing functions to add text, etc. for the result */

    Cuando el usuario hace clic en «Capture», hacer esto:

    window.open('', document.getElementById('the_canvas_element_id').toDataURL());

    Esto abrirá una nueva pestaña o ventana con la ‘captura de pantalla’, que permite al usuario guardar. No hay ninguna manera de invocar a un «guardar como» cuadro de diálogo de tipo, así que esto es lo mejor que puedes hacer, en mi opinión.

    • Gracias!! No sé nada sobre lienzo, pero voy a aprender. ¿Cómo puedo utilizar el Lienzo de dibujo en 2D efectos? Podría ayudarme con esto? Muchas gracias! 🙂
    • Trate de Mozilla documentación, es realmente muy fácil de seguir: developer.mozilla.org/en/canvas_tutorial
    • En lugar de abrirlo en una nueva ventana/pestaña, lo puedo abrir en una inline cuadro de diálogo? (Como el Fancybox lightbox plugin?)
    • Sí, usted puede tener una línea de cuadro de diálogo con un img que tiene su src conjunto a la data: URI. Sin embargo, esa no es realmente necesaria, sólo tienes que poner el canvas sí mismo en la línea del cuadro de diálogo; los usuarios pueden hacer clic derecho y guardar el estado actual como una imagen.
    • Gracias 🙂 yo podría usar la versión de la imagen, de modo que será capaz de hacer clic derecho y haga clic en «guardar imagen como»
    • No, lo que estoy diciendo es, que canvas elementos que funcionan exactamente igual que img elementos en que usted puede hacer clic derecho y guardar en ellos.
    • Parece ser mejor para enviar los datos al servidor y volver como archivo descargable para el usuario
    • ¿Cuál es el significado de «t» en Delan Azabani del código? Supongo que c es por la tela.

  2. 76

    Esta es una expansión de @Datán del respuesta, utilizando html2canvas y FileSaver.js.

    $(function() { 
        $("#btnSave").click(function() { 
            html2canvas($("#widget"), {
                onrendered: function(canvas) {
                    theCanvas = canvas;
    
    
                    canvas.toBlob(function(blob) {
                        saveAs(blob, "Dashboard.png"); 
                    });
                }
            });
        });
    });

    Este bloque de código de espera para el botón con el id de btnSave que se hace clic. Cuando es así, se convierte el widget div a un elemento canvas y, a continuación, utiliza el saveAs() FileSaver interfaz (a través de FileSaver.js en los navegadores que no soportan de forma nativa) para guardar el div como una imagen con el nombre «cuadro de mandos.png».

    Un ejemplo de este trabajo está disponible en este el violín.

    • Tuve que agregar las referencias a: html2canvas, filesaver, blob, lienzo-toBlob. Después de que funcionaba. Gracias!
    • Impresionante, esta debe ser aceptada respuesta. Sencillo plug n play.
    • ¿Sabe usted cómo se iba a trabajar con three.js? Tengo un div que el three.js representador / lienzo es en (renderer.domElement) y, a continuación, divs en la parte superior de eso. Me gustaría tomar una instantánea de la DIV padre y la captura de todo? Es esto posible? Gracias!
    • Se puede evitar la imagen que aparece en su DOM? No se puede simplemente ir a descargar de inmediato?
    • El violín no hacer nada!
    • html2canvas no admite la dirección de estilo.

  3. 9

    Después de horas de investigación, finalmente encontré una solución para tomar una captura de pantalla de un elemento, incluso si el origin-clean BANDERA (para evitar XSS), es por eso que usted puede incluso capturar, por ejemplo, los Mapas de Google (en mi caso). Escribí una función universal para obtener una captura de pantalla. La única cosa que usted necesita, además es el html2canvas biblioteca (https://html2canvas.hertzen.com/).

    Ejemplo:

    getScreenshotOfElement($("div#toBeCaptured").get(0), 0, 0, 100, 100, function(data) {
        //in the data variable there is the base64 image
        //exmaple for displaying the image in an <img>
        $("img#captured").attr("src", "data:image/png;base64,"+data);
    }

    Tenga en cuenta console.log() y alert() no generar una salida si el tamaño de la imagen es genial.

    Función:

    function getScreenshotOfElement(element, posX, posY, width, height, callback) {
        html2canvas(element, {
            onrendered: function (canvas) {
                var context = canvas.getContext('2d');
                var imageData = context.getImageData(posX, posY, width, height).data;
                var outputCanvas = document.createElement('canvas');
                var outputContext = outputCanvas.getContext('2d');
                outputCanvas.width = width;
                outputCanvas.height = height;
    
                var idata = outputContext.createImageData(width, height);
                idata.data.set(imageData);
                outputContext.putImageData(idata, 0, 0);
                callback(outputCanvas.toDataURL().replace("data:image/png;base64,", ""));
            },
            width: width,
            height: height,
            useCORS: true,
            taintTest: false,
            allowTaint: false
        });
    }
    • donde se han definido html2canvas función
    • Yo integrada de la biblioteca html2canvas (ver el enlace en mi post) antes de que la función getScreenshotOfElement() es alcanzado. Por ejemplo con el <script>-tag. Sólo tienes que descargar html2canvas, con copia a su proyecto.
    • Todavía no estoy capaz de capturar los carriles de las calles de mapa de google. Esto sólo captura de pantalla, el zoom In y zoom out, Mapa de satélite y de texto. puede usted por favor ayuda para capturar todo el mapa. Gracias
  4. 6

    Si quieres disponer de diálogo «Guardar como», acaba de pasar la imagen a un script php, que añade cabeceras correspondientes

    Ejemplo de «todo-en-uno» de la secuencia de comandos script.php

    <?php if(isset($_GET['image'])):
        $image = $_GET['image'];
    
        if(preg_match('#^data:image/(.*);base64,(.*)$#s', $image, $match)){
            $base64 = $match[2];
            $imageBody = base64_decode($base64);
            $imageFormat = $match[1];
    
            header('Content-type: application/octet-stream');
            header("Pragma: public");
            header("Expires: 0");
            header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
            header("Cache-Control: private", false); //required for certain browsers
            header("Content-Disposition: attachment; filename=\"file.".$imageFormat."\";" ); //png is default for toDataURL
            header("Content-Transfer-Encoding: binary");
            header("Content-Length: ".strlen($imageBody));
            echo $imageBody;
        }
        exit();
    endif;?>
    
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=1.7.2'></script>
    <canvas id="canvas" width="300" height="150"></canvas>
    <button id="btn">Save</button>
    <script>
        $(document).ready(function(){
            var canvas = document.getElementById('canvas');
            var oCtx = canvas.getContext("2d");
            oCtx.beginPath();
            oCtx.moveTo(0,0);
            oCtx.lineTo(300,150);
            oCtx.stroke();
    
            $('#btn').on('click', function(){
                //opens dialog but location doesnt change due to SaveAs Dialog
                document.location.href = '/script.php?image=' + canvas.toDataURL();
            });
        });
    </script>
  5. 3
    var shot1=imagify($('#widget')[0], (base64) => {
      $('img.screenshot').attr('src', base64);
    });

    Echa un vistazo a htmlshot paquete , entonces, a revisar profundamente el lado del cliente sección:

    npm install htmlshot
    • es este htmlshot proyecto aún se mantiene? El github enlace de mecanismo nacional de prevención no parece existir todavía. Hay otro sitio para él?
    • me dan sus requisitos , y estar seguro de que voy a ayudarle .ya que yo soy el autor de esta biblioteca.
    • Gracias @abdennour-toumi. Yo solo hice un mecanismo nacional de prevención de instalar para mirar a través del código. Parece que el uso de html2canvas que he probado y estoy teniendo problemas con IE y debido a la SVG y complejidad de mi página. Así que parece que esta biblioteca no me ayuda en lo que se refiere.
    • Su cliente tiene que evitar es decir.. les digo que!
  6. 2

    Usted no puede tomar una captura de pantalla: sería un irresponsable riesgo de seguridad para dejar de hacerlo. Sin embargo, usted puede:

    • Hacer las cosas del lado del servidor y generar una imagen
    • Dibujar algo similar a un Lienzo y de procesamiento que una imagen (en un navegador que lo soporte)
    • Usar otra librería de dibujo para dibujar directamente en la imagen (lento, pero que funcione en cualquier navegador)
    • Gracias! Voy a ir con el lienzo, como yo no sé de ningún dibujo «bibliotecas» ni sé cómo hacerlo. Yo no soy bueno en el lienzo, pero lo voy a intentar.
    • Lo siento, tengo que comentar esto, ya que viene de google, pero WTF «irresponsable riesgo de seguridad» podría preguntar por qué, si vamos a javascript tomar una captura de pantalla o un tiro de dados cables y devolver los datos con codificación BASE64 de una cadena de texto no hay problema de Seguridad
    • Yo podría (por ejemplo) para subir a alguien del Facebook de la página en un iframe y, a continuación, captura de pantalla es. Normalmente un cross-site iframe no es parte de los accesibles DOM para evitar XSS, pero sería mucho más difícil para el navegador proveedor para detenerlo en este caso.
    • qué hay de malo con que no va a ver cualquier cosa aún la misma como es actualmente, si un usuario a la pantalla de Impresión del navegador con facebook en ella
    • El Javascript podría dar los datos a un malicioso de origen sin que el usuario lo note, mientras que la «imprimir pantalla», es controlado por el usuario, y no una arbitraria en el sitio web que no son de confianza.
    • Lo que una paliza. @PiPeep, Si una página web puede cargar un iFrame de Facebook, ya hay aislamiento, ¿por qué no extender este tipo de aislamiento con una captura de pantalla de la API? por ejemplo. Div.ToPNG(), donde la ya mencionada iFrame es blanqueada? No es un irresponsable riesgo para la seguridad, no sólo no construido-en el que nadie ha trabajado a través de «potencial» de privacidad/problemas de seguridad en el desarrollo de esta construido en la captura de pantalla de la API. Sería inmensamente útil para una gran variedad de casos de uso, tales como el soporte de aplicaciones web de intranet, por ejemplo.

  7. 2
    <script src="/assets/backend/js/html2canvas.min.js"></script>
    
    
    <script>
        $("#download").on('click', function(){
            html2canvas($("#printform"), {
                onrendered: function (canvas) {
                    var url = canvas.toDataURL();
    
                    var triggerDownload = $("<a>").attr("href", url).attr("download", getNowFormatDate()+"电子签名详细信息.jpeg").appendTo("body");
                    triggerDownload[0].click();
                    triggerDownload.remove();
                }
            });
        })
    </script>

    cita

  8. 2

    Otra alternativa es el uso de GrabzIt del El API de JavaScript todo lo que necesita hacer es pasar el selector CSS del div que se desea capturar. A continuación creará una captura de pantalla de que sólo div.

    <script type="text/javascript" src="grabzit.min.js"></script>
    <script type="text/javascript">
    GrabzIt("YOUR APPLICATION KEY").ConvertURL("http://www.example.com/quiz.html",
    {"target": "#results", "bheight": -1, "height": -1, "width": -1}).Create();
    </script>

    Hay más ejemplos de problemas cómo la captura de los elementos HTML. La divulgación completa yo soy el API creador.

    • No es un freeware
  9. 0

    Como yo sé que usted no puede hacer eso, puedo estar equivocado. Sin embargo, me gustaría hacer esto con php, generar un archivo JPEG usando php funciones estándar y, a continuación, mostrar la imagen, no debe ser un trabajo duro, sin embargo depende de cómo llamativo el contenido del DIV se

    • El OP nunca sugirió que él es el uso de procesamiento en el servidor, aunque si lo era, esto estaría bien.
    • Sí, no se pueden utilizar en el lado del servidor de cosas por desgracia. Probablemente voy a ir con una de las respuestas anteriores. Pero gracias! 🙂
  10. 0

    Es simple usted puede utilizar este código para la captura de la captura de pantalla de un área en particular
    usted tiene que definir el div id en html2canvas. Estoy usando aquí 2 div-:

    div id=»coche»

    div id =»chartContainer»

    si desea capturar sólo los coches, a continuación, utilizar coche estoy captura aquí automóvil sólo puede cambiar chartContainer para la captura de la gráfica
    html2canvas($(‘#car’)
    copia y pega este código

    HTML:

    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <script>
    window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    theme: "light2",
    title:{
    text: "Simple Line Chart"
    },
    axisY:{
    includeZero: false
    },
    data: [{        
    type: "line",       
    dataPoints: [
    { y: 450 },
    { y: 414},
    { y: 520, indexLabel: "highest",markerColor: "red", markerType: "triangle" },
    { y: 460 },
    { y: 450 },
    { y: 500 },
    { y: 480 },
    { y: 480 },
    { y: 410 , indexLabel: "lowest",markerColor: "DarkSlateGrey", markerType: "cross" },
    { y: 500 },
    { y: 480 },
    { y: 510 }
    ]
    }]
    });
    chart.render();
    }
    </script>
    </head>
    <body bgcolor="black">
    <div id="wholebody">  
    <a href="javascript:genScreenshotgraph()"><button style="background:aqua; cursor:pointer">Get Screenshot of Cars onl </button> </a>
    <div id="car" align="center">
    <i class="fa fa-car" style="font-size:70px;color:red;"></i>
    <i class="fa fa-car" style="font-size:60px;color:red;"></i>
    <i class="fa fa-car" style="font-size:50px;color:red;"></i>
    <i class="fa fa-car" style="font-size:20px;color:red;"></i>
    <i class="fa fa-car" style="font-size:50px;color:red;"></i>
    <i class="fa fa-car" style="font-size:60px;color:red;"></i>
    <i class="fa fa-car" style="font-size:70px;color:red;"></i>
    </div>
    <br>
    <div id="chartContainer" style="height: 370px; width: 100%;"></div>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <div id="box1">
    </div>
    </div>>
    </body>
    <script>
    function genScreenshotgraph() 
    {
    html2canvas($('#car'), {
    onrendered: function(canvas) {
    var imgData = canvas.toDataURL("image/jpeg");
    var pdf = new jsPDF();
    pdf.addImage(imgData, 'JPEG', 0, 0, -180, -180);
    pdf.save("download.pdf");
    }
    });
    }
    </script>
    </html>

    • ¿Por qué es jQuery incluye dos veces, y por qué es jQuery UI incluido? Honestamente, jQuery no es necesario aquí en absoluto de lo que puedo decir. document.getElementById('car') o document.querySelector('#car')
    • actualmente estoy trabajando en mi proyecto. así que olvídense de quitar la biblioteca y nada.
    • Ah, ok, no me di cuenta de que.Gracias por la respuesta!
  11. -3

    Que yo sepa no es posible con javascript.

    Lo que usted puede hacer para cada resultado crear una captura de pantalla, guardarlo en algún lugar y momento, el usuario cuando haga clic en guardar el resultado. (Supongo que no de resultado está a sólo 10 así que no es un gran problema para crear 10 de imagen jpeg de resultados)

    • Gracias por responder 🙂 tienes razón! Yo sólo podía crear 10 imágenes JPG de los resultados y, a continuación, una vez que haga clic en el botón, se mostrará la imagen para guardar. El único problema es que cuando inicio el concurso, que tiene que introducir su nombre, y mostrar a través de la prueba, y al final en el cuadro de resultados, se muestra su nombre y dice un comentario como «sentirse Mejor», etc. Yo no sería capaz de poner el nombre de ellos en la imagen o yo?

Dejar respuesta

Please enter your comment!
Please enter your name here