1

necesito que la captura de pantalla que se toma con html2canvas esté en un div oculto, ya que se muestra en la página y definitivamente no quiero que haga eso. Intenté poniendo el div en el html dandole un id pero no funciona. Este es el codigo que tengo para la captura:

$scope.pdfExport = function() {
  html2canvas(document.body, {
    onrendered: function(canvas) {
      document.body.appendChild(canvas);
    },
    width: 300,
    height: 100
  });
  html2canvas($("#tablaTransferencia"), {
    onrendered: function(canvas) {
      document.body.appendChild(canvas);
    },
  });
}

2 respuestas 2

1

El problema que le veo, es que en el código que muestras, no aparece que objeto es "canvas". El caso es que si a ese objeto, le indicas un estilo "visibility: hidden", quedaría oculto.

Prueba añadir esta línea antes de "document.body.appendChild(canvas);"

canvas.style.visibility="hidden";

0

para guardar la foto en un <div> oculto:

La forma seria agregar la foto dentro de un bloque invisible, una forma posible es agregando el canvas a un div que ya este oculto de antemano.

var tomarInstantanea = function() {
    html2canvas(document.getElementById("target"), {
        onrendered: function (canvas) {
            var divoculto = document.getElementById('divoculto');
            divoculto.appendChild(canvas);
        },
        width:320,
        height:220
    });
}
#target{
    width:300px;
    height:200px;
    background:blue;
    color:#fff;
}

#divoculto {
     /* puedes comprobar la ocultacion comentando esta linea */
     display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<div id="target">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis eleifend elit. Donec lectus sem, scelerisque sit amet facilisis quis, gravida a lacus. Nunc at lorem egestas, gravida lorem quis, pulvinar ante. Quisque id tempus libero. Mauris hendrerit nunc risus, ac laoreet lectus gravida et. Nam euismod magna ac enim posuere sagittis. Fusce at egestas enim, eu hendrerit enim.
</div>

<button onclick="tomarInstantanea()">tomar foto</button>

<div id="divoculto">
  
</div>

para ocultar el <div> a fotografiar:

El truco seria poner visibility: hidden. En el siguiente ejemplo también he usado position: fixed para que no aparezca en el layout principal y z-index: -1 para que no afecte los eventos del botón. Espero que te ayude.

var tomarInstantanea = function() {
    html2canvas(document.getElementById("target"), {
        onrendered: function (canvas) {
            document.body.appendChild(canvas);
        },
        width:320,
        height:220
    });
}
#target{
    position: fixed;
    visibility: hidden;
    width:300px;
    height:200px;
    background:blue;
    color:#fff;
    z-index: -1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<div id="target">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis eleifend elit. Donec lectus sem, scelerisque sit amet facilisis quis, gravida a lacus. Nunc at lorem egestas, gravida lorem quis, pulvinar ante. Quisque id tempus libero. Mauris hendrerit nunc risus, ac laoreet lectus gravida et. Nam euismod magna ac enim posuere sagittis. Fusce at egestas enim, eu hendrerit enim.
</div>

<button onclick="tomarInstantanea()">tomar foto</button>

4
  • No, digamos que tengo una tabla o x texto en la pagina, lo que quiero es que la captura que sea tomada no sea visible. Commented el 12 jun. 2016 a las 0:53
  • Creo que la linea "document.body.appendChild(canvas);" es la que hace que se muestre al final de la pagina, pero no estoy segura. Soy nueva en esto y sería genial que me confirmaras si lo hace o no. De antemano, gracias. Commented el 12 jun. 2016 a las 1:12
  • @YunueIñiguezGonzález hola ya he editado la respuesta para que se ajuste a lo que estas buscando. Fijate que en lugar de agregar el canvas al body, primero busco el objetivo y lo agrego ahi mismo. saludos. Commented el 12 jun. 2016 a las 6:06
  • Hola @YunueIñiguezGonzález si esta o cualquier otra respuesta ha resuelto su problema, por favor considera aceptarla clicando la marca de check (en forma de V debajo de la puntuación de la respuesta). Esto indica a la comunidad que has encontrado una solución y de paso os dará reputación a ambos (a tí y quien ha respondido). Por supuesto, no tienes ninguna obligación de hacerlo. Commented el 15 jun. 2016 a las 0:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.