Html2canvas: Problème de police Unicode

@ ramesh-git Cela semble être vraiment un _BUG html2canvas_ même.

J'ai fait un test avec "fillText" et je n'ai eu aucun problème, mais en utilisant le "html2canvas". Certains personnages ont été remplacés par un dessin étrange (un cercle pour être exact).

La seule solution rapide que vous pouvez spécifier:

vous devez créer un canevas de leurs textes avant d'exécuter html2canvas et les mettre en chevauchement avec les textes originaux (en utilisant position: absolute; et les textes originaux devraient recevoir visibility: hidden; - peut avoir à mettre le texte dans des balises span et ces Les balises span doivent être masquées.), lorsque vous exécutez le rappel onreaded vous supprimez (ou masquez) le canevas (textes).

Remarque: N'oubliez pas que chaque fois que vous posez une question qui utilisera le code "côté client", ajoutez un exemple en ligne en utilisant des sites comme http://html2canvas.hertzen.com/ (j'ai ajouté un exemple à votre question, il sera donc être plus facile pour les développeurs.)

Exemple de fillText:

<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>

Exemple de bug html2cavans:
http://jsfiddle.net/6KvLk/

J'ai découvert la raison de l'échec:
Dans la fonction renderText(el, textNode, stack) , pour être plus précis en ligne: 1186 :
nous avons ceci: : textNode.nodeValue.split(""); (ce partage est pour les caractères normaux)

Pour le "texte unicode", vous devez ajouter la propriété text-align (css) avec l'une des valeurs suivantes: left , right et justify .

Remarque: et n'utilisez pas la propriété letter-spacing :

Essayer:

<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>

merci beaucoup à brcontainer.
Quand j'ai vu son / shes post, j'ai pensé à essayer une manipulation de code et cela a fonctionné sans aucun doute. La réponse est de remplacer:

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

avec:

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

remarque au signe (&&) qui est remplacé par (||).

@BENYAZ Pour votre problème (# 289), une solution plus propre ne serait-elle pas de simplement changer left|right|justify|auto en left|right|center|justify|auto ? Je soupçonne que votre solution de contournement pourrait interrompre ou ralentir considérablement le rendu pour certains cas d'utilisation.

@BENYAZ ça marche pour moi (pachto et ourdou) langues. Je vous remercie

@BENYAZ ça marche aussi pour moi en persan

@BENYAZ oui, je confirme également qu'il fonctionne en arabe et en persan.

Il fonctionne en Dari
var textList = (! this.options.letterRendering || noLetterSpacing (conteneur)) || ! hasUnicode (container.node.data)? getWords (caractères): characters.map (fonction (caractère)
J'ai changé && en ||

@BENYAZ Il fonctionne en langue Bangla. Merci

firafiul Brother, comment avez-vous résolu ce problème? C'est aller dans un fichier pour changer les lignes? J'ai essayé plusieurs versions de html2canvas.js, mais je n'ai trouvé aucune ligne à remplacer (qui sera remplacée par de nouvelles lignes).

Recherchez la ligne suivante dans le fichier
textList =!

Remplacer par:

textList = (! options.letterRendering |||

** Au lieu de &&. Volonté.

@rafiul , frère, vous n'avez pas compris mes paroles. Le fichier que j'ai nommé html2canvas.js ne contient pas cette ligne . ))) "
Difficile de télécharger votre fichier html2canvas.js?

@IbnAhmed Téléchargez ici: http://3rwebtech.com/html2canvas.js

firafiul , merci beaucoup :)

@rafiul Souhaitez-vous partager le fichier html2canvas.js. Merci

@rafiul Souhaitez-vous partager le fichier html2canvas.js. Le lien précédent ne fonctionne pas. Merci

@hiroksarker téléchargez-le ici, https://www.dropbox.com/s/20hk1qcbm0d7far/html2canvas.js?dl=0

même problème avec moi .... une aide s'il vous plaît?

réglage css: espacement des lettres: 0;
options = {letterRendering: true}

dans la nouvelle version devrait changer cette ligne:

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

avec ça:
var wordRendering = (! this.options.letterRendering || noLetterSpacing (conteneur)) || ! hasUnicode (container.node.data);

J'ai corrigé ce problème en utilisant css 'word-wrap: normal; '

comme ,<div style = "word-wrap: normal;"> Votre texte here</div>