Html2canvas: مشكلة خط يونيكود

@ ramesh-git يبدو أنه حقًا _BUG html2canvas_ حتى.

أجريت اختبارًا باستخدام "fillText" ولم أواجه أي مشاكل ، ولكن عند استخدام "html2canvas". كان هناك بعض الشخصيات تم استبدالها برسم غريب (دائرة على وجه الدقة).

الحل السريع الوحيد الذي يمكنك تحديده:

يجب عليك إنشاء لوحة لنصوصهم قبل تشغيل html2canvas ووضعها متداخلة مع النصوص الأصلية (باستخدام position: absolute; ويجب أن تتلقى النصوص الأصلية visibility: hidden; - قد تضطر إلى وضع النص ضمن علامات span وهذه يجب إخفاء علامات span.) ، عند تشغيل رد الاتصال onreaded تقوم بإزالة (أو إخفاء) اللوحة القماشية (النصوص).

ملاحظة: تذكر أنه كلما طرحت سؤالاً يستخدم رمز "جانب العميل" ، أضف مثالاً عبر الإنترنت باستخدام مواقع مثل http://html2canvas.hertzen.com/ (لقد أضفت مثالاً إلى سؤالك ، لذا يكون أسهل للمطورين.)

مثال على ملء النص:

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

مثال علة html2cavans:
http://jsfiddle.net/6KvLk/

اكتشفت سبب الفشل:
في الوظيفة renderText(el, textNode, stack) ، لنكون أكثر تحديدًا في السطر: 1186 :
لدينا هذا: : textNode.nodeValue.split(""); (هذا التقسيم للأحرف العادية)

بالنسبة إلى "نص unicode" ، يلزمك إضافة الخاصية text-align (css) بإحدى القيم التالية: left ، right ، و justify .

ملاحظة: ولا تستخدم الخاصية letter-spacing :

محاولة:

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

شكرا جزيلا ل brcontainer.
عندما رأيت المنشور الخاص به ، فكرت في محاولة بعض التلاعب بالشفرة وعملت بشكل لا لبس فيه. الجواب هو استبدال:

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

مع:

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

إشعار بعلامة (&&) التي تم استبدالها بعلامة (||).

BENYAZ لمشكلتك (# 289) ، left|right|justify|auto إلى left|right|center|justify|auto ؟ أظن أن الحل البديل الخاص بك قد يتعطل أو يتباطأ بشكل ملحوظ في بعض حالات الاستخدام.

BENYAZ تعمل مع لغات (الباشتو والأردية). شكرا لك

BENYAZ إنه يعمل أيضًا بالنسبة لي باللغة الفارسية

BENYAZ نعم ، أؤكد أيضًا أنه يعمل باللغتين العربية والفارسية.

انها تعمل في داري
var textList = (! this.options.letterRendering || noLetterSpacing (container)) || ! hasUnicode (container.node.data)؟ getWords (الشخصيات): character.map (function (character)
لقد غيرت && إلى ||

BENYAZ إنها تعمل باللغة البنغالية. شكر

frafiul Brother كيف حللت هذه المشكلة؟ هذا هو الذهاب إلى ملف لتغيير الخطوط؟ لقد جربت عدة إصدارات من html2canvas.js ، لكنني لم أجد أي خطوط لاستبدالها (والتي سيتم استبدالها بخطوط جديدة).

ابحث عن السطر التالي في ملف htIbnAhmed html2canvas.js
textList =!

استبدل ب:

textList = (! options. LetterRendering ||

** مكان &&. إرادة.

rafiul ، أخي أنت لم تفهم كلامي. الملف الذي سميته html2canvas.js لا يحتوي على هذا السطر . ))) "
هل يصعب تحميل ملف html2canvas.js؟

IbnAhmed تنزيل من هنا: http://3rwebtech.com/html2canvas.js

firafiul ، شكرا جزيلا

rafiul هل

rafiul هل

hiroksarker قم بتنزيله من هنا https://www.dropbox.com/s/20hk1qcbm0d7far/html2canvas.js؟dl=0

نفس المشكلة معي .... أي مساعدة من فضلك؟

إعداد css: تباعد الأحرف: 0 ؛
الخيارات = {letterRendering: true}

في الإصدار الجديد يجب تغيير هذا السطر:

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

مع هذا:
var wordRendering = (! this.options.letterRendering || noLetterSpacing (container)) || ! hasUnicode (container.node.data) ؛

لقد أصلحت هذه المشكلة باستخدام css 'word-wrap: normal؛ '

مثل ,<div style = "التفاف النص: عادي ؛"> نصك here</div>