<p>html2canvas no representa imágenes ubicadas en el elemento</p>

Hola.
Tengo exactamente el mismo problema.

Mismo problema aquí.
Estoy tratando de obtener la toma de un tweet, y la imagen adjunta no aparece.
Imagen adjunta.

Creo que las imágenes de otros sitios están bloqueadas de forma predeterminada porque "contamina el lienzo de HTML5". Aquí está la opción que necesita usar cuando llama al renderizador:

atributo: allowTaint
tipo: booleano
predeterminado: falso
descripción: Permitir que las imágenes de origen cruzado contaminen el lienzo

Lo encontré aquí: https://html2canvas.hertzen.com/documentation.html.

el mismo problema....
y mis imágenes vienen del mismo origen

Me he enfrentado al mismo problema, la mejor manera de resolver el problema es ejecutar el proyecto en el servidor y ver el resultado.
En mi caso, anteriormente estaba ejecutando los archivos html directamente sin ningún servidor, pero luego de buscar un poco en Google obtuve una solución para probarlo en un servidor.
Probé mi proyecto usando Visual Studio y funcionaba perfectamente, mis imágenes dentro de la etiqueta div también se copiaban

Inserte la opción allowTaint para ver todas las imágenes en su captura de pantalla

html2canvas(document.getElementById('invoice-panel'), { letterRendering: 1, allowTaint : true, onrendered : function (canvas) { } });

Tengo una lista de elementos div en.
Cuando trato de capturar cada div por id, entonces parte de la mitad de la porción div capturada y parte de la imagen de captura del div en blanco.
¿Puede decirme cuál es el problema y cómo puedo solucionarlo? @

El mismo problema. Gracias por la solución.

html2canvas no convierte imágenes dadas src en formato base64. He impreso el registro. Por favor ayuda

1283ms html2canvas: Documento clonado html2canvas.js:1487
3936ms html2canvas: CanvasRenderer inicializado con tamaño 601 x 965 html2canvas.js:1487
3937ms html2canvas: Iniciando NodeParser html2canvas.js:1487
4014ms html2canvas: nodos obtenidos, total: 10 html2canvas.js:1487
4015ms html2canvas: Calcular clips de desbordamiento html2canvas.js:1487
4034ms html2canvas: Empezar a obtener imágenes html2canvas.js:1487
4044ms html2canvas: imagen n.º 1 agregada data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pL html2canvas.js:1487
4047ms html2canvas: se agregaron datos de la imagen n.° 2: image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aH html2canvas.js:1487
4051ms html2canvas: Finalizó la búsqueda de imágenes html2canvas.js:1487
4052ms html2canvas: Imagen n.° 1 cargada con éxito
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…AKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/2Q==", imagen: img, corrupto: nulo, promesa: h}
html2canvas.js:1487
4056ms html2canvas: imagen n.º 2 cargada correctamente
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…4PXOaUMB0/GlrcdiYtkcc/WkzjqfwqMPxzxRvAz3oSCx//9k=", imagen: img, corrupto: nulo, promesa: h}
html2canvas.js:1487
4059ms html2canvas: Imágenes cargadas, comenzando a analizar html2canvas.js:1487
4060ms html2canvas: Creación de contextos de apilamiento html2canvas.js:1487
4064ms html2canvas: ordenar contextos de apilamiento html2canvas.js:1487
4066ms html2canvas: cola de procesamiento creada con 9 elementos html2canvas.js:1487
4104ms html2canvas: renderizado terminado html2canvas.js:1487
4109ms html2canvas: Lienzo de recorte en: izquierda: 28 arriba: 529 ancho: 545 alto: 0 html2canvas.js:1487
4111ms html2canvas: Cultivo resultante con ancho 545 y alto 0 con x 28 e y 529

html2canvsas no representa las imágenes dadas con base64 src, la llamada no vuelve a "onrendered"
función. Por favor ayuda

1283ms html2canvas: Documento clonado html2canvas.js:1487
3936ms html2canvas: CanvasRenderer inicializado con tamaño 601 x 965 html2canvas.js:1487
3937ms html2canvas: Iniciando NodeParser html2canvas.js:1487
4014ms html2canvas: nodos obtenidos, total: 10 html2canvas.js:1487
4015ms html2canvas: Calcular clips de desbordamiento html2canvas.js:1487
4034ms html2canvas: Empezar a obtener imágenes html2canvas.js:1487
4044ms html2canvas: imagen n.º 1 agregada data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pL html2canvas.js:1487
4047ms html2canvas: se agregaron datos de la imagen n.° 2: image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aH html2canvas.js:1487
4051ms html2canvas: Finalizó la búsqueda de imágenes html2canvas.js:1487
4052ms html2canvas: Imagen n.° 1 cargada con éxito
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…AKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/2Q==", imagen: img, corrupto: nulo, promesa: h}
html2canvas.js:1487
4056ms html2canvas: imagen n.º 2 cargada correctamente
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…4PXOaUMB0/GlrcdiYtkcc/WkzjqfwqMPxzxRvAz3oSCx//9k=", imagen: img, corrupto: nulo, promesa: h}
html2canvas.js:1487
4059ms html2canvas: Imágenes cargadas, comenzando a analizar html2canvas.js:1487
4060ms html2canvas: Creación de contextos de apilamiento html2canvas.js:1487
4064ms html2canvas: ordenar contextos de apilamiento html2canvas.js:1487
4066ms html2canvas: cola de procesamiento creada con 9 elementos html2canvas.js:1487
4104ms html2canvas: renderizado terminado html2canvas.js:1487
4109ms html2canvas: Lienzo de recorte en: izquierda: 28 arriba: 529 ancho: 545 alto: 0 html2canvas.js:1487
4111ms html2canvas: Cultivo resultante con ancho 545 y alto 0 con x 28 e y 529

@SebasAlvarez : la opción allowTaint ya no funciona. ¿Todavía te funciona?

@SebasAlvarez , @sandeepnagra :
estoy usando este código para la captura de pantalla de la imagen en la nueva pestaña, pero la imagen no se muestra y también me cansé con "a llowTaint: true ", solo funciona dentro de la misma ventana pero no en la nueva pestaña.
este es mi código:
función render(){
html2canvas(documento.cuerpo, { allowTaint : verdadero,
onrendered: función (lienzo) {
documento.cuerpo.appendChild(lienzo);
ventana.abrir(canvas.toDataURL());
}
});
}
¿Puede decirme cuál es el problema, cómo puede solucionar este?

@venkateshduddu : ¿está cambiando el enfoque a una nueva pestaña antes de tomar una captura de pantalla?

@sandeepnagra : no sandeep, solo estoy usando el evento de clic. una captura de pantalla más funciona si uso la ruta de la imagen local pero la ruta del servidor no funciona en la nueva pestaña.

@venkateshduddu : un evento de clic no cambiará el enfoque a una nueva pestaña automáticamente, debe activarlo. Así que intente eso primero, estoy 100% seguro de que resolverá su problema.

Con respecto a la ruta del servidor, ¿está autenticada esa unidad de red? En caso afirmativo, ¿se está autenticando antes de cargar archivos en la unidad de red? Es una historia completamente diferente si desea cargarlos en el depósito S3.

hola, cuando intento filtrar un iframe con una cámara ip interna, devuelve una imagen nula, ¿pueden ayudarme?

Si usé allowTaint, entonces la opción de descarga no funcionó. Por favor ayuda

el mismo problema....
y mis imágenes vienen del mismo origen

Acabo de solucionar este problema.
por favor habilite la opción 'useCORS' a 'true'
códigos a continuación:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

Muchas gracias @Sotyoyo , mi error se solucionó con el código anterior. Gracias Gracias

@Sotyoyo Muchas gracias hermano, Dios te bendiga <3

@Sotyoyo Muchas gracias, es un trabajo para mí :)

La imagen no se renderiza ¿Hay algún problema en mi código?

html2canvas(document.getElementById("html-2-pdfwrapper"), {
registro: cierto,
representación de letras: 1,
allowTaint: falso,
usarCORS: cierto,
onrendered: función (lienzo) {
var img = canvas.toDataURL('imagen/png');
var doc = nuevo jsPDF();
doc.addImage(img, 'JPEG', 20, 20);
doc.save('prueba2.pdf');
}
});

el mismo problema....
y mis imágenes vienen del mismo origen

Acabo de solucionar este problema.
por favor habilite la opción 'useCORS' a 'true'
códigos a continuación:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

¡es trabajo! ¡gracias!

el mismo problema....
y mis imágenes vienen del mismo origen

Acabo de solucionar este problema.
por favor habilite la opción 'useCORS' a 'true'
códigos a continuación:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

eso es correcto /

html2canvas(document.querySelector("#id-of-element"),{ logging: true, letterRendering: 1, allowTaint: false, useCORS: true }).then(canvas => {
var imgData = canvas.toDataURL('imagen/jpeg');
});

Inserte la opción allowTaint para ver todas las imágenes en su captura de pantalla

html2canvas(document.getElementById('invoice-panel'), { letterRendering: 1, allowTaint : true, onrendered : function (canvas) { } });

Gracias. Funciona bien.

Pero no puedo clonar el estilo de imagen en el lienzo.

Todavía enfrento el mismo problema incluso después de usar las opciones anteriores a continuación es mi código.
var elemento = document.querySelector("#map-image-id");
html2canvas(elemento, {
registro: cierto,
representación de letras: 1,
allowTaint: falso,
usarCORS: verdadero
}).then(canvasElm => {
var imageType = "imagen/png";
var imageData = canvasElm.toDataURL(imageType);
var src = encodeURI(imageData);
consola.log("origen", origen);
console.log("Datos de imagen", datos de imagen);

Todavía enfrento el mismo problema incluso después de usar las opciones anteriores a continuación es mi código.
var elemento = document.querySelector("#map-image-id");
html2canvas(elemento, {
registro: cierto,
representación de letras: 1,
allowTaint: falso,
usarCORS: verdadero
}).then(canvasElm => {
var imageType = "imagen/png";
var imageData = canvasElm.toDataURL(imageType);
var src = encodeURI(imageData);
consola.log("origen", origen);
console.log("Datos de imagen", datos de imagen);

lo mismo para ti. ¿Lo has solucionado?

Todavía enfrento el mismo problema incluso después de usar las opciones anteriores a continuación es mi código.
var elemento = document.querySelector("#map-image-id");
html2canvas(elemento, {
registro: cierto,
representación de letras: 1,
allowTaint: falso,
usarCORS: verdadero
}).then(canvasElm => {
var imageType = "imagen/png";
var imageData = canvasElm.toDataURL(imageType);
var src = encodeURI(imageData);
consola.log("origen", origen);
console.log("Datos de imagen", datos de imagen);

mismo problema conmigo alguna ayuda

Estoy viendo el mismo problema. ¿Qué estoy haciendo mal?

html2canvas(document.getElementById(<id>), {
    logging: true,
    letterRendering: 1,
    allowTaint: false,
    useCORS: true
}).then(result => {
    var img = result.toDataURL("image/png");
    savePng(img);
});

Lo siguiente también funciona si desea incluir <img src-"..." /> :

html2canvas(report, {letterRendering: 1, allowTaint: true, useCORS: true})
            .then((canvas) => {      
                const imgData = canvas.toDataURL('image/png');
               // const pdf = new jsPDF();
               // pdf.addImage(imgData, 'PNG', 10, 10);
                //pdf.save("foo.pdf");  
            });

Mi contenido contiene una imagen que proviene de Aws.s3(). Los comentarios mencionados anteriormente no funcionan para mi caso.

html2canvas(contenido, {letterRendering: 1,allowTaint: false,useCORS:true})
.entonces(lienzo => {
const imgData = canvas.toDataURL('imagen/png');
consola.log(imgData);
const pdf = nuevo jsPDF();
pdf.addImage(imgData, 'PNG', 10, 10, canvas.width, canvas.height);
pdf.save('descargar.pdf');
});

El lienzo de salida solo contiene un cuadro en blanco en lugar de una imagen. ¿Alguien tiene una solución para mi caso?

Mi contenido contiene una imagen que proviene de Aws.s3(). Los comentarios mencionados anteriormente no funcionan para mi caso.

html2canvas(contenido, {letterRendering: 1,allowTaint: false,useCORS:true})
.entonces(lienzo => {
const imgData = canvas.toDataURL('imagen/png');
consola.log(imgData);
const pdf = nuevo jsPDF();
pdf.addImage(imgData, 'PNG', 10, 10, canvas.width, canvas.height);
pdf.save('descargar.pdf');
});

El lienzo de salida solo contiene un cuadro en blanco en lugar de una imagen. ¿Alguien tiene una solución para mi caso?

mismo problema aquí. imágenes provenientes del depósito S3

el mismo problema....
y mis imágenes vienen del mismo origen

Acabo de solucionar este problema.
por favor habilite la opción 'useCORS' a 'true'
códigos a continuación:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

Gracias
A mi me funciona ❤❤

El acceso a la imagen en ' https://image/logo link' desde el origen ' http://localhost :3000' ha sido bloqueado por la política de CORS: No hay un encabezado 'Access-Control-Allow-Origin' en el recurso solicitado.
¿Es esta la razón por la que mi logotipo no aparece en el archivo pdf?
Descanse todo el texto con css aplicado y aparece el logotipo de la marca que está en mi carpeta estática.
Responda necesito ayuda con esto. Estoy intentando esto desde hace más de 2 semanas.

Para cualquiera que venga aquí, después de probar muchas cosas, descubrí que para obtener imágenes de recursos externos (como el depósito S3), debe habilitar useCORS = true para html2canvas y habilitar la política CORS en las imágenes servidas desde S3.

Lo resolví usando el proxy html2canvas. Puede ver algunos detalles sobre el uso y las pruebas aquí:
https://github.com/zeusstl/html2canvas-proxy-nodejs