Html2canvas: Espacement des lettres anormal dans Chrome / Chrome

L'espacement des lettres (l'espacement des mots dans ce cas) semble correct, ce qui ne semble pas correct, c'est la famille de polices. Quelle version de html2canvas utilisez-vous? Pouvez-vous reproduire le problème sur jsfiddle?

Edit: avec letterRendering, il devrait être rendu différemment comme vous l'avez mentionné.

Merci pour votre réponse,

J'utilise la version 0.5.0-beta4 .

Que voulez-vous dire que l'espacement de travail semble correct? Faites-vous référence à la première photo que j'ai partagée? La police créerait-elle un tel espacement entre les mots?

Notez que j'utilise CodeMirror pour l'éditeur de texte qui est rendu, en particulier un wrapper angulaire: ng2-codemirror .

J'ai essayé de reproduire le problème en vain ici .

J'ai également trouvé le même problème dans Firefox et Chrome. Si vous avez une règle css d'espacement des lettres sur le texte, elle rendra le texte avec de grands espaces entre chaque mot. Ce n'était pas le cas dans la version 0.4.1 elle rendait le texte parfaitement mais il manquait des pseudo éléments (: before: after)

Une fois que vous supprimez la règle letter-spacing , tout revient à la normale pour vous? Je ne l'utilise pas, ni dans le css de mon composant ni dans mon fichier css personnalisé code-mirror .

Oui Après avoir supprimé la règle d'espacement des lettres du CSS, le problème est résolu. il n'y a pas de grands espaces entre les mots. c'est quelque chose dans le rendu de la page au niveau de la partie de l'espacement des lettres qui le gâche.

Mettre à jour! Je viens de créer la bibliothèque à partir des dernières sources sur master et cela fonctionne parfaitement. tout semble vraiment bien jusqu'à présent. Auparavant, j'ai essayé avec la version v0.5.0-beta4.

Edit: 1 problème trouvé sur Firefox. Les images d'arrière-plan ne sont pas découpées en texte lorsque
-webkit-background-clip: texte;
-webkit-text-fill-color: transparent;
sont utilisés.
fonctionne très bien dans le chrome.

Je n'utilise aucune propriété letter-spacing dans mon CSS et le problème est toujours présent. J'utilise cependant v0.5.0-beta4 .

Essayez de construire à partir des dernières sources principales.

C'est fait, et pourtant cela ne résout pas le problème, l'affichage reste le même.

Doit être corrigé avec https://github.com/niklasvh/html2canvas/commit/77d258f1d8eeccf7e38235463a293b512c1ca3d0

On dirait que le problème persiste comme tel:

Voici comment j'ai rendu l'élément:

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

J'ai téléchargé la dernière version préliminaire comme mentionné par vous et remplacé l'ancienne.

@christopherkade le corrige-t-il si vous définissez l'option letterRendering: true ?

Malheureusement, ce n'est pas le cas, voici comment je le fais:

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();
});

Même résultat si j'essaye l'exemple donné dans le référentiel.

J'ai trouvé une solution de contournement (et ce n'est pas très propre):

// 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();
});

Notez que l'erreur que j'obtiens sur Firefox lors de l'utilisation de la deuxième option est la suivante:

Non intercepté (promis): [Exception ... \ "Méthode non implémentée \" ...

Même problème!!

Résolu ici en supprimant l'attribut CSS font-variant-numeric: proportional-nums du corps HTML.

Correction d'un problème similaire avec la suppression de font-variant: tabular-nums; ( in antd.css )

même problème avec la langue arabe une suggestion s'il vous plaît?

@mohafouad +1

Avez-vous trouvé une solution à ce problème? Je vous remercie.

@ 2xSamurai non: (

J'ai également corrigé ce problème en accédant à la div que je veux faire une capture d'écran, puis j'ai défini le " font-variant: normal; " cela a fonctionné pour moi, j'espère que cela aide.

corrigé si j'ajoute font-variant: normal !important à la div externe de tout le contenu (dans le projet antd)

même problème, m'a rendu fou

font-variante: normal! important ne fonctionne pas

La réponse de @ Malarkey-Jhu et de @maaoui a résolu mon problème.

Le problème que j'avais: la famille Font ne fonctionnait pas et l'espacement était très bancal. Parfois, j'avais des lettres qui se chevauchaient.

Ce que je fais: lors de l'exportation, j'appelle element.style.setProperty ('font-variant', 'normal') sur l'élément avec le texte, ce qui permet à la famille de polices de s'afficher correctement et à l'espacement de ne pas être complètement bancal . Ensuite, je supprime cette propriété après avoir terminé l'exportation.

Sur la base des solutions ci-dessus, ce problème est résolu pour moi en changeant -webkit-font-variant-ligatures et font-variant-ligatures en normal dans le fichier css codemirror. J'utilise la version CodeMirror 5.42.2 .