Html2canvas: Problemas com imagens de fundo

Parece ser corrigido com 0.4.1 (no ramo de desenvolvimento). Provavelmente relacionado a # 256

Você poderia tentar a 0.4.1 e ver se o problema ainda existe?

Olá. Eu tenho exatamente o mesmo problema. Sim, o problema ainda existe em 0.4.1. Obrigado por toda a ajuda.

Estou tendo o mesmo problema ... Alguma solução ainda? Obrigado Niklas por este roteiro incrível.

Este código não será renderizado.
div class = "mc-image" title = "" style = "background- image: url ('http://eterni-t.design.s3.amazonaws.com/381/theme-154-original-1.jpg' ); largura: 1.025 px; altura: 780 px; z-index: 9999 "

Percebi que se eu remover background-size: cover; da minha classe = "imagem-mc" funciona.

@ ymorin007 Você está no Mac e Chrome / Opera / Safari e / ou usando o commit mais recente (ou seja, criou o script sozinho)?

Windows7 Chrome versão 30.0.1599.101 m

Correção temporária:

mude a linha 2818 para

ctx.fillStyle = (options.background !== undefined) ? options.background : parsedData.backgroundColor;

Está definitivamente relacionado a duas opções de tamanho de fundo: conter ou cobrir.

O último commit (html2canvas 0.4.1) corrigiu para mim

O meu ainda está fazendo isso mesmo após o último commit ...

Meu tamanho de fundo está definido para 'cobrir' e também tentei '100% automático' e ainda é apenas branco / transparente.

Se eu remover o tamanho do plano de fundo, ele captura muito bem ... mais alguma dica?

Correção temporária, use:

b ackground: url ("... base64 ...")

e não use

Além disso, não use "sprites" porque html2canvas não parece entender isso.

Tenho um problema com imagens de fundo quando url contém um caminho relativo para o fundo do diretório superior: url ("../ i / alerts-16x.png")

Funciona se realocar o png da seguinte maneira background: url ("i / alerts-16x.png")

Não consegui renderizar imagens de fundo e parecia estar coberto ou conter o tamanho do fundo, então mudei a linha 350 na versão 0.4.1 para:

topPos = isNaN (parseInt (bgposition [1], 10))? topPos: parseInt (bgposition [1], 10);

e funciona!

Estou na versão 0.4.1

Também estou tendo problemas com o fundo.

Mudei ao vivo 350 conforme sugerido por fperich, mas não ajudei.

Também tentei a imagem de fundo base64 recomendada por Hernan também sem alegria.

O url que estou tentando converter é este
http://prompter.rareapps.org/prompt/prompt-save3.php?p=123

Ele converte com o plano de fundo quando eu uso o renderizador de página da web aqui
http://html2canvas.hertzen.com/screenshots.html

Mas na minha própria página não tem fundo. Veja a amostra aqui
http://prompter.rareapps.org/prompt/prompt-save3.php?p=123

O código que estou usando é este

<script type="text/javascript">
$(window).load(function() {
    html2canvas(document.body, {
        onrendered: function(canvas) {
        window.location.href = canvas.toDataURL('image/jpeg');
    },
    allowTaint: true,
    taintTest: false
    });
});
</script>

Basicamente, ele deixa a página carregar e se converter em imagem.

Algo errado com meu código?

Obrigado

fperich u rock man !! obrigado

Concordo, fperich, você é minha pessoa favorita agora!

Obrigado fperich: D funcionou bem

@shauchenka @niklasvh Você diria que este problema foi resolvido? Este problema pode / deve ser resolvido?

Usando a 0.4.1 (versão e mais recente do desenvolvedor), a imagem de fundo dos meus elementos filhos (os filhos são sprites) não aparecem na tela, pelo menos no Chrome para Windows. O Firefox para Windows está funcionando bem. No Chrome para Mac, obtenho um quadrado preto onde está a extensão com a imagem de fundo. Eu tentei o Fperich Fix, mas não funcionou para mim. A imagem de fundo está na mesma origem, todos os arquivos estão no mesmo diretório no servidor.

@ 4gstudios Você pode colocar um exemplo simplificado em um jsfiddle (ou em algum link de acesso público) para demonstrar o problema?

@usmonster certeza. Não usei jsfiddle porque não queria que as imagens fossem externas, então podemos descartar problemas de origem cruzada.

agora adivinhe. enquanto eu preparava isso, percebi que o problema parece ser com o png que eu quero usar para meus sprites. a princípio pensei que talvez o tamanho do arquivo, mas parece realmente ser um problema com as dimensões do png.

pode ter algo a ver com a quantidade de informações contidas no png, já que um png mais complexo parece exibir o problema em dimensões relativamente menores. Eu não acho que necessariamente tem a ver com o tamanho do arquivo, já que baguncei um pouco com a otimização de png via tinypng.com e uma imagem de dimensão maior com tamanho de arquivo menor terá o problema, enquanto uma imagem de dimensão menor com arquivo maior o tamanho não.

verifique meu exemplo: http://4gstudios.com/html2canvas/

a caixa azul é renderizada corretamente (a imagem bg é 100x7800 pixels / 374kb)
a caixa vermelha não é renderizada corretamente (a imagem bg tem 100x25000 pixels / 254kb)
- no OS X Chrome (caixa preta)
-OS X Safari (caixa "sem")
-e provavelmente Win Chrome (estava acontecendo ontem, mas não perto de um caixa eletrônico de PC)
-OS X Firefox parece funcionar bem.

Espero ter ilustrado bem o que acredito ser o problema e que possamos resolvê-lo. o sprite que eu quero usar no meu projeto tem mais de 800 regras de css diferentes e eu REALMENTE não quero ter que mudar isso!

editar: meu exemplo usa 0.4.1, mas estou tendo o mesmo problema quando tentei 0.5.0rc1

Não tenho o OS X disponível para teste, mas parece funcionar bem no Chrome 37 no Windows (Vista) e no Chrome 38 beta no Linux (Debian wheezy). Qual versão do Chrome você está usando? Você já tentou testar no modo anônimo / com todas as extensões desativadas?

@usmonster Tentei no Chrome 36 (Win7) e depois atualizei para o Chrome 37 (Win7), ainda apresentando o problema

@ 4gstudios se você ativar o registro, o que verá no console do navegador?

Além disso, atualize o exemplo em seu site para usar apenas o que está atualmente no branch master, mesmo que tenha o mesmo problema. Isso ajudará muito na depuração.

Em terceiro lugar, verifique também se esse problema aparece ou não, mesmo quando todas as extensões do Chrome estão desativadas. (Em caso afirmativo, eu me pergunto se é um problema de tempo, como talvez o download e / ou renderização da imagem esteja muito lento?)

@usmonster

1) o registro está ativado ....
html2canvas: O pré-carregamento começa: encontrando imagens de fundo html2canvas.js: 21
html2canvas: Pré-carregamento: Localizando imagens html2canvas.js: 21
html2canvas: Pré-carregamento: Concluído. html2canvas.js: 21
html2canvas: start: images: 1/2 (falhou: 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 concluído - retornando obj de tela html2canvas.js: 21

2) Atualizado para o branch master html2canvas.js

3) Sim, tentei com todos desativados. Se for o momento certo, não acho que seja o tempo de download, mas provavelmente a renderização sim.

@ 4gstudios Você tem outra máquina para testar? Além disso, o link ao vivo ainda parece estar usando 0.4.1.

@usmonster oh ok meu mal, eu

Ainda não consigo reproduzir o problema em nenhuma das minhas máquinas disponíveis, mas um colega conseguiu em sua máquina com Windows 7. @niklasvh , @brcontainer alguma ideia? Estou pensando que tem a ver com composição / rasterização acelerada por GPU específica de plataforma. Vou tentar testar isso no final desta semana se conseguir acessar minha máquina W7, mas estou curioso ... @ 4gstudios , o que acontece se você reduzir pela metade a segunda imagem e testar novamente? E continuar reduzindo pela metade (e ajustando a regra CSS) até que o bug desapareça? Quero ver se há uma região "interessante" do PNG que desencadeia esse problema.

@usmonster Ocorreu no meu Windows 7 x64 com Chrome. Vou tentar fazer um DEBUG.
Existem alguns problemas que ocorrem no windows7x64 mas não ocorre na versão 32, acredito que seja um bug do Chrome.

Tenho quase certeza de que isso está relacionado ao tamanho da imagem original. Existem muitos resultados variados com a renderização de imagens grandes ou telas grandes e, até onde eu sei, não há realmente nenhuma maneira inteligente de detectar o suporte para qualquer um deles.

Embora não estejam diretamente relacionados ao tamanho da imagem de origem, os resultados variáveis ​​darão uma ideia dos problemas que as grandes imagens e telas têm:

• http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element
• http://social.msdn.microsoft.com/Forums/windowsapps/en-US/53c368e5-042b-4c3f-8903-ee024f4f7933/canvas-max-size?forum=winappswithhtml5
• https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482 -SW15

Provavelmente deve configurar alguns testes para tamanhos máximos de imagem e tamanhos de tela para diferentes navegadores / os / limites de memória para realmente obter uma compreensão mais sólida de onde estão os limites e se eles podem ser contornados de alguma forma, por exemplo, dividindo a renderização em pedaços menores .

@ 4gstudios @brcontainer quanta memória seus dispositivos possuem onde você conseguiu replicar o problema?

@niklasvh

• Windows 7 Home Premium x64
• CPU Intel Core i5 M450 2,40 Ghz
• 4 GB de RAM

Vou testar no windows 32bit (tão possível), mas acredito que o problema ocorra apenas no Windows64bit

como eu suspeitava, o problema só ocorre no "Windows x64", assim como https://github.com/niklasvh/html2canvas/issues/206#issuecomment -17744888, ou seja, funciona no Windows 32 bits, falha no Windows 64 bits , um provável bug do Chrome.

@brcontainer o problema ocorre para mim no Chrome e Safari no OS X 10.7 também ...

Eu também testei em minha máquina com Windows 7 de 32 bits e tudo funciona bem (sem bug). Isso definitivamente está parecendo um problema apenas do sistema de 64 bits - bom apanhado, @brcontainer! Outra coisa a observar é que uma nova versão do Chrome especificamente para sistemas de 64 bits foi lançada muito recentemente:

http://blog.chromium.org/2014/08/64-bits-of-awesome-64-bit-windows_26.html
https://www.google.com/chrome/browser/?platform=win64 (link para download do Windows)
http://blog.chromium.org/2014/08/mac-chrome-when-im-sixty-four-bits.html (Mac ainda está em beta)

Para aqueles que encontraram esse problema, tem certeza de que ainda não está executando a versão de 32 bits? Acho que você precisa baixar manualmente a versão de 64 bits para obtê-lo. Há uma chance de que isso resolva esses problemas.

@usmonster bem, meu Windows7 é de 64 bits. O bug afeta o Chrome de 32 bits e 64 bits no Win7 de 64 bits. Eu acho que isso afeta algumas máquinas OSX também. Obrigado pelo link para obter a versão de 64 bits do Chrome, embora não resolva meu problema: chorar:

isso soa como um bug no Chrome e não uma incompatibilidade com "Windows 64 bits" (ou Mac OSX)

@brcontainer Concordo que parece um problema com os navegadores Chrome e WebKit no Windows e Mac de 64 bits (mas não no Linux .. pelo menos não na minha caixa Debian de 64 bits com 8 GB de RAM), embora @ 4gstudios , fossem você consegue ver o bug no Windows de 32 bits? E quanta RAM você tinha nas máquinas afetadas pelo problema?

Seria bom ser capaz de reduzir esse problema à sua raiz. O segundo PNG tem gradientes e dimensões muito maiores do que o primeiro PNG. Se eu tivesse uma máquina afetada para testar, cortaria o PNG "ruim" até poder dizer se há um problema específico de região ou tamanho que o causa. (Possivelmente também de interesse para @niklasvh : http://wkbug.com/52391)

@usmonster @niklasvh

No AppleWebkit (versão 538.1) e "Safari 5.1.7" (versão 534.57.2 - este navegador não recebe mais atualizações) para Windows .then não executa (não dispara / dispara).

Então não consegui testar se é uma falha do "Webkit" ou uma falha do "Blink" (bifurcação do motor do Webkit no Chrome) ou mesmo uma falha por falta de "RAM".

@brcontainer Acho que é seguro presumir que, uma vez que, de acordo com @ 4gstudios , o bug era reproduzível no Safari e no Chrome no OS X, é um bug comum para os motores Blink e WebKit, pelo menos.

@usmonster Não consegui testar as janelas porque .then(...) não funciona no AppleWebkit (versão 538.1)

@usmonster Eu meio que fiz o recorte enquanto criava meu exemplo, mas não de uma forma

@usmonster , @brcontainer , @niklasvh , obrigado por toda sua ajuda com o problema

@niklasvh onrendered está obsoleto. Então, o que posso usar no lugar? Estou usando 0.5.0-alpha1.

Além disso, a imagem de fundo não está sendo baixada, embora as imagens estejam no mesmo domínio.

html2canvas ($ ("# foredownload table"), {
registro: verdadeiro,
entregue: função (c) {
var myImage = c.toDataURL ("images / jpeg");
$ ('# downloadableImage'). prop ('href', myImage);
}
});
Qualquer ajuda será apreciada. Obrigado

@ codegiant2 https://github.com/niklasvh/html2canvas#usage .

Thanx fperich funcionou para mim !!

@fperich
vc me ajuda muito! Muito obrigado!

Eu era o rosto de uma imagem de fundo de corpo recortada
(pequeno bounds.height de NodeContainer.prototype.parseBackgroundSize - html2canvas 0.5.0-beta3) meu

body {
    background-image: url(./res/bg.jpeg);
    background-repeat:no-repeat;
    background-position:center center;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

RESOLVIDO adicionando

html, body {
   margin: 0;
   padding: 0;
   height: 100%;
}

Obrigado niklasvh e todos os contribuidores por este belo trecho de código!

Também estou tendo o mesmo problema, estou carregando a imagem do s3 não aparecendo no canvas, mas estou carregando localmente no meu sistema está funcionando bem como posso resolver

eu também tendo o mesmo problema.

imagem de fundo falhou ao carregar. Estou recebendo uma mensagem de erro Erro ao carregar o plano de fundo:

jsFiddle aqui

Por favor me ajude a corrigir esse problema.
Obrigado,

Olá @gopiss ,

Use a opção corse.

html2canvas(document.body, {
            onrendered: function (canvas) {
.....
            },
            useCORS: true
        });

@fxmontigny.
Ainda existe o problema de carregamento de imagem de borda . veja meu JSFiddle atualizado.
a imagem da borda não carrega mostrando apenas a borda preta.

Eu estou enfrentando o mesmo problema. abaixo estão os registros do console do Chrome
html2canvas: O pré-carregamento começa: encontrando imagens de fundo
html2canvas.js: 21 html2canvas: start: imagens: 1/1 (falha: 0)
html2canvas.js: 21 html2canvas: start: imagens: 2/2 (falha: 0)
html2canvas.js: 21 html2canvas: Pré-carregar: Encontrar imagens
html2canvas.js: 21 html2canvas: Pré-carregamento: Concluído.
html2canvas.js: 21 html2canvas: start: imagens: 2/2 (falha: 0)
html2canvas.js: 21 Imagens de carregamento concluídas: # 2 (falha: 0)
html2canvas.js: 21 html2canvas: Erro ao carregar o plano de fundo:
html2canvas.js: 21 html2canvas: Renderizador: Renderizador de tela concluído - retornando obj de tela

Isso ainda é um problema com a v1.0.0 ? Em caso afirmativo, você poderia compartilhar um exemplo no jsfiddle .

Este problema foi encerrado automaticamente porque não houve resposta ao nosso pedido de mais informações do autor original. Com apenas as informações que estão atualmente no problema, não temos informações suficientes para tomar medidas. Entre em contato se tiver ou encontre as respostas de que precisamos para que possamos investigar mais a fundo.

Só comentar, pois isso pode ajudar alguém.
Meu problema era que tudo estava funcionando localmente, mas na produção não conseguia renderizar as imagens de fundo do CSS.
A razão era que estávamos usando o CloudFront - o que significa que os urls no arquivo css se referiam a ativos no domínio do cloudfront, enquanto o JS estava sendo executado em um domínio separado.
No entanto, o log do html2canvas não estava indicando que era um problema do cors.
'useCORS' não parece funcionar por conta própria, pois acho que requer um URL de proxy ou algo assim.

@jacobclarke para mim também tem o mesmo problema ao usar html2canvas para capturar as imagens de fundo na tela em imagens locais do S3, mas na produção não captura as imagens de fundo. minha versão do html2canvas é v1.0.0