Html2canvas: Devuelve una imagen en blanco para cualquier elemento cuando el cuerpo del documento tiene más de 30.000 píxeles de alto.

Creado en 31 may. 2016  ·  16Comentarios  ·  Fuente: niklasvh/html2canvas

La biblioteca devuelve una imagen vacía cuando el cuerpo del documento tiene más de 30.000 px. Intentaría capturar un elemento de 100 x 100. Pero obtiene una imagen en blanco del elemento en un cuerpo alto.

Aquí hay un violín que demuestra este error.

https://jsfiddle.net/fvo1xh8b/2/

Puede cambiar el tamaño del cuerpo a menos de 30.000 y funciona bien.

Needs More Information
Fuente
picture charlie-lk

Comentario más útil

@niklasvh Esta es una

  • Por defecto, el ancho / alto máximo según los requisitos del navegador para el lienzo
  • Divide y conquista usando varios elementos de lienzo y devuelve una matriz.
  • Lanza un error en la consola avisando sobre las limitaciones del lienzo y sugiriendo formas de implementarlo.

En mi caso, estoy clonando todo el cuerpo y solo configuro el ancho / alto máximo: html2canvas(el, {height: 3000, width: 3000}) .

picture toadkicker en 10 oct. 2018
👍9 ❤2 🎉2 👎1

Todos 16 comentarios

Tengo exactamente el mismo problema que tú. ¿Has encontrado alguna solución a esto?

Sebastianvarv picture Sebastianvarv en 15 feb. 2017

http://stackoverflow.com/questions/37520013/html2canvas-returns-invalid-image-when-the-body-height-is-more-than-30000-pixels

charlie-lk picture charlie-lk en 15 feb. 2017

emm, tengo el mismo problema, pero finalmente, ¡lo descubrí!
en mi caso, aquí está mi solución:
poner un iframe en su elemento de cuerpo, como

<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>

y cada elemento que necesita convertir en lienzo, puede copiarlos y ponerlos en este iframe, y usar html2canvas, y luego eliminarlo, así

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);
netweng picture netweng en 25 oct. 2017

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

niklasvh picture niklasvh en 12 dic. 2017

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.

no-response[bot] picture no-response[bot] en 12 dic. 2017

hola cuando trato de filtrar un iframe con cámara ip interna, devuelve una imagen vacía, por favor, ¿pueden ayudarme?

AntonioDilorenzo picture AntonioDilorenzo en 21 ago. 2018

@niklasvh Esta es una

  • Por defecto, el ancho / alto máximo según los requisitos del navegador para el lienzo
  • Divide y conquista usando varios elementos de lienzo y devuelve una matriz.
  • Lanza un error en la consola avisando sobre las limitaciones del lienzo y sugiriendo formas de implementarlo.

En mi caso, estoy clonando todo el cuerpo y solo configuro el ancho / alto máximo: html2canvas(el, {height: 3000, width: 3000}) .

toadkicker picture toadkicker en 10 oct. 2018
👍9 ❤2 🎉2 👎1

@toadkicker hermano, guardas mi código / trabajo hoy jajajajajajajaht muchas gracias

leandrosouza0786 picture leandrosouza0786 en 26 sept. 2019

@toadkicker ¡Gracias!

Liberateur picture Liberateur en 24 dic. 2019

emm, tengo el mismo problema, pero finalmente, ¡lo descubrí!
en mi caso, aquí está mi solución:
poner un iframe en su elemento de cuerpo, como

<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>

y cada elemento que necesita convertir en lienzo, puede copiarlos y ponerlos en este iframe, y usar html2canvas, y luego eliminarlo, así

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);

Probé este método, pero no funcionó exactamente. A mi manera, funcionará con el siguiente código:

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

Y si desea aplicar su estilo CSS de la misma manera que en el documento actual, también debe copiar el estilo en el iframe:

// add style
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'your_style_file_url.css';
canvas_handler.contentDocument.head.appendChild(link);

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});
ricosmall picture ricosmall en 16 mar. 2020

Nuevamente, esta es una limitación en el propio navegador y esta biblioteca no maneja el error correctamente. Ninguna solución de codificación, además de limitar la cantidad de píxeles capturados, la cambiará.

toadkicker picture toadkicker en 16 mar. 2020

emm, tengo el mismo problema, pero finalmente, ¡lo descubrí!
en mi caso, aquí está mi solución:
poner un iframe en su elemento de cuerpo, como

<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>

y cada elemento que necesita convertir en lienzo, puede copiarlos y ponerlos en este iframe, y usar html2canvas, y luego eliminarlo, así

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);

Probé este método, pero no funcionó exactamente. A mi manera, funcionará con el siguiente código:

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

Y si desea aplicar su estilo CSS de la misma manera que en el documento actual, también debe copiar el estilo en el iframe:

// add style
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'your_style_file_url.css';
canvas_handler.contentDocument.head.appendChild(link);

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

en mi caso, todos los elementos son svg o estilo en línea, por lo que no necesito agregar una hoja de estilo. pero sí, debe agregar su hoja de estilo si es necesario

netweng picture netweng en 30 mar. 2020

Me he enfrentado al mismo problema. Necesitaba hacer una imagen desde la ventana modal (con posición fija). Siempre recibí una imagen en blanco. El problema estaba en la posición de desplazamiento. Este código funciona para mí:

const el = document.getElementById('html-to-canvas-area')
const area = el.getBoundingClientRect()
html2canvas(el, {
  scrollX: 0,
  scrollY: 0,
  width: area.width,
  height: area.height
})
invisor picture invisor en 24 sept. 2020
🎉5 👍3 ❤1

¡Funcionó para mí como un encanto! ¡Gracias por la inteligente solución!

flaviostutz picture flaviostutz en 30 sept. 2020

@invisor salvavidas! Eso es lo único que funcionó para mí.

MEGApixel23 picture MEGApixel23 en 26 oct. 2020

Esta opción también podría ser una solución para desplazar casos relacionados

{
  scrollX: 0,
  scrollY: -window.scrollY
}
seahindeniz picture seahindeniz en 9 nov. 2020
❤2 🎉1
¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

Juliazhong picture Juliazhong  ·  4Comentarios
tibewww picture tibewww  ·  4Comentarios
Josh10101010 picture Josh10101010  ·  3Comentarios
anthonymejia picture anthonymejia  ·  4Comentarios
Loki180 picture Loki180  ·  4Comentarios