Html2canvas: Masalah font unicode

@ ramesh-git Tampaknya benar-benar bahkan html2canvas_ _BUG.

Saya melakukan tes dengan "fillText" dan tidak punya masalah, tetapi saat menggunakan "html2canvas". Ada beberapa karakter yang diganti dengan gambar aneh (lingkaran tepatnya).

Satu-satunya perbaikan cepat yang dapat Anda tentukan:

Anda harus membuat kanvas teks mereka sebelum menjalankan html2canvas dan menempatkannya tumpang tindih dengan teks asli (menggunakan position: absolute; dan teks asli harus menerima visibility: hidden; - mungkin harus meletakkan teks di dalam tag span dan ini tag span harus disembunyikan.), ketika Anda menjalankan callback onreaded Anda menghapus (atau menyembunyikan) kanvas (teks).

Catatan: Ingat, setiap kali Anda membuat pertanyaan yang akan menggunakan kode "sisi klien", tambahkan contoh online menggunakan situs seperti http://html2canvas.hertzen.com/ (Saya telah menambahkan contoh ke pertanyaan Anda, jadi pertanyaan itu akan lebih mudah bagi pengembang.)

Contoh 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>

contoh bug html2cavans:
http://jsfiddle.net/6KvLk/

Saya menemukan alasan kegagalan:
Pada fungsi renderText(el, textNode, stack) , lebih spesifiknya pada baris: 1186 :
kami memiliki ini: : textNode.nodeValue.split(""); (pembagian ini untuk karakter normal)

Untuk "teks unicode" Anda perlu menambahkan properti text-align (css) dengan salah satu nilai berikut: left , right , dan justify .

Catatan: dan jangan gunakan properti letter-spacing :

Mencoba:

<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>

terima kasih banyak kepada brcontainer.
Ketika saya melihat / dia posting, saya berpikir untuk mencoba beberapa manipulasi kode & itu benar-benar berhasil. Jawabannya adalah mengganti:

textList = (! options.letterRendering && /^(lefti>right E5E5E5justifyi>auto)$/.test(textAlign) && noLetterSpacing (getCSS (el, "letterSpacing")))

dengan:

textList = (! options.letterRendering || /^(lefti>righti>justify incredauto)$/.test(textAlign) || noLetterSpacing (getCSS (el, "letterSpacing")))

perhatikan tanda (&&) yang diganti dengan (||).

@BENYAZ Untuk masalah Anda (# 289), bukankah perbaikan yang lebih bersih adalah dengan hanya mengubah left|right|justify|auto menjadi left|right|center|justify|auto ? Saya menduga solusi Anda mungkin rusak atau rendering lambat secara signifikan untuk beberapa kasus penggunaan.

@BENYAZ berfungsi untuk saya (bahasa Pashto & Urdu). Terima kasih

@BENYAZ juga berfungsi untuk saya dalam bahasa persia

@BENYAZ ya, saya juga mengonfirmasi bahwa ini berfungsi dalam bahasa Arab dan Persia.

Ini bekerja di Dari
var textList = (! this.options.letterRendering || noLetterSpacing (container)) || ! hasUnicode (container.node.data)? getWords (karakter): characters.map (fungsi (karakter)
Saya mengubah && menjadi ||

@BENYAZ Ini bekerja dalam bahasa Bangla. Terima kasih

Firafiul Brother, bagaimana Anda mengatasi masalah ini? Itu untuk pergi ke file untuk mengubah baris? Saya sudah mencoba beberapa versi html2canvas.js, tetapi saya belum menemukan baris untuk diganti (saya akan menggantinya dengan yang baru).

Temukan baris berikut di file
textList =!

Ubah dengan:

textList = (! options.letterRendering ||i>

** Di tempat &&. Akan.

@rafiul , abang kamu gak ngerti kata-kataku. File yang saya beri nama html2canvas.js tidak memiliki baris ini di dalamnya . ))) "
Sulit mengupload file html2canvas.js Anda?

@IbnAhmed Unduh dari sini: http://3rwebtech.com/html2canvas.js

firafiul , banyak terima kasih bro :)

@rafiul Tolong bagikan file html2canvas.js. Terima kasih

@rafiul Tolong bagikan file html2canvas.js. Tautan sebelumnya tidak berfungsi. Terima kasih

@hiroksarker unduh dari sini, https://www.dropbox.com/s/20hk1qcbm0d7far/html2canvas.js?dl=0

masalah yang sama dengan saya .... ada bantuan tolong?

pengaturan css: spasi-huruf: 0;
options = {letterRendering: true}

dalam versi baru harus mengubah baris ini:

var wordRendering = (! this.options.letterRendering || noLetterSpacing (container)) &&! hasUnicode (container.node.data);

dengan ini:
var wordRendering = (! this.options.letterRendering || noLetterSpacing (container)) || ! hasUnicode (container.node.data);

Saya memperbaiki masalah ini menggunakan css 'word-wrap: normal; '

seperti ,<div style = "word-wrap: normal;"> Teks Anda here</div>