Podem ser dois problemas mais conhecidos (acredito que exista um outro problema com fontes semelhante, mas parece não ser o caso):
Problema com a tela de retina
Tela de retina ou Ecrã retina (português europeu) ou Retina Display (inglês) são telas usadas LCD (da Apple) que apresentam uma densidade de pixels suficiente para o olho humano não ser capaz de perceber a pixelação a uma distância padrão, usadas em produtos Apple como iPhone e Mac.
Geralmente o conteúdo exibido na tela tem em média o "dobro" de tamanho que aparenta, ou seja e geralmente temos que usar imagens de alta qualidade para que elas não apresentem o efeito desfocado ("blurry").
No momento que você usa o html2canvas
na tela de retina, o que é lhe apresentado é uma imagem que seria apenas perceptível aos pixels. Isto parece ser um problema do Canvas API
que tenta ajustar a imagem na hora de exporta-la.
Bug Chrome/Safari com imagens em background no Windows 64bit
Nota: Aparentemente este bug foi corrigido nas versões mais recentes do Chromium
Não me recordo se o problema ocorre no Safari, mas no Chrome e Opera (tecnologia Chromium/Blink) isto ocorre. É um bug no Canvas API
também, que ocorre geralmente quando a imagem tem o tamanho diferente do elemento (por exemplo um DIV).
Vamos supor que temos uma imagem de 100x100 chamada test.png um <div>
assim:
<style>
.foo {
width: 200px;
height: 200px;
background: url(test.png) no-repeat;
}
</style>
Se o seu Chrome for 32bit rodando em um sistema 64bit ocorre um efeito de desfoque, veja um exemplo (como eu mencionei aqui #206):
function putImage()
{
//Funciona-----------------------
var canvas=document.getElementById("myCanvas1");
var ctx=canvas.getContext("2d");
ctx.webkitImageSmoothingEnabled = false; //Corrige o problema
var pat=ctx.createPattern(img, "repeat");
ctx.rect(0,0, 64, 64);
ctx.fillStyle=pat;
ctx.fill();
ctx.restore();
//Funciona-----------------------
//Causa o bug-----------------------
var canvas2=document.getElementById("myCanvas2");
var ctx2=canvas2.getContext("2d");
var pat=ctx2.createPattern(img, "repeat");
ctx2.rect(0,0, 64, 64);
ctx2.fillStyle=pat;
ctx2.fill();
ctx2.restore();
//Causa o bug-----------------------
}
var img = document.getElementById("lamp");
img.onload = function() {
setTimeout(putImage, 100);
};
<div>
<p>Imagem usada:</p>
<img src="https://i.sstatic.net/IvOeo.png" id="lamp">
</div>
<div style="float: left; width: 40%;">
<p>Funciona (com ctx.webkitImageSmoothingEnabled = false):</p>
<canvas id="myCanvas1" width="300" height="318"></canvas>
</div>
<div style="float: right; width: 40%;">
<p>Falha (se não falhar é porque está usando um navegador que já teve o bug corrigido):</p>
<canvas id="myCanvas2" width="300" height="318"></canvas>
</div>
Possível solução 1
Está solução pode funcionar com monitores Retina, mas o foco dela é resolver o problema com o background-size
. A solução parece ocasionar algum outro problema, mas não sei ao certo qual é (talvez seja com imagens redimensionadas por background-size
ou width=""
e height=""
, não tenho certeza, mas parece que o canvas perde a "precisão" das imagens redimencionadas), no entanto se a sua página é mais simples é bem possível que funcione.
No "contexto" da API do Canvas temos as propriedades:
var ctx = canvas.getContext("2d");
ctx.webkitImageSmoothingEnabled = false; //Webkit/Safari/Chrome
ctx.mozImageSmoothingEnabled = false; //Firefox/Gecko
ctx.imageSmoothingEnabled = false; //Outros navegadores
Estas propriedades desabilitam a suavização da imagem, porém é necessário "mexer" no código fonte do html2canvas
para conseguir aplicar isto.
Possível solução 2
A segunda possível solução é voltada ao problema com as telas de retina, a ideia é que você pode criar uma imagem com o dobro do tamanho e reduzir ela posteriormente, o processo seria algo como:
Nota: Imagens canvas muito grandes não pode ser exportadas com .toDataURI
, pois existe um limite de tamanho.
CSS:
.escala-x2 {
-webkit-transform: scale(2);
-moz-transform: scale(2);
transform: scale(2);
}
JavaScript:
var elemento = document.getElementById("foo");
elemento.className += " escala-x2";
html2canvas(elemento).then(function(canvas) {
elemento.className = elemento.className.replace(/\sescala\-x2/g, "");
var new_canvas = document.createElement("canvas");
//Copia canvas para new_canvas e redimenciona pela metade
new_canvas.width = canvas.width / 2;
new_canvas.height = canvas.height / 2;
var ctx = new_canvas.getContext('2d');
ctx.drawImage(canvas, 0, 0, new_canvas.width, new_canvas.height);
ctx.webkitImageSmoothingEnabled = false; //Webkit/Safari/Chrome
ctx.mozImageSmoothingEnabled = false; //Firefox/Gecko
ctx.imageSmoothingEnabled = false; //Outros navegadores
canvas = null;
document.body.appendChild(new_canvas);//Adiciona o canvas redimensionado ao body
});
Desta maneira você pode usar o imageSmoothingEnabled
tranquilamente, pois as imagens originais já foram convertidas para o canvas, então é provável que não ocorra nenhum problema.
Limite de tamanho do canvas
Cada navegador tem um limite de imagem que pode trabalhar com o Canvas, geralmente quando ultrapassar este limite é lançado um Exception, conforme a resposta do SOen (estes limites vão sendo melhorados conforme o navegador recebe atualizações):
Nota: Irei atualizar os dados conforme encontrar mais fontes
Dados de 10/13/2014:
Chrome:
- Máximo de largura e altura: 32,767 pixels
- Área máxima: 268,435,456 pixels (por exemplo 16,384 x 16,384)
Firefox:
- Máximo de largura e altura: 32,767 pixels
- Área máxima: 472,907,776 pixels (por exemplo 22,528 x 20,992)
Internet Explorer:
- Máximo de largura e altura: 8,192 pixels
IE Mobile:
- Máximo de largura e altura: 4,096 pixels