Html2canvas: क्रोम / क्रोमियम में असामान्य अक्षर रिक्ति

अक्षर रिक्ति (इस मामले में शब्द रिक्ति) वास्तव में सही दिखता है, जो सही नहीं लगता है वह फ़ॉन्ट परिवार है। Html2canvas का कौन सा संस्करण आप उपयोग कर रहे हैं? क्या आप jsfiddle पर इस मुद्दे को दोहरा सकते हैं?

संपादित करें: पत्र के साथ इसे अलग-अलग रूप में प्रस्तुत करना चाहिए जैसा कि आपने उल्लेख किया है।

आपके जवाब के लिए धन्यवाद,

मैं संस्करण 0.5.0-beta4 का उपयोग कर रहा हूं।

आपका क्या मतलब है कि काम रिक्ति सही लग रहा है? क्या आप मेरे द्वारा साझा की गई पहली तस्वीर का जिक्र कर रहे हैं? क्या फॉन्ट शब्दों के बीच ऐसी दूरी पैदा करेगा?

ध्यान दें कि मैं उस पाठ संपादक के लिए CodeMirror का उपयोग कर रहा हूँ जो विशेष रूप से एक कोणीय आवरण: ng2-codemirror है ।

मैंने यहां कोई फायदा नहीं होने की बात दोहराते हुए कोशिश की।

मुझे फ़ायरफ़ॉक्स और क्रोम में भी यही समस्या मिली। यदि आपके पास पाठ पर पत्र-रिक्ति सीएसएस नियम है तो यह प्रत्येक शब्द के बीच पाठ को बड़े अंतराल के साथ प्रस्तुत करेगा। यह संस्करण 0.4.1 में ऐसा नहीं था। यह पाठ को पूरी तरह से प्रस्तुत करने के लिए उपयोग किया गया था लेकिन यह छद्म तत्व गायब था (पहले: बाद में)

एक बार जब आप letter-spacing नियम निकाल देते हैं तो सब कुछ आपके लिए सामान्य हो जाता है? मैं इसका उपयोग नहीं कर रहा हूं, न तो मेरे घटक की सीएसएस में और न ही मेरे कस्टम code-mirror के सीएसएस फ़ाइल में।

हाँ सीएसएस से पत्र-रिक्ति नियम को हटाने के बाद समस्या दूर हो गई है। शब्दों के बीच कोई बड़ा स्थान नहीं है। यह पत्र-रिक्ति के हिस्से में पृष्ठ के प्रतिपादन में कुछ है जो इसे गड़बड़ कर रहा है।

अपडेट करें! मैंने सिर्फ मास्टर पर नवीनतम स्रोतों से पुस्तकालय का निर्माण किया और यह पूरी तरह से काम करता है। अब तक सब कुछ बहुत अच्छा लग रहा है। पहले मैंने v0.5.0-beta4 रिलीज़ के साथ प्रयास किया था।

संपादित करें: फ़ायरफ़ॉक्स पर 1 अंक मिला। पृष्ठभूमि-छवियों को जब पाठ के लिए क्लिप नहीं किया जा रहा है
-webkit- पृष्ठभूमि-क्लिप: पाठ;
-वेबकिट-पाठ-भरण-रंग: पारदर्शी;
उपयोग किया जाता है।
क्रोम में महान काम करता है।

मैं अपने CSS में किसी letter-spacing प्रॉपर्टी का उपयोग नहीं करता और समस्या अभी भी मौजूद है। मैं हालांकि v0.5.0-beta4 का उपयोग कर रहा हूं।

नवीनतम मास्टर स्रोतों से निर्माण का प्रयास करें।

हो गया, और फिर भी यह समस्या हल नहीं करता है, प्रदर्शन समान रहता है।

Https://github.com/niklasvh/html2canvas/commit/77d258f1d8eeccf7e38235463a293b512c1ca3d0 के साथ तय किया जाना चाहिए

लगता है जैसे समस्या बनी रहती है जैसे:

यहां बताया गया है कि मैंने किस प्रकार तत्व का प्रतिपादन किया है:

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

मैंने आपके द्वारा बताए अनुसार नवीनतम पूर्व-रिलीज़ संस्करण डाउनलोड किया है और पुराने को बदल दिया है।

यदि आप letterRendering: true विकल्प सेट करते हैं तो @christopherkade इसे ठीक करता है?

अफसोस की बात यह है कि, मैं यह कैसे करूँ:

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

अगर मैं रिपॉजिटरी में दिए गए उदाहरण का प्रयास करता हूं तो भी वही परिणाम मिलता है।

मुझे इस मामले के लिए एक वर्कअराउंड मिल गया है (और यह बहुत साफ नहीं है):

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

ध्यान दें कि दूसरा विकल्प का उपयोग करते समय फ़ायरफ़ॉक्स पर मुझे जो त्रुटि मिलती है वह इस प्रकार है:

जारी किया गया (वादा में): [अपवाद ... \ "विधि लागू नहीं हुई \" ...

एक ही समस्या है!!

सीएसएस विशेषता फ़ॉन्ट-संस्करण-संख्यात्मक: HTML निकाय से

font-variant: tabular-nums; ( in antd.css ) को निकालने के साथ ऐसी ही समस्या

अरबी भाषा के साथ एक ही समस्या किसी भी सुझाव कृपया?

@mohafouad +1

क्या आपने इसके लिए कोई फिक्स पाया है? धन्यवाद।

@ 2xSamurai नहीं: (

मैंने यह भी तय कर लिया है कि मैं उस स्क्रीनशॉट पर जा रहा हूँ जिसे मैं स्क्रीनशॉट चाहता हूँ और फिर मैंने " font-variant: normal; " सेट किया है, इसने मेरे लिए काम किया है आशा है कि यह मदद करता है।

अगर मैं पूरी सामग्री के बाहरी विभाग में font-variant: normal !important जोड़ता हूं, तो (निश्चित रूप से)

वही समस्या, मुझे पागल कर दिया

फ़ॉन्ट-प्रकार: सामान्य! महत्वपूर्ण काम नहीं कर रहा है

@ Malarkey-Jhu's और @maaoui के जवाब ने मेरी समस्या हल कर दी।

मेरे पास जो समस्या थी: फ़ॉन्ट परिवार काम नहीं कर रहा था और रिक्ति बहुत अधिक अस्थिर थी। कभी-कभी मेरे पास ओवरलेपिंग लेटर होते।

मैं क्या करता हूं: निर्यात के दौरान मैं टेक्स्ट के साथ तत्व पर element.style.setProperty ('font-variant', 'normal') कॉल करता हूं, और यह फ़ॉन्ट-परिवार को ठीक से दिखाने की अनुमति देता है, और रिक्ति सभी winky नहीं होने के लिए । फिर मैंने उस प्रॉपर्टी को निकाल दिया, जिसके बाद मैंने एक्सपोर्ट खत्म किया।

उपरोक्त समाधानों के आधार पर, यह समस्या मेरे लिए -webkit-font-variant-ligatures और font-variant-ligatures से normal कोडमेकर सीएसएस फ़ाइल में बदलकर तय की गई है। मैं CodeMirror संस्करण 5.42.2 का उपयोग कर रहा हूं।