Html2canvas: Unicode-Schriftartenproblem

@ ramesh-git Es scheint wirklich ein _BUG html2canvas_ zu sein.

Ich habe einen Test mit "fillText" gemacht und hatte keine Probleme, aber bei Verwendung der "html2canvas". Es wurden einige Zeichen durch eine seltsame Zeichnung ersetzt (genauer gesagt ein Kreis).

Die einzige schnelle Lösung, die Sie angeben können:

Sie müssen eine Leinwand mit ihren Texten erstellen, bevor Sie html2canvas ausführen, und sie mit den Originaltexten überlappen (unter Verwendung von position: absolute; und die Originaltexte sollten visibility: hidden; - müssen möglicherweise den Text in span-Tags und diese einfügen span-Tags sollten ausgeblendet sein.) Wenn Sie den Rückruf onreaded ausführen, entfernen (oder verbergen) Sie die Zeichenfläche (Texte).

Hinweis: Denken Sie daran, dass Sie bei jeder Frage, bei der der Code "clientseitig" verwendet wird, online ein Beispiel über Websites wie http://html2canvas.hertzen.com/ hinzufügen (ich habe Ihrer Frage ein Beispiel hinzugefügt, damit dies auch der Fall ist für Entwickler einfacher sein.)

fillText Beispiel:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body{
  background:#ccc;
}
canvas{
  background:#fff;
}
</style>
<canvas id="e" width="600" height="200"></canvas>
<h1 id="a1">தமிழ் ஊடகங்கள் கூடுமிடம்-பொங்குதமிழ்-  World of Tamilconverters</h1>
<script>
    var canvas = document.getElementById("e");
    var a1 = document.getElementById("a1");

    var context = canvas.getContext("2d");
        context.fillStyle = "#000";
        context.font = "bold 16px Arial";
        context.fillText(a1.innerHTML, 10, 20);
</script>

Fehler html2cavans Beispiel:
http://jsfiddle.net/6KvLk/

Ich habe den Grund für den Fehler entdeckt:
In der Funktion renderText(el, textNode, stack) , genauer gesagt in Zeile: 1186 :
Wir haben Folgendes: : textNode.nodeValue.split(""); (diese Aufteilung gilt für normale Zeichen)

Für den "Unicode-Text" müssen Sie die Eigenschaft text-align (css) mit einem der folgenden Werte hinzufügen: left , right und justify .

Hinweis: und verwenden Sie nicht die Eigenschaft letter-spacing :

Versuchen:

<h1 id="a1"><span style="text-align:justify;">தமிழ் ஊடகங்கள் கூடுமிடம்-பொங்குதமிழ்-  World of Tamilconverters</span></h1>
<script>
    var a1 = document.getElementById("a1");
    html2canvas(a1,{
        "onrendered":function(canvas){
            document.body.appendChild(canvas);
        }
    });
</script>

Vielen Dank an brcontainer.
Als ich seinen / ihren Beitrag sah, dachte ich daran, eine Code-Manipulation zu versuchen und es funktionierte unweigerlich. Die Antwort ist zu ersetzen:

textList = (! options.letterRendering && /^(left|right|justify|auto)$/.test(textAlign) && noLetterSpacing (getCSS (el, "letterSpacing"))

mit:

textList = (! options.letterRendering || /^(left|right|justify|auto)$/.test(textAlign) || noLetterSpacing (getCSS (el, "letterSpacing"))

Hinweis am (&&) Zeichen, das durch (||) ersetzt wird.

@BENYAZ Wäre es für Ihr Problem (# 289) nicht eine sauberere Lösung, einfach left|right|justify|auto in left|right|center|justify|auto zu ändern? Ich vermute, dass Ihre Problemumgehung in einigen Anwendungsfällen das Rendern unterbricht oder erheblich verlangsamt.

@BENYAZ es funktioniert für mich (Pashto & Urdu) Sprachen. Vielen Dank

@BENYAZ es funktioniert auch für mich in persischer Sprache

@BENYAZ Ja, ich bestätige auch, dass es auf Arabisch und Persisch funktioniert.

Es funktioniert in Dari
var textList = (! this.options.letterRendering || noLetterSpacing (container)) || ! hasUnicode (container.node.data)? getWords (Zeichen): Zeichen.map (Funktion (Zeichen))
Ich habe && in || geändert

@BENYAZ Es funktioniert in Bangla Sprache. Vielen Dank

firafiul Bruder, wie hast du dieses Problem gelöst? Das heißt, in eine Datei gehen, um die Zeilen zu ändern? Ich habe mehrere Versionen von html2canvas.js ausprobiert, aber keine zu ersetzenden Zeilen gefunden (die durch neue Zeilen ersetzt werden).

Suchen Sie die folgende Zeile in der Datei
textList =!

Ersetzen mit:

textList = (! options.letterRendering |||

** Anstelle von &&. Wille.

@rafiul , Bruder, du hast meine Worte nicht verstanden. Die Datei, die ich html2canvas.js genannt habe, enthält diese Zeile nicht . ))) "
Schwer, Ihre html2canvas.js-Datei hochzuladen?

@IbnAhmed Download von hier: http://3rwebtech.com/html2canvas.js

firafiul , vielen dank bro :)

@rafiul Würden Sie bitte die Datei

@rafiul Würden Sie bitte die Datei

@hiroksarker Laden Sie es hier herunter: https://www.dropbox.com/s/20hk1qcbm0d7far/html2canvas.js?dl=0

das gleiche Problem mit mir .... Hilfe bitte?

Einstellung CSS: Buchstabenabstand: 0;
options = {letterRendering: true}

in neuer Version sollte diese Zeile ändern:

var wordRendering = (! this.options.letterRendering || noLetterSpacing (container)) &&! hasUnicode (container.node.data);

mit diesem:
var wordRendering = (! this.options.letterRendering || noLetterSpacing (container)) || ! hasUnicode (container.node.data);

Ich habe dieses Problem behoben. Verwenden Sie css 'word-wrap: normal; '

wie ,<div style = "Zeilenumbruch: normal;"> Ihr Text here</div>