<p>html2canvas não renderiza imagens localizadas no elemento</p>

Oi.
Eu tenho exatamente o mesmo problema.

Mesma questão aqui.
Estou tentando tirar a foto de um tweet e a imagem anexada não aparece.
Imagem anexada.

Acredito que imagens de outros sites são bloqueadas por padrão porque "contaminam a tela HTML5". Aqui está a opção que você precisa usar ao chamar o renderizador:

atributo: allowTaint
tipo: booleano
padrão: falso
descrição: se deve permitir que imagens de origem cruzada contaminem a tela

Encontrei aqui: https://html2canvas.hertzen.com/documentation.html.

mesmo problema....
e minhas imagens estão vindo da mesma origem

Eu enfrentei o mesmo problema, a melhor maneira de resolver o problema é executar o projeto no servidor e ver o resultado.
No meu caso, antes eu estava executando os arquivos html diretamente sem nenhum servidor, mas depois de pesquisar um pouco, consegui uma solução para experimentá-lo em um servidor.
Eu tentei meu projeto usando o Visual Studio e estava funcionando perfeitamente, minhas imagens dentro da tag div também estavam sendo copiadas

Insira a opção allowTaint para visualizar todas as imagens em sua captura de tela

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

Eu tenho lista de elemento div em.
Quando tento capturar cada div por id, algumas das metades da div capturadas e algumas das imagens de captura da div em branco.
você pode me dizer qual é o problema e como posso corrigi-lo. @

O mesmo problema. Obrigado pela solução.

html2canvas não convertendo imagens fornecidas src no formato base64. Eu imprimi o log. Por favor, ajude

1283ms html2canvas: Documento clonado html2canvas.js:1487
3936ms html2canvas: CanvasRenderer inicializado com tamanho 601 x 965 html2canvas.js:1487
3937ms html2canvas: Iniciando NodeParser html2canvas.js:1487
4014ms html2canvas: nós buscados, total: 10 html2canvas.js:1487
4015ms html2canvas: Calcular clipes de estouro html2canvas.js:1487
4034ms html2canvas: Comece a buscar imagens html2canvas.js:1487
4044ms html2canvas: Adicionado imagem #1 data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pL html2canvas.js:1487
4047ms html2canvas: Adicionado imagem nº 2 data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aH html2canvas.js:1487
4051ms html2canvas: pesquisa de imagens concluída html2canvas.js:1487
4052ms html2canvas: Imagem #1 carregada com sucesso
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…AKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/2Q==", image: img, tainted: null, promise: h}
html2canvas.js:1487
4056ms html2canvas: Imagem 2 carregada com sucesso
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…4PXOaUMB0/GlrcdiYtkcc/WkzjqfwqMPxzxRvAz3oSCx//9k=", image: img, tainted: null, promise: h}
html2canvas.js:1487
4059ms html2canvas: Imagens carregadas, começando a analisar html2canvas.js:1487
4060ms html2canvas: Criando contextos de empilhamento html2canvas.js:1487
4064ms html2canvas: Classificando contextos de empilhamento html2canvas.js:1487
4066ms html2canvas: Fila de renderização criada com 9 itens html2canvas.js:1487
4104ms html2canvas: renderização concluída html2canvas.js:1487
4109ms html2canvas: Cortando tela em: esquerda: 28 topo: 529 largura: 545 altura: 0 html2canvas.js:1487
4111ms html2canvas: Corte resultante com largura 545 e altura 0 com x 28 e y 529

html2canvsas não renderizando imagens fornecidas com base64 src, a chamada não está voltando para "onrendered"
função. Por favor, ajude

1283ms html2canvas: Documento clonado html2canvas.js:1487
3936ms html2canvas: CanvasRenderer inicializado com tamanho 601 x 965 html2canvas.js:1487
3937ms html2canvas: Iniciando NodeParser html2canvas.js:1487
4014ms html2canvas: nós buscados, total: 10 html2canvas.js:1487
4015ms html2canvas: Calcular clipes de estouro html2canvas.js:1487
4034ms html2canvas: Comece a buscar imagens html2canvas.js:1487
4044ms html2canvas: Adicionado imagem #1 data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pL html2canvas.js:1487
4047ms html2canvas: Adicionado imagem nº 2 data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aH html2canvas.js:1487
4051ms html2canvas: pesquisa de imagens concluída html2canvas.js:1487
4052ms html2canvas: Imagem #1 carregada com sucesso
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…AKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/2Q==", image: img, tainted: null, promise: h}
html2canvas.js:1487
4056ms html2canvas: Imagem 2 carregada com sucesso
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…4PXOaUMB0/GlrcdiYtkcc/WkzjqfwqMPxzxRvAz3oSCx//9k=", image: img, tainted: null, promise: h}
html2canvas.js:1487
4059ms html2canvas: Imagens carregadas, começando a analisar html2canvas.js:1487
4060ms html2canvas: Criando contextos de empilhamento html2canvas.js:1487
4064ms html2canvas: Classificando contextos de empilhamento html2canvas.js:1487
4066ms html2canvas: Fila de renderização criada com 9 itens html2canvas.js:1487
4104ms html2canvas: renderização concluída html2canvas.js:1487
4109ms html2canvas: Cortando tela em: esquerda: 28 topo: 529 largura: 545 altura: 0 html2canvas.js:1487
4111ms html2canvas: Corte resultante com largura 545 e altura 0 com x 28 e y 529

@SebasAlvarez - a opção allowTaint não funciona mais. Ainda funciona para você?

@SebasAlvarez , @sandeepnagra :
estou usando este código para captura de tela da imagem em uma nova guia, mas a imagem não está sendo renderizada e também estou cansado de "a llowTaint:true " está funcionando apenas dentro da mesma janela, mas não na nova guia.
este é o meu código:
função render(){
html2canvas(document.body, { allowTaint : true,
renderizado: function(canvas) {
document.body.appendChild(canvas);
window.open(canvas.toDataURL());
}
});
}
você pode me dizer qual é o problema, como você pode corrigir este?

@venkateshduddu - você está mudando o foco para a nova guia antes de tirar a captura de tela?

@sandeepnagra - sem sandeep, estou apenas usando o evento de clique. mais uma captura de tela funcionando se eu usar o caminho da imagem local, mas o caminho do servidor não funcionar na nova guia.

@venkateshduddu - um evento de clique não mudará o foco para uma nova guia automaticamente, você precisa acionar isso. Então tente isso primeiro, tenho 100% de certeza de que resolverá seu problema.

Em relação ao caminho do servidor, essa unidade de rede é autenticada? Se sim, você está autenticando antes de fazer upload de arquivos para a unidade de rede? É uma história totalmente diferente se você quiser carregá-los no bucket do S3.

oi quando eu tento tela um iframe com câmera ip interna, ele retorna uma imagem nula, por favor, você pode me ajudar?

Se eu usei allowTaint, a opção de download não funcionou. Por favor ajude

mesmo problema....
e minhas imagens estão vindo da mesma origem

Acabei de corrigir este problema.
pls habilite a opção 'useCORS' para 'true'
códigos abaixo:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

Muito obrigado @Sotyoyo , meu bug foi corrigido com o código acima. Obrigado obrigado

@Sotyoyo Muito obrigado mano, Deus te abençoe <3

@Sotyoyo Muito obrigado, é um trabalho para mim :)

A imagem não é renderizada há algum problema no meu código?

html2canvas(document.getElementById("html-2-pdfwrapper"), {
registro: verdadeiro,
renderização de letras: 1,
allowTaint: falso,
useCORS: verdadeiro,
renderizado: function(canvas) {
var img = canvas.toDataURL('imagem/png');
var doc = new jsPDF();
doc.addImage(img, 'JPEG', 20, 20);
doc.save('teste2.pdf');
}
});

mesmo problema....
e minhas imagens estão vindo da mesma origem

Acabei de corrigir este problema.
pls habilite a opção 'useCORS' para 'true'
códigos abaixo:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

isso funciona! THX!

mesmo problema....
e minhas imagens estão vindo da mesma origem

Acabei de corrigir este problema.
pls habilite a opção 'useCORS' para 'true'
códigos abaixo:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

isso mesmo /

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

Insira a opção allowTaint para visualizar todas as imagens em sua captura de tela

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

Obrigado. Funciona bem.

Mas não consigo clonar o estilo da imagem para a tela

Ainda enfrento o mesmo problema, mesmo depois de usar as opções acima, abaixo está o meu código.
elemento var = document.querySelector("#map-image-id");
html2canvas(elemento, {
registro: verdadeiro,
renderização de letras: 1,
allowTaint: falso,
use CORS: true
}).then(canvasElm => {
var tipo de imagem = "imagem/png";
var imageData = canvasElm.toDataURL(imageType);
var src = encodeURI(imageData);
console.log("src", src);
console.log("Dados da imagem", Dados da imagem);

Ainda enfrento o mesmo problema, mesmo depois de usar as opções acima, abaixo está o meu código.
elemento var = document.querySelector("#map-image-id");
html2canvas(elemento, {
registro: verdadeiro,
renderização de letras: 1,
allowTaint: falso,
use CORS: true
}).then(canvasElm => {
var tipo de imagem = "imagem/png";
var imageData = canvasElm.toDataURL(imageType);
var src = encodeURI(imageData);
console.log("src", src);
console.log("Dados da imagem", Dados da imagem);

o mesmo para você. Você resolveu?

Ainda enfrento o mesmo problema, mesmo depois de usar as opções acima, abaixo está o meu código.
elemento var = document.querySelector("#map-image-id");
html2canvas(elemento, {
registro: verdadeiro,
renderização de letras: 1,
allowTaint: falso,
use CORS: true
}).then(canvasElm => {
var tipo de imagem = "imagem/png";
var imageData = canvasElm.toDataURL(imageType);
var src = encodeURI(imageData);
console.log("src", src);
console.log("Dados da imagem", Dados da imagem);

mesmo problema comigo qualquer ajuda

Estou vendo o mesmo problema. O que estou fazendo de errado?

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

O abaixo também funciona se você quiser 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");  
            });

Meu conteúdo contém imagens provenientes de Aws.s3(). Os comentários acima mencionados não estão funcionando para o meu caso.

html2canvas(content, {letterRendering: 1,allowTaint: false,useCORS:true })
.then(canvas => {
const imgData = canvas.toDataURL('image/png');
console.log(imgData);
const pdf = new jsPDF();
pdf.addImage(imgData, 'PNG', 10, 10, canvas.width, canvas.height);
pdf.save('download.pdf');
});

A tela de saída contém apenas uma caixa em branco em vez de uma imagem. Alguém tem uma solução para o meu caso?

Meu conteúdo contém imagens provenientes de Aws.s3(). Os comentários acima mencionados não estão funcionando para o meu caso.

html2canvas(content, {letterRendering: 1,allowTaint: false,useCORS:true })
.then(canvas => {
const imgData = canvas.toDataURL('image/png');
console.log(imgData);
const pdf = new jsPDF();
pdf.addImage(imgData, 'PNG', 10, 10, canvas.width, canvas.height);
pdf.save('download.pdf');
});

A tela de saída contém apenas uma caixa em branco em vez de uma imagem. Alguém tem uma solução para o meu caso?

mesma questão aqui. imagens provenientes do bucket do S3

mesmo problema....
e minhas imagens estão vindo da mesma origem

Acabei de corrigir este problema.
pls habilite a opção 'useCORS' para 'true'
códigos abaixo:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

Obrigado
Funciona comigo ❤❤

O acesso à imagem em ' https://image/logo link' from origin ' http://localhost :3000' foi bloqueado pela política CORS: Nenhum cabeçalho 'Access-Control-Allow-Origin' está presente no recurso solicitado.
Esta é a razão pela qual meu logotipo não está aparecendo no arquivo pdf.
Resto todo o texto com css aplicado e o logotipo da marca que está na minha pasta estática está chegando.
Por favor, responda preciso de ajuda sobre isso Estou tentando isso há mais de 2 semanas.

Para quem vem aqui, depois de tentar muitas coisas, descobri que para obter imagens de um recurso externo (como o bucket do S3), você precisa habilitar tanto useCORS = true para html2canvas quanto habilitar a política CORS nas imagens servidas do S3.

Eu resolvi isso usando o proxy html2canvas. Você pode ver alguns detalhes sobre uso e teste aqui:
https://github.com/zeusstl/html2canvas-proxy-nodejs