Html2canvas: Anormaler Buchstabenabstand in Chrom / Chrom

Der Buchstabenabstand (in diesem Fall der Wortabstand) sieht tatsächlich korrekt aus. Was nicht korrekt zu sein scheint, ist die Schriftfamilie. Welche Version von html2canvas verwenden Sie? Können Sie das Problem auf jsfiddle replizieren?

Bearbeiten: Mit letterRendering sollte es anders gerendert werden, als Sie es erwähnt haben.

Danke für deine Antwort,

Ich benutze die Version 0.5.0-beta4 .

Was meinst du damit, dass der Arbeitsabstand korrekt aussieht? Beziehen Sie sich auf das erste Bild, das ich geteilt habe? Würde die Schriftart einen solchen Abstand zwischen Wörtern erzeugen?

Beachten Sie, dass ich CodeMirror für den gerenderten Texteditor verwende, insbesondere einen Angular-Wrapper: ng2-codemirror .

Ich habe versucht, das Problem hier ohne Erfolg zu reproduzieren.

Ich habe das gleiche Problem auch bei Firefox und Chrome gefunden. Wenn Sie eine CSS-Regel mit Buchstabenabstand für den Text haben, wird der Text mit großen Lücken zwischen den einzelnen Wörtern gerendert. Dies war in Version 0.4.1 nicht der Fall, in der Text perfekt gerendert wurde, aber es fehlten Pseudoelemente (: vorher: nachher)

Sobald Sie die letter-spacing -Regel entfernen, wird für Sie alles wieder normal? Ich verwende es weder in der CSS meiner Komponente noch in der CSS-Datei meiner benutzerdefinierten code-mirror .

Ja Nach dem Entfernen der Buchstabenabstandsregel aus dem CSS ist das Problem behoben. Es gibt keine großen Zwischenräume zwischen Wörtern. Es ist etwas in der Wiedergabe der Seite an dem Teil des Buchstabenabstands, der sie durcheinander bringt.

Aktualisieren! Ich habe gerade die Bibliothek aus den neuesten Quellen auf Master erstellt und sie funktioniert perfekt. Bisher sieht alles sehr gut aus. Zuvor habe ich es mit der Version 0.5.0-Beta4 versucht.

Bearbeiten: 1 Problem auf Firefox gefunden. Hintergrundbilder werden nicht in Text geschnitten, wenn
-webkit-Hintergrund-Clip: Text;
-webkit-text-fill-color: transparent;
werden verwendet.
funktioniert aber gut in Chrom.

Ich verwende keine letter-spacing -Eigenschaft in meinem CSS und das Problem ist immer noch vorhanden. Ich benutze allerdings v0.5.0-beta4 .

Versuchen Sie, aus den neuesten Master-Quellen zu bauen.

Fertig, und dennoch löst dies das Problem nicht, die Anzeige bleibt gleich.

Sollte mit https://github.com/niklasvh/html2canvas/commit/77d258f1d8eeccf7e38235463a293b512c1ca3d0 behoben werden

Das Problem scheint so zu bleiben:

So habe ich das Element gerendert:

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

Ich habe die von Ihnen erwähnte neueste Vorabversion heruntergeladen und die alte ersetzt.

@christopherkade behebt es das letterRendering: true festlegen?

Leider nicht, so mache ich das:

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

Gleiches Ergebnis, wenn ich das im Repository angegebene Beispiel versuche.

Ich habe eine Problemumgehung für die Angelegenheit gefunden (und sie ist nicht sehr sauber):

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

Beachten Sie, dass der Fehler, den ich bei Verwendung der zweiten Option in Firefox erhalte, wie folgt lautet:

Nicht gefangen (im Versprechen): [Ausnahme ... "Methode nicht implementiert" ...

Gleiches Problem!!

Hier durch Entfernen des CSS-Attributs font-varianten-numeric: proportionale-nums aus dem HTML-Body

Ähnliches Problem beim Entfernen von font-variant: tabular-nums; ( in antd.css )

gleiches Problem mit der arabischen Sprache irgendeinen Vorschlag bitte?

@mohafouad +1

Haben Sie eine Lösung dafür gefunden? Vielen Dank.

@ 2xSamurai nein: (

Ich habe dies auch behoben, indem ich zu dem Div gegangen bin, den ich scannen möchte, und dann das " font-variant: normal; " eingestellt habe, das für mich funktioniert hat. Ich hoffe, es hilft.

behoben, wenn ich font-variant: normal !important zum äußeren Teil des gesamten Inhalts hinzufüge (in antd project)

Das gleiche Problem hat mich verrückt gemacht

Schriftvariante: normal! wichtig funktioniert nicht

Die Antwort von @ Malarkey-Jhu und @maaoui hat mein Problem gelöst.

Das Problem, das ich hatte: Die Schriftfamilie arbeitete nicht und der Abstand war sehr wackelig. Manchmal hatte ich überlappende Buchstaben.

Was ich tue: Während des Exports rufe ich element.style.setProperty ('Schriftvariante', 'normal') für das Element mit dem Text auf, wodurch die Schriftfamilie richtig angezeigt werden kann und der Abstand nicht nur wackelig ist . Dann entferne ich diese Eigenschaft, nachdem ich den Export beendet habe.

Basierend auf den oben genannten Lösungen wird dieses Problem für mich behoben, indem -webkit-font-variant-ligatures und font-variant-ligatures in normal in der Codemirror-CSS-Datei geändert werden. Ich verwende die CodeMirror-Version 5.42.2 .