Html2canvas: यूनिकोड फ़ॉन्ट समस्या

@ ramesh-git यह वास्तव में एक _BUG html2canvas_ सम प्रतीत होता है।

मैंने "fillText" के साथ एक परीक्षण किया और कोई समस्या नहीं थी, लेकिन "html2canvas" का उपयोग करते समय। कुछ पात्रों को एक अजीब ड्राइंग (सटीक होने के लिए एक चक्र) द्वारा प्रतिस्थापित किया गया था।

एकमात्र त्वरित सुधार जिसे आप निर्दिष्ट कर सकते हैं:

html2canvas चलाने से पहले आपको उनके ग्रंथों का कैनवास बनाना होगा और उन्हें मूल पाठों पर ओवरलैप करना होगा ( position: absolute; का उपयोग करना चाहिए और मूल ग्रंथों को visibility: hidden; प्राप्त करना चाहिए - पाठ को स्पैन टैग और इन के भीतर रखना होगा। स्पैन टैग छिपा होना चाहिए।), जब आप कॉलबैक onreaded चलाते हैं (या छिपाना) कैनवास (ग्रंथों) को हटा देते हैं।

नोट: याद रखें, जब भी आप एक प्रश्न बनाते हैं जो कोड "क्लाइंट-साइड" का उपयोग करेगा, तो http://html2canvas.hertzen.com/ जैसी साइटों का उपयोग करके ऑनलाइन एक उदाहरण जोड़ें (मैंने आपके प्रश्न में एक उदाहरण जोड़ा है, इसलिए यह डेवलपर्स के लिए आसान हो।)

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>

बग html2cavans उदाहरण:
http://jsfiddle.net/6KvLk/

मैंने विफलता का कारण खोजा:
फ़ंक्शन renderText(el, textNode, stack) , पंक्ति में अधिक विशिष्ट होने के लिए: 1186 :
हमारे पास यह है: : textNode.nodeValue.split(""); (यह विभाजन सामान्य वर्णों के लिए है)

"यूनिकोड पाठ" के लिए आपको निम्नलिखित में से किसी एक मूल्य के साथ संपत्ति 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 = (विकल्प।

साथ में:

textList = ((options.letterRendering || /^(leftpgright picsjustifyaauto)>/.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 (कंटेनर)) || ! hasUnicode (container.node.data)? getScript (वर्ण): characters.map (फ़ंक्शन (वर्ण))
मैं बदल गया && से ||

@BENYAZ यह बांग्ला भाषा में काम कर रहा है। धन्यवाद

firafiul भाई, आपने इस समस्या को कैसे हल किया? यह लाइनों को बदलने के लिए एक फ़ाइल में जाना है? मैंने html2canvas.js के कई संस्करणों की कोशिश की है, लेकिन मुझे बदलने के लिए कोई भी रेखा नहीं मिली है (जिसे नई लाइनों द्वारा प्रतिस्थापित किया जाएगा)।

HtIbnAhmed html2canvas.js फ़ाइल में निम्न पंक्ति
पाठवादी =!

से बदलो:

textList = (options.letterRendering |||

** की जगह &&। मर्जी।

@ अफीउल , भाई आपने मेरी बातों को नहीं समझा। जिस फाइल का नाम मैंने html2canvas.js रखा है, उसमें यह लाइन नहीं है । ))) "
अपनी html2canvas.js फ़ाइल अपलोड करना मुश्किल है?

@IbnAhmed यहां से डाउनलोड करें: http://3rwebtech.com/html2canvas.js

Firafiul , बहुत धन्यवाद भाई :)

@rafiul क्या आप pls को html2canvas.js फ़ाइल साझा करेंगे। धन्यवाद

@rafiul क्या आप pls को html2canvas.js फ़ाइल साझा करेंगे। पिछला लिंक काम नहीं कर रहा है। धन्यवाद

@hiroksarker इसे यहां से डाउनलोड करें, https://www.dropbox.com/s/20hk1qcbm0d7far/html2canvas.js?dl=0

मेरे साथ एक ही समस्या .... कृपया कोई मदद?

सीएसएस स्थापित करना: पत्र-रिक्ति: 0;
विकल्प = {पत्र भेजना: सत्य}

नए संस्करण में इस लाइन को बदलना चाहिए:

var wordRendering = (!! this.options.letterRendering || noLetterSpacing (कंटेनर)) &&! hasUnicode (container.node.data)!

इसके साथ:
var wordRendering = (!! this.options.letterRendering || noLetterSpacing (कंटेनर)) || ! HasUnicode (container.node.data);

मैंने तय किया कि यह समस्या css 'word-wrap: सामान्य का उपयोग करें; '

जैसे ,<div शैली = "शब्द-लपेट: सामान्य;"> आपका पाठ here</div>