Skip to main content
3 de 6
adicionou 52 caracteres ao conteúdo
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

Você esta usando uma versão desatualizado do html2canvas, estamos na versão 0.5 que funciona nos seguintes navegadores:

  • Firefox 3.5+
  • Google Chrome
  • Opera 12+ (presto)
  • IE9+
  • Safari 6+

Note entanto o html2canvas não tira uma foto de verdade, ele na verdade tenta redesenhar os elementos, então coisas como algumas funcionalidades do svg e css não irão funcionar, ou seja existe uma série de coisas ainda pra implementar.

Tenha em mente que a biblioteca é totalmente experimental.

O erro DOM7011 eu nunca vi no issues do html2canvas então provavelmente é alguma outra coisa que falhou, testei o código e tinha falhas que não fizeram funciona em vários navegadores, outra coisa estranha é que você chamou $.ready e depois $(function) que é a mesma coisa no jquery:

$(document).ready(function() {
    $(function() { 
    });
});

Fora que o uso do link estava errado, faça assim:

$(function() { 
    html2canvas($("#widget"), {
        onrendered: function(canvas) {
            $("#btnSave").attr("href", canvas.toDataURL());
        }
    });
});

Porque com click pra depois setar o attr ele vai tentar fazer o download de algo que não existe, por causa do tempo de execução.

Agora o mais importante, você colocou elementos block dentro de span, isto é errado, troque o span por div, assim:

<div id="widget" class="widget" field="AGE" roundby="20" description="Patient age, in years">
        <div class="header ng-scope">
         ....
        </div>
</div>

Problema do IE com protocolo DATA

No IE em links ou popup o protocolo data solicita um aplicativo externo, porque de certa forma ele não é reconhecido, então a unica maneira de contornar o problema é colocando o resultado do canvas em uma tag img assim:

<script type="text/javascript">
    $(function() {
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                $("#imageSaved").html("");
                $("<img />").attr("src", canvas.toDataURL()).appendTo("#imageSaved");
            }
        });
    });
</script>

<div id="imageSaved"></div>
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361