¿Cómo tomar captura de pantalla de un div con JavaScript?
Estoy creando algo llamado "Prueba HTML". Se ejecuta completamente en JavaScript y es genial.
Al final, aparece un cuadro de resultados que dice "Tus resultados:" y muestra cuánto tiempo tomaron, qué porcentaje obtuvieron y cuántas preguntas respondieron correctamente de 10. Me gustaría tener un botón que diga "Capture resultados" y haga que de alguna manera tome una captura de pantalla o algo del div, y luego simplemente muestre la imagen capturada en la página donde pueden hacer clic derecho y "Guardar imagen como".
Realmente me encantaría hacer esto para que puedan compartir sus resultados con otros. No quiero que "copien" los resultados porque pueden cambiarlos fácilmente. Si cambian lo que dice en la imagen, pues bueno.
¿Alguien sabe una manera de hacer esto o algo similar?
No, no conozco una manera de hacer una 'captura de pantalla' de un elemento, pero lo que podría hacer es dibujar los resultados del cuestionario en un elemento de lienzo y luego usar la función HTMLCanvasElementdel objeto toDataURLpara obtener un data:URI con el contenido de la imagen.
Cuando termine la prueba, 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", haga 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 un cuadro de diálogo de "guardar como", así que, en mi opinión, esto es lo mejor que puedes 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 a que btnSavese haga clic en el botón con la identificación. Cuando es así, convierte el widgetdiv en 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 .
