3

Utilizo a ferramenta html2canvas em um projeto para imprimimir uma determinada área do meu código e salvá-la como imagem.

Tentei salvar nos seguintes formatos, JPEG e PNG, mas ambas ficam com a mesma qualidade, gostaria de saber, de alguém que utiliza esta ferramenta também, se há alguma forma de determinar a qualidade da imagem à ser salva.

[EDIT]

Respondendo às questões solicitadas:

  1. A tela não é retina
  2. O Sistema Operacional é Ubuntu 15.04 x64
  3. O navegador é Google Chrome x64

Este é o código de chamada à html2canvas, bem simples, praticamente transforma a imagem em url salva em um input hidden para salvá-la com o PHP (não sei exatamente se esse envio para salvar com o PHP tem algo a ver com este bug, caso haja, me avise, por favor):

html2canvas($("#result"), {
    onrendered: function(canvas) {
        img = canvas.toDataURL("image/jpeg");

        $("#screenshot").val(img);

        $("#form").submit();
    }
});

Neste sistema no qual trabalho, uma de suas funções é criar imagens para postagem no Facebook.

O HTML usado consiste em:

Teste Teste subtítulo

A razão pela qual não utilizo uma imagem de background na <div id="backgroud"> foi uma decisão relacionada à outras funcionalidades do sistema.

O CSS consiste em:

div#template {
  width: 500px;
  height: 450px;
  position: relative;  
  background: rgba(0, 0, 0, 0.1);
}
div#background {
  width: 500px;
  height: 450px;
  position: absolute;
  z-index: 1;
}
img#bg-image {
  display: none;
}
div#content {
  width: 500px;
  height: 125px;
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 25%;
  color: #fff;
  display: table;
  z-index: 2;
}
div#content-bar {
  width: 500px;
  height: 40px;
  position: absolute;
  backgrund:#000;
}
h1.title {
  color: inherit;
  width: 400px;
  margin: 15px auto;
  font-size: 30px;
  font-weight: bold;
}
h2.subtitle {
  color: inherit;
  font-size: 20px;
  margin: 75px auto;
  font-weight: bold;
}

É bem básico, porque, neste caso, só faz o posicionamento absolute das divs e as posiciona uma sobre a outra, deixando a <div id="background"> por trás, tendo função de plano de fundo.

Uma imagem de exemplo

Não sei se vai dar pra ver muito bem, mas estou enviando um print que tirei de uma imagem postada depois de pronta.

Se perceber, a imagem está um pouco "borrada", durante a construção da imagem isso não ocorre.

Imagem postada

Não postei o HTML e CSS relacionados à imagem, pois não tenho eles à minha disposição no momento.

13
  • Nesse caso, para manter a qualidade, não seria melhor tentar converter o print em svg? Commented 7/08/2015 às 15:05
  • Também pensei nisto, mas ainda não tentei, tentarei. Commented 7/08/2015 às 15:08
  • Se você possuir a imagem em Canvas, você pode converte-la em SVG utilizando esse plug-in: github.com/gliffy/canvas2svg Commented 7/08/2015 às 15:24
  • @MarceloBonifazio o problema é que aí já foi gerado com baixa qualidade.
    – Maniero
    Commented 7/08/2015 às 15:27
  • Então @bigown, estava a comentar isso, o ideal seria converter direto do HTML pro SVG, so que nunca precisei fazer algo do tipo, vou dar uma pesquisada, se achar alguma solução, posto aqui Commented 7/08/2015 às 15:28

1 Resposta 1

2

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
5
  • Respondi às questões que solicitou no post, sobre meu sistema operacional, etc... Irei tentar a segunda solução que você propôs, mas antes gostaria de saber qual o limite de tamanho para o uso do .toDataURI que você citou, pois as imagens que tento salvar são de tamanho: 500x450 ou 851x315. Agradeço Commented 7/08/2015 às 22:27
  • @ThomersonRoncally a limitação varia de navegador pra navegador, no entanto no InternetExplorer é de aproximadamente 8,192 pixels (largura e altura), vou atualizar a resposta, note que estes limites sempre são melhorados a cada atualização :) - Felizmente.
    – Syzoth
    Commented 7/08/2015 às 22:36
  • Acrescentei o código que chamo à html2canvas, é bem simples. Commented 7/08/2015 às 22:41
  • Poderia mostrar uma "foto" do problema? @ThomersonRoncally Pode ser o problema com o background (no entanto pode ser um novo problema) ou com as fontes.
    – Syzoth
    Commented 7/08/2015 às 22:43
  • posso sim, irei atualizar minha pergunta, tentando expôr um pouco mais meu problema Commented 7/08/2015 às 22:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .