0
315
Views¿Cómo capturar lo que es visible a través de un div?
Supongamos que tengo una imagen y un div cuya posición es absoluta y está por encima de esa imagen (índice z de div más que índice z de imagen). Algo como esto: 
Quiero tomar una captura de pantalla de lo que se ve a través del div usando JavaScript. Al principio pensé en cambiar el div a un lienzo y luego escribí este código:
<div class="utility-btn"> <button class="enquiry-btn" onclick="openEnquiry()">?</button> </div> <div id="enquiry"> <button id="close" onclick="closeEnquiry()">X</button> <div class="cover"> <canvas id="capture"></canvas> <button class="btn" onclick="takeScreenshot()"> Click to enquiry </button> </div> </div>Función para tomar captura de pantalla:
function takeScreenshot() { var canvas = document.getElementById('capture'); ctx = canvas.getContext('2d'); var backCanvas = document.createElement('canvas'); backCanvas.width = canvas.width; backCanvas.height = canvas.height; var backCtx = backCanvas.getContext('2d'); backCtx.drawImage(canvas, 0, 0); ctx.drawImage(backCanvas, 0, 0); var dataURL = backCanvas.toDataURL(); console.log(dataURL); } Pero la imagen de dataURL no era lo que esperaba, era solo una imagen en blanco: 
¿Cómo puedo implementar esta función? ¿Cómo puedo hacerlo sin usar ninguna biblioteca externa?
1 answers
Answer question0
Hay dos problemas:
#1
Si observamos su fragmento de código responsable de tomar la captura de pantalla
function takeScreenshot() { var canvas = document.getElementById('capture'); ctx = canvas.getContext('2d'); var backCanvas = document.createElement('canvas'); backCanvas.width = canvas.width; backCanvas.height = canvas.height; var backCtx = backCanvas.getContext('2d'); backCtx.drawImage(canvas, 0, 0); ctx.drawImage(backCanvas, 0, 0); var dataURL = backCanvas.toDataURL(); console.log(dataURL); } podemos ver que el canvas es el elemento en el que desea que se tome la captura de pantalla. Más tarde, creará un nuevo lienzo vacío backCanvas y lo hará del tamaño del primer lienzo. Luego, dibuja el primer lienzo vacío en el segundo y, finalmente, el segundo lienzo vacío vuelve al primero.
Así que eso no tiene demasiado sentido.
En su lugar, debe tomar el lienzo real generado por threeJS. Estas líneas de su código agregan un elemento <canvas> al contenedor <div> , threeJS está usando:
const container = document.getElementById('container'); container.appendChild(renderer.domElement);Podemos referenciarlo usando:
document.getElementById("container").children[0]#2
Como threeJS usa WebGL para dibujar cosas, su contexto de representación no es el normal y, por razones de rendimiento, el navegador borra el búfer de dibujo después de que se haya dibujado algo, por lo que su captura de pantalla aparecerá vacía todo el tiempo. Hay una opción que debe pasar al constructor THREE.WebGLRenderer para mantener el búfer de dibujo llamado preserveDrawingBuffer .
Así que cambia esta línea:
renderer = new THREE.WebGLRenderer();a esto
renderer = new THREE.WebGLRenderer({preserveDrawingBuffer: true});y su función de captura de pantalla a esto:
function takeScreenshot() { var canvas = document.getElementById('capture'); ctx = canvas.getContext('2d'); ctx.drawImage(document.getElementById("container").children[0], 0, 0); var dataURL = canvas.toDataURL(); console.log(dataURL); }