Html2canvas: Solo renderiza lo que está a la vista

De alguna manera, en sus ejemplos en la página de inicio, muestra todo en el cuerpo, incluso lo que no está a la vista ... ¿cómo lo hizo?

Posible duplicado de: https://github.com/niklasvh/html2canvas/issues/117

Entonces, quiero saber cómo puedo capturar un elemento específico. ¿Alguien tiene una solución?

@justein Prueba esto

<div id="test-case">Test-me</div>

html2canvas(document.getElementById("test-case")).then(function(canvas) {
    document.body.appendChild(canvas);
});

Puedo confirmar este comportamiento con la última versión. Representará el tamaño correcto del objeto solicitado, pero en realidad no representará en el lienzo nada que esté fuera de la pantalla de la ventana gráfica actual. Entonces si el

<div id="test-case">Test-me</div>

está visible actualmente en el navegador, se renderizará. Si está fuera de la pantalla, el lienzo está en blanco (pero del tamaño correcto). Parcialmente visible: parcialmente renderizado. El mío no actúa como scrollHeight = 0, representa lo que sea visible cuando se ejecuta el código. (Mi botón está en la parte inferior).

Al igual que el comentario de btm, me gustaría saber cómo se hace en el sitio de ejemplo. ¿Podría depender de algo en Angular o Bootstrap para obtener los recursos fuera de la pantalla?

@cchubb No entiendo qué tienen que ver Angle y Bootstrap con esto. El problema de John me parece una cuestión de renderizar un elemento específico.

Si desea renderizar que está fuera del puerto de visualización, solo use

html2canvas(document.body).then(function (canvas) {});

Si desea renderizar elementos "overflow", elimine el "overflow" en tiempo de ejecución y vuelva a agregar después del proceso usando javascript para agregar className, así:

.no-scroll {
     overflow: visible !important;
}

#main {
     overflow: auto;
     height: 200px;
}

<div id="main">
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
</div>

document.getElementById("main").className = "no-scroll";
html2canvas(document.body).then(function (canvas) {
      document.getElementById("main").className = "";
});

O simplemente apunte html2canvas para representar el elemento dentro del elemento con "desbordamiento", así:

#parent {
     overflow: auto;
     height: 200px;
}

#child {
background-color: #fc0;
height: 600px;
}
<div id="parent">
<div id="main">
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
</div>
</div>

html2canvas(document.getElementById("main")).then(function (canvas) {});

Realmente tiene muchas sugerencias de características que son innecesarias desde mi punto de vista, simplemente apunte a los elementos DOM correctos y use el "CSS" a su favor.

Me lo imaginé. Lo arreglaste en 0.5.0-alpha2. Si utilizo la versión 0.5.0-alpha1, se recorta, pero la versión alpha2 no. Ni siquiera noté que alpha2 estaba disponible porque la página de lanzamientos se enfocaba en alpha1.

Aquí hay un violín que demuestra que funciona ahora con alpha2. https://jsfiddle.net/cchubb/fy7tw7ek/1/ si cambia el recurso externo de nuevo a alpha1, se recortará cuando se haga clic en el enlace inferior. (Debe guardar el archivo de descarga como .png para verlo, los violines no me permiten cambiar la ventana de salida href a datos).

@ btm1 , intente actualizar a Alpha2.

@cchubb Le daré una oportunidad a esto.

@cchubb, el problema subyacente se solucionó en alpha 2 y tienes razón, está bien oculto, ni siquiera me di cuenta de que había un alpha 2.

Hmm, para mí, incluso en alpha2, solo se renderiza la parte del elemento que es "visible" en la ventana gráfica. Consulte http://jsfiddle.net/NPC42/ykvL6a17/ para ver una demostración: html2canvas exporta solo las filas que se desplazan a la ventana gráfica (independientemente de si están visibles en el contenedor de desplazamiento desplazado o no).

¿Estoy llamando mal a html2canvas de alguna manera? Cuando lo pruebo en mi código real (no en el JSFiddle, que creé solo para la demostración), esta sugerencia ayuda a representar todo el elemento: https://github.com/niklasvh/html2canvas/issues/650 , pero espero para evitar piratear la biblioteca.

@NPC No solo renderizará lo que no está a la vista sin que usted haga nada, tiene que cambiarlo a desbordamiento visible ---> exportar muy rápido ---> luego volver a cambiarlo para desplazarse de nuevo o no funcionará. No es ideal en mi opinión, creo que debería haber una opción para que funcione, pero al menos lo hace.

@ btm1 , sí, supongo que esa no es la intención, ya que paso el elemento que está dentro del desplazado, el elemento en sí no tiene ningún recorte de desbordamiento.

Por ahora, en mi aplicación, encontré que necesito volver a unir todo mi elemento al cuerpo, forzando un ancho / alto específico en él (ya que contiene elementos absolutamente posicionados), mientras tanto cubro toda esta cocina con una pantalla completa "Preparando exportación, por favor espere "overlay, porque html2canvas tarda más de 10 segundos en renderizarlo todo. Una vez finalizado el renderizado, lo adjunto a la ubicación original (dentro de un contenedor desplazado), desarmando el ancho / alto.

Es engorroso, pero funciona.

Curiosamente, solo se procesa desde el límite superior visible actualmente del elemento dado.

Pruebe https://jsfiddle.net/bianjp/bpc3nq69/1/. Desplácese hasta "Imprimir pantalla" y haga clic en él. La imagen generada no incluirá las líneas superiores que no son visibles cuando se hace clic.
Utilizando la versión 0.5.0.beta4.

La solución es llamar a $('html, body').scrollTop(0) (o cualquier otra forma de hacer visible la parte superior del elemento) antes de llamar a html2canvas.

gracias @bianjp por la solución propuesta.

Curiosamente, solo se procesa desde el límite superior visible actualmente del elemento dado.

¿Es ese un comportamiento normal ... Me parece muy extraño!

+1

Esta respuesta SO funcionó para mí.

Antes de llamar a html2canvas, desplace el elemento que desea representar en la ventana gráfica.

const el = document.querySelector('#test')
el.scrollIntoView()
setTimeout(function () {
  html2canvas(el, {
    onrendered: function (canvas) {
      document.body.appendChild(canvas)
    },
    useCORS: true
  })
}, 10)

Esto funciona para mi.
La versión de uso es 0.5.0-beta4.

¿Sigue siendo un problema con v1.0.0 ? Si es así, ¿podría compartir un ejemplo en jsfiddle .

Este problema se ha cerrado automáticamente porque no ha habido respuesta a nuestra solicitud de más información del autor original. Con solo la información que se encuentra actualmente en el problema, no tenemos suficiente información para tomar medidas. Comuníquese con nosotros si tiene o encuentre las respuestas que necesitamos para que podamos investigar más.

Hola, @niklashvh

También estaba enfrentando el problema de tomar instantáneas solo visibles para el DOM. Tengo la versión 0.5.0-beta4
Entonces, estoy de acuerdo con la solución @ziyoung . Hice lo mismo que sugirió.

           `$('html,body').scrollTop(0);

     html2canvas( $("#rectangular_div"), {
         useCORS: true,
         dpi: 200,

          onrendered:function(canvas) {

              var str = canvas.toDataURL("image/png");
              var contentType = 'image/png';
              console.log(str);
              b64Data =str;
              imgFrameSave();
          }
        })`

Entonces, configuro la posición div en la parte superior 0 del cuerpo y luego llamo a html2canvas. Entonces, según mi experiencia, recomendé usar la versión 0.5.0-beta4 de @eKoopmans para que pueda evitar el problema de la imagen pixelada y capturar la imagen completa desde DOM.

Eso funciona en el escritorio pero no en el móvil

Lo que hice fue window.scrolTo(0,0) antes de llamar a htmltocanvas (), si está en la parte superior de la pantalla, el div se imprime completo