Html2canvas: A tag da imagem não está capturando

Está faltando o pré-carregamento de imagens, que por si só é assíncrono, então você precisará envolvê-lo em retornos de chamada. Provavelmente você também está usando uma versão mais antiga, então recomendo obter a versão mais recente em https://github.com/niklasvh/html2canvas/downloads e depois testar com:

html2canvas( $('table'), {
   onrendered: function( canvas ) {
        var img = canvas.toDataURL();
        $('#calendar_to_canvas').attr('src', img);
   }
});

Obrigado pela resposta rápida, baixei a versão mais recente e tentei o código acima, ainda não está aparecendo a tag da imagem na tela renderizada. Estou faltando alguma coisa, adicionei html2canvas.js, jquery.plugin.html2canvas e usando jquery 1.7. Sua ajuda é muito apreciada.

As imagens são hospedadas na mesma origem da página que você está renderizando?

Defina logging: true e verifique o que o console está dizendo sobre as imagens, elas estão falhando?

As imagens estão carregando perfeitamente, consulte os logs abaixo:

html2canvas: O pré-carregamento começa: encontrando imagens de fundo html2canvas.js: 27
html2canvas: start: images: 1/1 (falha: 0) html2canvas.js: 27
html2canvas: start: images: 2/2 (falha: 0) html2canvas.js: 27
html2canvas: start: images: 3/3 (falha: 0) html2canvas.js: 27
html2canvas: start: images: 4/4 (falha: 0) html2canvas.js: 27
html2canvas: start: images: 5/5 (falha: 0) html2canvas.js: 27
html2canvas: start: images: 6/6 (falha: 0) html2canvas.js: 27
html2canvas: start: images: 7/7 (falha: 0) html2canvas.js: 27
html2canvas: Pré-carregamento: Localizando imagens html2canvas.js: 27
html2canvas: Pré-carregamento: Concluído. html2canvas.js: 27
html2canvas: start: images: 8/18 (falha: 0) html2canvas.js: 27
html2canvas: start: images: 9/18 (falha: 0) html2canvas.js: 27
html2canvas: start: images: 10/18 (falha: 0) html2canvas.js: 27
html2canvas: start: images: 11/18 (falha: 0) html2canvas.js: 27
html2canvas: start: images: 12/18 (falha: 0) html2canvas.js: 27
html2canvas: start: images: 13/18 (falha: 0) html2canvas.js: 27
html2canvas: start: images: 14/18 (falha: 0) html2canvas.js: 27
html2canvas: start: images: 15/18 (falha: 0) html2canvas.js: 27
html2canvas: start: images: 16/18 (falha: 0) html2canvas.js: 27
html2canvas: start: images: 17/18 (falha: 0) html2canvas.js: 27
html2canvas: start: images: 18/18 (falha: 0) html2canvas.js: 27
Carregamento de imagens concluído: # 18 (falha: 0) html2canvas.js: 27

Não é possível obter dados de imagem da tela porque a tela foi contaminada por dados de origem cruzada.

html2canvas: Renderizador: Renderizador de tela pronto - retornando obj de tela

O arquivo javascript e a imagem estão localizados no mesmo diretório, além do comentário anterior.

Oi niklasvh, funcionou perfeitamente seu mesmo problema de política original, resolvi executar em websever executado anteriormente localmente usando file: // isso é visto como um problema de domínio cruzado. Obrigado por me orientar na direção certa. Este é um ótimo plugin :)

Niklashvh, estou tentando fazer isso para o aplicativo híbrido do Android, que é executado localmente usando o arquivo: // você pode me orientar para resolver este problema de domínio cruzado ou quaisquer sugestões muito apreciadas.

Se você não precisa exportar a imagem para qualquer lugar, você sempre pode definir allowTaint: true

Estamos exportando a imagem para a memória e enviando-a como pdf no e-mail

Estou com o mesmo problema, o log é o seguinte:

html2canvas: O pré-carregamento começa: encontrando imagens de fundo de html2canvas.js: 21
html2canvas: Pré-carregamento: Localizando imagens html2canvas.js: 21
html2canvas: Pré-carregamento: Concluído. html2canvas.js 21
html2canvas: start: images: 1/2 (falha: 0) html2canvas.js: 21
html2canvas: start: images: 2/2 (falha: 0) html2canvas.js: 21
Carregamento de imagens concluído: # 2 (falha: 0) html2canvas.js: 21
html2canvas: Renderizador: Renderizador de tela pronto - retornando tela de obj

as imagens estão localizadas na imagem de fundo, basta carregar a div da imagem principal, os presos não são mostrados.

Não é um problema porque as imagens se cruzam no mesmo domínio.

Qualquer ideia?

se eu adicionar "background-size: cover;" ao estilo, a imagem não aparece ...

aparentemente esse é o problema

e funcionou !!, só tenho que colocar "background-size: 100% 100%;" em vez de "background-size: cover;"

HTML @ Canvas não captura ao usar url online com img, qual é a solução para este problema?
obrigado

@ Elgamal10 use proxy

https://github.com/brcontainer/html2canvas-php-proxy (proxy html2canvas com php)
https://github.com/brcontainer/html2canvas-asp-vbscript-proxy (proxy html2canvas com asp-classic - vb)
https://github.com/brcontainer/html2canvas-csharp-proxy (proxy html2canvas com asp.net - csharp)

Nota: Leia o arquivo README.md

obrigado pela sua resposta, é uma boa captura de tela, mas há erros como:

html2canvas_5 não está definido
html2canvas_0 não está definido
html2canvas_5 não está definido
html2canvas_4 não está definido
html2canvas_1 não está definido
html2canvas_5 não está definido

@ Elgamal10 criar um problema no projeto
https://github.com/brcontainer/html2canvas-csharp-proxy/issues?state=open

Eu acredito que você usa C # (ASP.NET), estou certo?

Oi niklas,

Comecei a usar sua API e é ótimo .. Mas estou travado, você pode ajudar ..

Estou tentando converter um html em canvas usando o código:
jQuery ('html'). html2canvas ({
proxy: " http: //localhost/myproject/proxy.jsp ",
userCORS: true ,
onrendered: function (canvas) {
alerta (tela);
var url = canvas.toDataURL ("imagem / png");
window.open (url, '_blank');
},
});

Agora eu tenho um arquivo chamado proxy.jsp que salva todas as imagens de origem cruzada no caminho ~ / tomcat / myproject / images / "

Depois disso eu vejo isso no console
Recurso interpretado como Script, mas transferido com tipo MIME image / jpeg: " http: //localhost/myproject/proxy.jsp? Url = http% 3A% 2F% 2Fi.ebayi … QYEAAMXQVERSuVtL% 2F% 24_1.JPG% 3Fset_id% 3D8800004005 & callback = html2canvas_64 ". html2canvas.js: 2264

Depois de tudo isso, minha função de retorno de chamada não é executada e não consigo criar uma tela.

O que pode ser feito? Você pode por favor ajudar?

Muito obrigado

@ himakshi89 você não pode usar proxy: e userCORS: ao mesmo tempo.

Prefira usar proxy.
Nota: tente capturar o corpo.

no seu código tem uma vírgula esquerda:

},//this is wrong.

});

Qual versão do seu html2canvas?

Experimente isto:

jQuery('body').html2canvas({
    "onrendered": function(canvas) {
    }
});

Se não funcionar, tente baixar o html2canvas neste https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js e use este código:

html2canvas($("body").get(0), {
    "logging": true,
    "proxy": "http://localhost/myproject/proxy.jsp",
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

@brcontainer
Oi

Eu modifiquei meu código e agora estou enviando a resposta do proxy.jsp como
({"html2canvas_67": http: //localhost/myproject/0.1651487380333363.jpg "})

Nenhum erro é mostrado no console agora.
Mas nada acontece agora .. O que deveria estar acontecendo ou existe algum lugar que precisa ser mudado?

Por favor ajude

Mas como o console não pode mostrar nada
você usou meu segundo código de amostra? ele envia logs para o console.

Tente fornecer seu código online para testar.

Como sugerido, removi o useCORS e substituí html por corpo

jQuery ('corpo'). html2canvas ({
proxy: " http://nisquare.dyndns.org : 8087 / facebook / proxy.jsp",
registro: verdadeiro ,
onrendered: function (canvas) {
var url = canvas.toDataURL ("imagem / png");
window.open (url, '_blank');
}
});

Também estou recebendo este é o meu console
html2canvas: Erro ao carregar : http://cmsip.tradus.ibcdn.com/MOBMKXE29ULYUMKH_4902586_320x360.jpg html2canvas.js: 21

Anexei uma captura de tela do que estou recebendo

Você tentou fazer download de https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js

e este código:

html2canvas($("body").get(0), {
    "logging": true,
    "proxy": "http://localhost/myproject/proxy.jsp",
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

ou não?

NOTA: http://nisquare.dyndns.org:8087/facebook/proxy.jsp está quebrado!

Eu tinha baixado a última versão

Eu substituo o código pelo seguinte

html2canvas ($ ("body"). get (0), {
proxy: " http://nisquare.dyndns.org : 8087 / facebook / proxy.jsp",
registro: verdadeiro ,
onrendered: function (canvas) {
var url = canvas.toDataURL ("imagem / png");
window.open (url, '_blank');
}
});

envie-me o teste de link

Estou usando esta extensão do Chrome e a extensão ainda está em modo de desenvolvimento

"Extensão do Chrome" com JSP?

o jsp está sendo usado apenas para a parte do proxy..Segundo você o que é mais preferível?

A extensão do Chrome é executada em outro "protocolo" e "frame", o proxy.jsp usa o protocolo HTTP.

Eu acredito que as extensões do Chrome não requerem proxy. Use como:

html2canvas($("body").get(0), {
    "logging": true,
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

LEIA: http://developer.chrome.com/extensions/tut_debugging.html

@brcontainer
Ei, obrigado pela ideia .. agora estamos usando uma API fornecida pelo próprio Chrome. Tem uma função chrome capturevisibletab que resolve o problema com muita facilidade :)

@ jgab-net muito obrigado. Procurado muito tempo para o erro

@ Sumit8 (Y) de nada

@gitbala O seu problema foi resolvido? @niklasvh Este problema pode ser

@usmonster continue, me poupa algum tempo para examinar cada um dos problemas em aberto :)

Sim, está resolvido :)

Na segunda-feira, 1º de setembro de 2014 às 4h11, usmonster [email protected] escreveu:

@gitbala https://github.com/gitbala Seu problema foi resolvido? @niklasvh
https://github.com/niklasvh Este problema pode ser resolvido? (Vou parar com
a triagem de bug é irritante .. :)

-
Responda a este e-mail diretamente ou visualize-o no GitHub
https://github.com/niklasvh/html2canvas/issues/145#issuecomment -54047596
.

Estou usando o html2canvas - imagem local não renderizada em pdf. qual a solução para isso?

@niklasvh pls help - a imagem do logotipo em html não está renderizando em pdf

Eu falhei ao converter imagem embutida. Como usar "proxy": " http: //localhost/myproject/proxy.jsp ", eu uso vue, onde colocar esse jsp e não sei como usar @niklasvh você pode ajuda?

@qiuyaofan tendo o mesmo problema, você conseguiu a solução? Estou usando com angular2 e obtendo imagens de outro servidor. @gitbala você encontrou a solução?

+1 A propósito, os logs parecem bons ( html2canvas: Images loaded, starting parsing ), mas ainda não vejo as imagens no pdf.

Estou a usar

allowTaint: true,
useCORS: true,
taintTest: falso,

@NikhilRadadiya @qiuyaofan pessoal, também está procurando por uma solução justa do lado do cliente. Usando vue js e obtendo imagem de um cigano. Então aqui está o que funcionou bem para mim:

html2canvas(element, {
        "logging": true, //Enable log (use Web Console for get Errors and Warings)
        useCORS: true,
        taintTest: false,
        onrendered: function(canvas) {
          var img = new Image();
          img.onload = function() {
            document.body.appendChild(img);
          };
          img.error = function() {
            if(window.console.log) {
              window.console.log("Not loaded image from canvas.toDataURL");
            } else {
              alert("Not loaded image from canvas.toDataURL");
            }
          };
          img.src = canvas.toDataURL("image/png");
        }
      });

Portanto, nenhum proxy foi usado.

@creepteed Tenho outros elementos que preciso converter em canvas e depois salvar em pdf, meu html não contém apenas imagens, se for esse o caso, como posso usar a função acima que você postou?

Olá @niklasvh ,
Quero capturar a página da web usando htmltocanvas, tudo está funcionando bem, mas quando estou tentando capturar a página da web, não consigo obter imagens.
Pode me ajudar?
Aqui está o meu código:
function capture(div_id=null) { jQuery(".screenshot_row_target").html2canvas({ logging: true, //taintTest : true, //proxy: "https://skeleton-21.myshopify.com", onrendered: function (canvas) { jQuery('#screenshot_img_val').val(canvas.toDataURL("image/png")); //document.getElementById("screenshot_html_form").submit(); } }); }

No console, estou recebendo este
html2canvas: Preload starts: finding background-images html2canvas.js:19 html2canvas: Preload: Finding images html2canvas.js:19 html2canvas: Preload: Done. html2canvas.js:19 html2canvas: start: images: 0 / 0 (failed: 0) html2canvas.js:19 Finished loading images: # 0 (failed: 0) html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/files/1/2186/4293/files/user2_300x300.png?v=1503661428 html2canvas.js:19 html2canvas: Error loading background: html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_300x300.gif html2canvas.js:19 html2canvas: Renderer: Canvas renderer done - returning canvas obj
Obrigado.