Html2canvas: Spasi huruf tidak normal di Chrome / Chromium

Penspasian huruf (spasi kata dalam kasus ini) terlihat benar sebenarnya, yang tampaknya tidak benar adalah jenis font. Versi html2canvas manakah yang Anda gunakan? Bisakah Anda mereplikasi masalah di jsfiddle?

Edit: dengan letterRendering itu harus dirender secara berbeda seperti yang Anda sebutkan.

Terima kasih untuk balasan Anda,

Saya menggunakan versi 0.5.0-beta4 .

Apa maksud Anda jarak kerja terlihat benar? Apakah Anda mengacu pada gambar pertama yang saya bagikan? Akankah font menciptakan jarak antar kata seperti itu?

Perhatikan bahwa saya menggunakan CodeMirror untuk editor teks yang dirender, khususnya Angular wrapper: ng2-codemirror .

Saya mencoba mereproduksi masalah tersebut tetapi tidak berhasil di sini .

Saya juga menemukan masalah yang sama di firefox dan chrome. Jika Anda memiliki aturan css spasi huruf pada teks itu akan membuat teks dengan celah besar di antara setiap kata. Ini tidak terjadi di versi 0.4.1, ini digunakan untuk merender teks dengan sempurna tetapi elemen pseudo hilang (: sebelum: setelah)

Setelah Anda menghapus aturan letter-spacing semuanya kembali normal untuk Anda? Saya tidak menggunakannya, baik di css komponen saya maupun di file css kustom code-mirror .

Ya Setelah menghapus aturan spasi huruf dari CSS, masalahnya hilang. tidak ada spasi yang besar di antara kata-kata. itu adalah sesuatu dalam rendering halaman di bagian spasi huruf yang mengacaukannya.

Memperbarui! Saya baru saja membangun perpustakaan dari sumber terbaru pada master dan berfungsi dengan sempurna. semuanya terlihat sangat bagus sejauh ini. Sebelumnya saya mencoba dengan rilis v0.5.0-beta4.

Edit: Ditemukan 1 masalah di firefox. gambar latar belakang tidak sedang dipotong ke teks saat
-webkit-background-clip: teks;
-webkit-text-fill-color: transparan;
digunakan.
bekerja dengan baik di chrome.

Saya tidak menggunakan properti letter-spacing di CSS saya dan masalah masih ada. Saya menggunakan v0.5.0-beta4 .

Cobalah membangun dari sumber master terbaru.

Selesai, namun ini tidak menyelesaikan masalah, tampilannya tetap sama.

Harus diperbaiki dengan https://github.com/niklasvh/html2canvas/commit/77d258f1d8eeccf7e38235463a293b512c1ca3d0

Sepertinya masalahnya tetap seperti itu:

Inilah cara saya merender elemen:

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

Saya telah mengunduh versi pra-rilis terbaru seperti yang Anda sebutkan dan mengganti yang lama.

@christopherkade apakah itu memperbaikinya jika Anda menyetel opsi letterRendering: true ?

Sayangnya tidak, begini cara saya melakukannya:

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

Hasil yang sama jika saya mencoba contoh yang diberikan di repositori.

Saya telah menemukan solusi untuk masalah ini (dan tidak terlalu bersih):

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

Perhatikan bahwa kesalahan yang saya dapatkan di Firefox saat menggunakan opsi kedua adalah sebagai berikut:

Tidak tertangkap (dalam janji): [Pengecualian ... \ "Metode tidak diterapkan \" ...

Permasalahan yang sama!!

Dipecahkan di sini dengan menghapus atribut CSS font-variant-numeric: proporsional-nums dari badan HTML.

Memperbaiki masalah serupa dengan menghapus font-variant: tabular-nums; ( in antd.css )

masalah yang sama dengan bahasa Arab, ada saran?

@mohafouad +1

Sudahkah Anda menemukan perbaikan untuk ini? Terima kasih.

@ 2xSamurai no: (

Saya telah memperbaikinya juga dengan membuka div yang ingin saya screenshot dan kemudian saya menetapkan " font-variant: normal; " ini telah berhasil untuk saya harap ini membantu.

diperbaiki jika saya menambahkan font-variant: normal !important ke div luar seluruh konten (dalam proyek antd)

masalah yang sama, membuatku gila

font-variant: normal! penting tidak berfungsi

Jawaban @ Malarkey-Jhu dan @maaoui memecahkan masalah saya.

Masalah yang saya miliki: Keluarga font tidak berfungsi dan jarak sangat miring. Terkadang saya memiliki huruf yang tumpang tindih.

Apa yang saya lakukan: Selama ekspor, saya memanggil element.style.setProperty ('font-variant', 'normal') pada elemen dengan teks, dan ini memungkinkan font-family ditampilkan dengan benar, dan spasi tidak semuanya miring . Kemudian saya menghapus properti itu setelah saya selesai mengekspor.

Berdasarkan solusi di atas, masalah ini diperbaiki untuk saya dengan mengubah -webkit-font-variant-ligatures dan font-variant-ligatures menjadi normal dalam file css codemirror. Saya menggunakan versi CodeMirror 5.42.2 .