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

screenshot javascript

Question

Estoy creando algo llamado "HTML Quiz". Funcionó 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 obtuvieron directamente de 10. Me gustaría tener un botón que diga: "Capturar resultados" y hacer que de alguna manera tome una captura de pantalla o algo del div, y luego solo muestre la imagen capturada en la página donde pueden hacer clic con el botón derecho y "Guardar imagen como".

Realmente me encantaría hacer esto para que puedan compartir sus resultados con los demás. No quiero que "copien" los resultados porque pueden cambiar eso fácilmente. Si cambian lo que dice en la imagen, bueno.

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

Answer 1

Después de horas de investigación, finalmente encontré una solución para tomar una captura de pantalla de un elemento, incluso si el FLAG de origin-clean está configurado (para evitar XSS), es por eso que incluso puedes 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>
$("img#captured").attr("src", "data:image/png;base64,"+data);
}

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

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

Answer 2

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

Un ejemplo de este trabajo está disponible en este fiddle .

Answer 3

No puede tomar una captura de pantalla: sería un riesgo de seguridad irresponsable permitirle hacerlo. Sin embargo, puedes:

• Hacer cosas del lado del servidor y generar una imagen
• Dibuja algo similar a un lienzo y renderízalo en una imagen (en un navegador que lo admita)
• Use otra biblioteca de dibujo para dibujar directamente en la imagen (lenta, pero funcionaría en cualquier navegador)

Answer 4

Otra alternativa es usar la API de JavaScript de GrabzIt. Todo lo que necesita hacer es pasar el selector de CSS del div que desea capturar. A continuación, creará una captura de pantalla de ese 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>

Aquí hay más ejemplos para resolver cómo capturar elementos HTML . Para una divulgación completa, soy el creador de la API.

Answer 5

Por lo que sé que no puedes hacer eso, puedo estar equivocado. Sin embargo, haría esto con php, generar un JPEG usando las funciones estándar de php y luego mostrar la imagen, no debería ser un trabajo muy difícil, sin embargo depende de cuán ostentoso sea el contenido del DIV.

Answer 6

Por lo que sé, no es posible con javascript.

Lo que puede hacer para cada resultado, cree una captura de pantalla, guárdela en algún lugar y señale al usuario cuando haga clic en guardar resultado. (Supongo que ninguno de los resultados es solo 10, por lo que no es gran cosa crear una imagen de resultados de 10 jpegs)

Answer 7

Si desea tener el cuadro de diálogo "Guardar como", simplemente pase la imagen al script php, que agrega encabezados apropiados

Ejemplo de secuencia de comandos "todo en uno" 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>

Answer 8

No, no sé de una forma de ''captura de pantalla'' de un elemento, pero lo que podrías hacer es dibujar los resultados de la prueba en un elemento canvas y luego utilizar la función HTMLCanvasElement objeto toDataURL para obtener data: URI con los contenidos de la imagen .

Cuando el cuestionario haya terminado, haz 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 "Capturar", haz lo siguiente:

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 guardarla. No hay forma de invocar un diálogo de ''guardar como'', por lo que esto es lo mejor que puede hacer en mi opinión.

Answer 9

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

quotation

Answer 10

var shot1=imagify($(''#widget'')[0], (base64) => {
$(''img.screenshot'').attr(''src'', base64);
});

Eche un vistazo al paquete htmlshot , luego, revise profundamente la sección del lado del cliente :

npm install htmlshot