Html2canvas: Espaçamento de letras anormal no Chrome / Chromium

O espaçamento entre letras (neste caso, espaçamento entre palavras) parece correto, na verdade, o que não parece estar correto é a família da fonte. Qual versão do html2canvas você está usando? Você pode replicar o problema no jsfiddle?

Editar: com letterRendering, deve renderizar de forma diferente, conforme você mencionou.

Obrigado pela sua resposta,

Estou usando a versão 0.5.0-beta4 .

O que quer dizer que o espaçamento do trabalho parece correto? Você está se referindo à primeira foto que compartilhei? A fonte criaria esse espaçamento entre as palavras?

Observe que estou usando o CodeMirror para o editor de texto renderizado, especificamente um wrapper Angular: ng2-codemirror .

Tentei reproduzir o problema sem sucesso aqui .

Eu também encontrei o mesmo problema no firefox e no cromo. Se você tiver uma regra css de espaçamento entre letras no texto, ela renderizará o texto com grandes lacunas entre cada palavra. Este não era o caso na versão 0.4.1, ela costumava renderizar o texto perfeitamente, mas faltavam pseudoelementos (: antes: depois)

Depois de remover a regra letter-spacing , tudo volta ao normal para você? Não estou usando, nem no css do meu componente nem no meu arquivo css code-mirror .

Sim. Depois de remover a regra de espaçamento entre letras do CSS, o problema desapareceu. não há grandes espaços entre as palavras. é algo na renderização da página na parte do espaçamento entre letras que está bagunçando tudo.

Atualizar! Acabei de construir a biblioteca a partir das fontes mais recentes no master e funciona perfeitamente. tudo parece muito bom até agora. Eu tentei anteriormente com a versão v0.5.0-beta4.

Edit: Encontrado 1 problema no firefox. imagens de fundo não estão sendo cortadas para texto quando
-webkit-background-clip: texto;
-webkit-text-fill-color: transparente;
são usados.
funciona muito bem no cromo.

Não uso nenhuma propriedade letter-spacing em meu CSS e o problema ainda está presente. No entanto, estou usando v0.5.0-beta4 .

Tente construir a partir das fontes principais mais recentes.

Pronto, e mesmo assim não resolve o problema, o display continua o mesmo.

Deve ser corrigido com https://github.com/niklasvh/html2canvas/commit/77d258f1d8eeccf7e38235463a293b512c1ca3d0

Parece que o problema persiste assim:

Veja como renderizei o elemento:

html2canvas(document.body).then(function(canvas) {      
      document.body.appendChild(canvas);
});    

Baixei a última versão de pré-lançamento, conforme mencionado por você, e substituí a antiga.

@christopherkade corrige se você definir a opção letterRendering: true ?

Infelizmente, não. Veja como faço:

let element = document.getElementById('console');
const options = {
  letterRendering: true
};

html2canvas(element, options).then(function(canvas) {      
  document.body.appendChild(canvas);

  var url = canvas.toDataURL();
  var img = '<img src="' + url + '" style="border:0;"></img>'
  var x = window.open();
  x.document.open();
  x.document.write(img);
  x.document.close();
});

Mesmo resultado se eu tentar o exemplo dado no repositório.

Eu encontrei uma solução alternativa para o problema (e não é muito clara):

// Package used to detect the browser used by the user
const browser = detect();
const element = document.getElementById('console');

// Set up my options
let options = {};
// For some reason foreignObjectRendering solves the spacing issue on Chrome but gives an error on Firefox, so I detect the browser and apply the adequate options.
if (browser && browser.name === 'chrome') {      
  options = {
    useCORS: true,
    foreignObjectRendering: true
  };  
}

// Open the canvas in a new window
html2canvas(element, options).then(function(canvas) {
  const url = canvas.toDataURL();
  const img = '<img src="' + url + '" style="border:0;"></img>'
  const x = window.open();
  x.document.open();
  x.document.write(img);
  x.document.close();
});

Observe que o erro que recebo no Firefox ao usar a segunda opção é o seguinte:

Não capturado (em promessa): [Exceção ... \ "Método não implementado \" ...

Mesmo problema!!

Resolvido aqui removendo o atributo CSS font-variant-numeric: proporcional-nums do corpo do HTML.

Corrigido problema semelhante com a remoção de font-variant: tabular-nums; ( in antd.css )

mesmo problema com a língua árabe, alguma sugestão, por favor?

@mohafouad +1

Você encontrou alguma solução para isso? Obrigado.

@ 2xSamurai no: (

Eu consertei isso também indo para o div que quero capturar a tela e, em seguida, defini " font-variant: normal; " que funcionou para mim, espero que ajude.

corrigido se eu adicionar font-variant: normal !important ao div externo de todo o conteúdo (no projeto antd)

mesmo problema, me deixou louco

variante da fonte: normal! importante não funciona

As respostas de @Malarkey-Jhu e @maaoui resolveram meu problema.

O problema que eu tinha: a família da fonte não estava funcionando e o espaçamento era muito instável. Às vezes, eu teria letras sobrepostas.

O que eu faço: durante a exportação, chamo element.style.setProperty ('font-variant', 'normal') no elemento com o texto, e isso permite que a família da fonte seja exibida corretamente e o espaçamento não seja todo irregular . Em seguida, removo essa propriedade após terminar de exportar.

Com base nas soluções acima, esse problema foi corrigido para mim alterando -webkit-font-variant-ligatures e font-variant-ligatures para normal no arquivo css do codemirror. Estou usando a versão 5.42.2 CodeMirror.