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>