Html2canvas: تباعد الأحرف غير الطبيعي في Chrome / Chromium

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

تحرير: باستخدام letterRendering ، يجب أن يتم عرضه بشكل مختلف كما ذكرت.

شكرا لردك،

أنا أستخدم الإصدار 0.5.0-beta4 .

ماذا تقصد أن تباعد العمل يبدو صحيحا؟ هل تشير إلى الصورة الأولى التي شاركتها؟ هل سيخلق الخط مثل هذا التباعد بين الكلمات؟

لاحظ أنني أستخدم CodeMirror لمحرر النصوص الذي تم تقديمه ، وتحديداً المجمع الزاوي: ng2-codemirror .

لقد حاولت إعادة إظهار المشكلة ولكن دون جدوى هنا .

لقد وجدت أيضًا نفس المشكلة في Firefox و chrome. إذا كانت لديك قاعدة css لتباعد الأحرف على النص ، فسيتم عرض النص بفجوات كبيرة بين كل كلمة. لم يكن هذا هو الحال في الإصدار 0.4.1 الذي استخدمه لتقديم النص بشكل مثالي ولكنه كان ينقصه عناصر زائفة (: before: after)

بمجرد إزالة قاعدة letter-spacing كل شيء يعود إلى طبيعته بالنسبة لك؟ أنا لا أستخدمه ، لا في ملف css الخاص بالمكون ولا في ملف css المخصص لـ code-mirror .

نعم بعد إزالة قاعدة تباعد الأحرف من CSS ، اختفت المشكلة. لا توجد مسافات كبيرة بين الكلمات. إنه شيء في عرض الصفحة في جزء تباعد الأحرف الذي يفسدها.

تحديث! لقد قمت للتو ببناء المكتبة من أحدث المصادر على مستوى الماجستير وهي تعمل بشكل مثالي. كل شيء يبدو جيدًا حتى الآن. حاولت سابقًا مع الإصدار v0.5.0-beta4.

تحرير: تم العثور على مشكلة واحدة في Firefox. لا يتم قص صور الخلفية إلى نص عندما
-webkit-background-clip: نص ؛
-لون تعبئة النص -webkit: شفاف ؛
يستخدم.
يعمل بشكل رائع في الكروم بالرغم من ذلك.

لا أستخدم أي خاصية letter-spacing في CSS ولا تزال المشكلة قائمة. أنا أستخدم v0.5.0-beta4 رغم ذلك.

حاول البناء من أحدث المصادر الرئيسية.

تم ، ومع ذلك لم يحل هذا المشكلة ، تظل الشاشة كما هي.

يجب إصلاحه باستخدام https://github.com/niklasvh/html2canvas/commit/77d258f1d8eeccf7e38235463a293b512c1ca3d0

يبدو أن المشكلة لا تزال قائمة مثل:

إليك كيفية عرض العنصر:

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

لقد قمت بتنزيل أحدث إصدار تجريبي كما ذكرته واستبدلت الإصدار القديم.

christopherkade هل يصلحه إذا قمت بتعيين الخيار letterRendering: true ؟

للأسف لم يحدث ذلك ، وإليك كيف أفعل ذلك:

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

لاحظ أن الخطأ الذي أحصل عليه في Firefox عند استخدام الخيار الثاني هو كما يلي:

غير معلوم (في الوعد): [استثناء ... \ "الطريقة غير مطبقة \" ...

نفس المشكلة!!

تم حلها هنا عن طريق إزالة font-variant-numeric: Proportional-nums من HTML body.

تم إصلاح مشكلة مماثلة مع إزالة font-variant: tabular-nums; ( in antd.css )

نفس المشكلة مع اللغة العربية أي اقتراح من فضلك؟

mohafouad +1

هل وجدت أي إصلاح لهذا؟ شكرا لك.

@ 2xSamurai لا: (

لقد أصلحت هذا أيضًا بالانتقال إلى div الذي أريد التقاط لقطة شاشة له ، ثم قمت بتعيين " font-variant: normal; " وقد نجح هذا الأمر بالنسبة لي ، آمل أن يساعدني.

ثابت إذا أضفت font-variant: normal !important إلى div الخارجي للمحتوى بالكامل (في مشروع antd)

نفس المشكلة ، دفعتني إلى الجنون

متغير الخط: عادي! المهم لا يعمل

حلّت إجابة @ Malarkey-Jhu's و maaoui مشكلتي.

المشكلة التي أواجهها: عائلة الخطوط لم تكن تعمل وكان التباعد متزعزعًا للغاية. في بعض الأحيان كان لدي أحرف متداخلة.

ما أفعله: أثناء التصدير ، أستدعي element.style.setProperty ('font-variant'، 'normal') على العنصر الذي يحتوي على النص ، وهذا يسمح لعائلة الخطوط بالظهور بشكل صحيح ، وألا تكون المسافات كلها متقطعة . ثم أزيل هذه الخاصية بعد أن انتهيت من التصدير.

بناءً على الحلول المذكورة أعلاه ، تم إصلاح هذه المشكلة بالنسبة لي عن طريق تغيير -webkit-font-variant-ligatures و font-variant-ligatures إلى normal في ملف codemirror css. أنا أستخدم إصدار CodeMirror 5.42.2 .