Html2canvas: Ikon FontAwesome tidak hanya dirender di firefox

Bisakah Anda menyiapkan contoh di jsfiddle?

http://jsfiddle.net/3ub69/

Mengalami masalah yang sama dengan font ikon kustom. Ini berfungsi di Safari dan Chrome tetapi tidak berfungsi di Firefox dan IE.

Melakukan beberapa penggalian dan membuatnya berfungsi di Firefox 26 dan IE 11. Masalahnya adalah baris berikut:

https://github.com/niklasvh/html2canvas/blob/master/src/Parse.js#L951

Saya akan mencoba menjelaskan mengapa itu terjadi. Beberapa asumsi saya mungkin salah, jadi silakan koreksi saya.

Tampaknya di non-webkitbrowser, objek yang dikembalikan oleh getComputedStyles hanya menyetel properti numerik { 0: 'fontFamily' } pada objek dan pasangan nilai kunci { fontFamily: 'fontawesome' } pada prototipe. Karena Object.keys bekerja seperti loop for in dengan Object.hasOwnProperty itu meninggalkan pasangan nilai sehingga tampaknya tidak ada gaya css yang disalin.

Untuk memperbaikinya Anda dapat mengganti Object.keys() , metode filter dan metode forEach dengan loop for in .

for (var prop in elStyle) {
  if (indexedProperty(prop) && prop !== 'cssText') {
    // Prevent assigning of read only CSS Rules, ex. length, parentRule
    try {
      elps.style[prop] = elStyle[prop];
    } catch (e) {
      h2clog(['Tried to assign readonly property ', prop, 'Error:', e]);
    }
  }
}

Alasan mengapa saya memeriksa prop !== 'cssText' adalah karena di Firefox selalu ada string kosong (bug?). Tampaknya jika Anda menyalin string kosong itu ke elemen semu, itu akan mengatur ulang fontFamily lagi.

Semoga ini membantu.

@Enome ini sangat bagus, meskipun saya masih belum menguji, silakan kirim "Permintaan Tarik".

Terima kasih! : +1:

Apakah @Enome pernah membuat pull request tentang topik ini? Saat ini saya menggunakan kodenya sebagai solusi.

@pspsater saya tidak pernah membuat permintaan tarik. Jika saya ingat dengan benar, saya pergi dari mencoba untuk mengubah html -> kanvas dan mulai menggunakan svg sebagai gantinya.

FontAwesome juga gagal merender untuk saya di browser webkit seperti Chrome dan PhantomJS

@kmdavis Sudahkah Anda mencoba html2canvas v0.5?

Kami saat ini menggunakan html2canvas v0.5.0-alpha

Bisakah Anda memberikan contoh sederhana di jsfiddle di mana masalah dapat direplikasi atau apakah http://jsfiddle.net/3ub69/52/ tidak berfungsi untuk Anda?

Saya juga mengalami masalah ini. Bagaimana cara meningkatkan ke html2canvas v0.5? Saya merasa konyol menanyakan ini, tetapi saya tidak melihat cabang atau tag seperti itu di repo ini.

Terima kasih sebelumnya.

NB Saya menggunakan html2canvas via rails-assets dengan gem 'rails-assets-html2canvas dan file bower.json :

{
  "name": "My-App",
  "dependencies": {
    "html2canvas": "https://github.com/niklasvh/html2canvas"
  }
}

Dari apa yang saya lihat di https://rails-assets.org/components hanya versi <= 0.4.1 yang tersedia untuk rails-assets. Jadi saya hanya menambahkan dist / html2canvas.js terbaru ke folder app/assets/javascripts/vendor/ dan akan menggunakannya seperti itu untuk saat ini. Terima kasih telah membuat perpustakaan yang sangat berguna ini!

@sweetleon Coba tukar file html2canvas.js file yang saya ubah di sini. Itu berhasil untuk saya.

https://github.com/fpslater/fix-html2canvas-webkit-font-conversion

@sweetleon Oh tidak apa, Anda sudah menemukan solusi ;-)

Saya mempunyai masalah yang sama

Masalah dengan fontawesome masih terjadi di versi 'html2canvas 1.0.0-alpha.12'

Ada solusi? Terima kasih

Masalah dengan fontawesome masih terjadi di versi 'html2canvas 1.0.0-rc.5