¿Cómo tomar una captura de pantalla de un div con JavaScript?

No dudes en compartir nuestro sitio y códigos con otro, necesitamos tu ayuda para hacer crecer nuestra comunidad.

Solución:

No, no conozco una forma de ‘capturar pantalla’ de un elemento, pero lo que podría hacer es dibujar los resultados del cuestionario en un elemento de lienzo y luego usar el HTMLCanvasElement objetos toDataURL función para obtener un data: URI con el contenido de la imagen.

Cuando termine el cuestionario, haga 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 haga clic en “Capturar”, haz esto:

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

Esto abrirá una nueva pestaña o ventana con la ‘captura de pantalla’, lo que permitirá al usuario guardarla. No hay forma de invocar una especie de diálogo ‘guardar como’, por lo que, en mi opinión, esto es lo mejor que puede hacer.

Esta es una expansión de la respuesta de @ Dathan, usando 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 espera el botón con la identificación btnSave para hacer clic. Cuando lo es, convierte el widget div a un elemento de lienzo y luego usa la interfaz saveAs() FileSaver (a través de FileSaver.js en navegadores que no lo admiten de forma nativa) para guardar el div como una imagen llamada “Dashboard.png”.

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

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 FLAG está configurado (para evitar XSS), por eso incluso puede capturar, por ejemplo, Google Maps (en mi caso). Escribí una función universal para obtener una captura de pantalla. Lo único que necesita además es la biblioteca html2canvas (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#captured").attr("src", "data:image/png;base64,"+data);
);

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

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
    );

valoraciones y reseñas

Tienes la opción de sustentar nuestra faena ejecutando un comentario y valorándolo te lo agradecemos.

---

---

Utiliza Nuestro Buscador