Html2canvas: A renderização da tela está borrada em telas de retina

Esta biblioteca é ótima, mas experimentando isso também. Eu acho que este é o mesmo problema que os # 379, # 373, # 340, # 203, # 312 e # 158 e mencionado no # 390.

Alguma atualização sobre isso?

https://github.com/niklasvh/html2canvas/pull/127 consertar o borrão

não consertado

: +1:

+1 por favor conserte

Os estilos CSS de scalling e zoom do +1 não estão funcionando, certo? Poderia ser resolvido ampliando o html tirando a captura de tela e deveria parecer mais nítido

+1 por favor conserte

+1 correção

@zqcloveping
Mano, tente essas configurações, não resolve 100% mas aumenta a qualidade

html2canvas (document.getElementById ('flag'), {
useCORS: true,
allowTaint: true,
letterRendering: true,
onrendered: function (canvas) {
var ctx = canvas.getContext ('2d');
ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
},
});

@breim
Bro, 3T pela sua ajuda. Mas parece ser menos óbvio. Problemas de renderização em dispositivos de retina

Corrija isso!

+1 por favor conserte

Por favor, conserte isso, Orz

+1

Aparentemente, você pode usar uma tela existente para renderização (que você pode pré-configurar para ser exibida na retina).

Exemplo:

var w = 1000;
var h = 1000;
var div = document.querySelector('#divtoconvert');
var canvas = document.createElement('canvas');
canvas.width = w*2;
canvas.height = h*2;
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
var context = canvas.getContext('2d');
context.scale(2,2);
html2canvas(div, { canvas: canvas }).then(function(canvas) {
    // do what you want
});

@MisterLamb Sua solução funciona

Eu também gostaria que isso fosse consertado, por favor

+1

+1 Fix

@MisterLamb Estou tentando sua solução, mas não consigo fazê-la funcionar. Eu criei este violino com sua correção que parece não fazer nada - você sabe o que estou fazendo de errado? Você pode clicar no botão no violino e permitir o download de vários arquivos para testá-lo e ver se eles são idênticos nesta implementação.

@MisterLamb ah acabou de mudar para 0.5.0-alpha1 e funciona melhor , obrigado. Atualizou o

+1

@MisterLamb et al, tentei hoje, e este snippet não funciona mais com 0.5.0 b4 - obtendo tela vazia - e renderizado corretamente se não estiver usando a própria tela.

editar: provavelmente meu bug, violino alterado está bem.

editar 2: não foi possível restringir, reimplementado assim e agora tenho algo visível, mas com algum deslocamento. talvez haja um estilo em algum lugar que o h2c não suporte totalmente e atrapalhe o resultado :( sorte minha.

editar 3: sim, tive que movê-lo para document.body para se livrar do deslocamento.

@MisterLamb você é um verdadeiro gênio, obrigado por compartilhar ... isso salvou meu dia

@MisterLamb você é o melhor 👍

@makc eu também! obtendo tela vazia - e renderizado corretamente se não estiver usando a própria tela.

Para sua informação - a solução @eKoopmans funciona bem até agora em testes: https://github.com/niklasvh/html2canvas/pull/1087 .. Atualmente em execução com ela

Fechando em favor de # 1087

@MisterLamb mas como melhorar a resolução da imagem ??
quando estou tentando salvar esta imagem salva em 96dpi, preciso de uma imagem de 300+ dpi. Como posso fazer isso ???

@ shivtumca12 na versão mais recente, v1.0.0-alpha.1 , você pode usar a opção scale para aumentar a resolução ( scale: 2 dobrará a resolução dos 96dpi padrão).

//Faça zoom de 90%, antes de chamar o html2canvas, depois volte o zoom para 100%.

document.body.style.zoom = '99%';
html2canvas(document.querySelector("#content"), {allowTaint:false, widht: _width, height: _height }).then(function (canvas) {

    // var pdf = new jsPDF('p','pt','a4');
    // pdf.addImage(canvas.toDataURL("image/png"), 'PNG', 10, 10, 580, 0)                            
    // pdf.save('Grafico.pdf');        
    var link = document.createElement('a');
    link.href = canvas.toDataURL("image/png");
    link.download = 'Dashboard.png';
    document.body.appendChild(link);
    link.click();
    link.style.display = 'none';
    document.body.removeChild(link)        
    document.body.style.zoom = '100%';        
    $('.preloader-wrapper').hide();
});

@MisterLamb Acima sua solução é trabalhada para textos na página html. Ao exibir o texto, ele converterá o texto na imagem de maneira brilhante. Mas o conteúdo da imagem (imagem) da página html ainda está sendo exibido com desfoque. Por favor, me aconselhe como posso corrigi-lo.

As imagens ainda estão borradas para mim também.

window.devicePixelRatio = 2;

Eu coloquei isso antes de fazer html2canvas e funcionou para mim

Olá, quero inserir o texto persa utf8, mas a fonte falha
Como resolver este problema

com http://jsfiddle.net/o0a8pbwd/1/ códigos

Por que esta imagem não sabe?