Html2canvas: Tag teks dalam SVG tumpang tindih (digandakan/digandakan)

Dibuat pada 19 Feb 2015  ·  24Komentar  ·  Sumber: niklasvh/html2canvas

(Maaf, saya tidak pandai bahasa Inggris)

Halo,
Saya menggunakan skrip yang luar biasa ini untuk membuat tag SVG
Ada beberapa teks yang tumpang tindih ketika saya merender tag teks di SVG ke kanvas
Tag teks diproses sebagai simpul Teks dan juga SVG
Anda dapat melihatnya dengan mudah dengan mengubah properti
2015-02-19 15 08 29_2
Berikut adalah contoh kode (dengan html2canvas 0.5.0-alpha2)

<html>
<head>
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="js/html2canvas.js"></script>
</head>
<body>
  <svg width="100" height="100">
    <g transform="translate(20,20)">
      <text dy=".45em" y="10" x="0" dx="-.8em" transform="translate(0,0) rotate(-70)" style="font-size:12px;">Text</text>
    </g>
  </svg>
  <script>
    $(document).ready(function() {
      html2canvas(document.body, {
        onrendered: function(canvas) {
          document.body.appendChild(canvas);
        }
      });
    })
  </script>
</body>
</html

Dan inilah perubahan cepat saya

NodeParser.prototype.getChildren = function(parentContainer) {
    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
        var container = [node.nodeType === Node.TEXT_NODE && node.parentElement.tagName !== "text" ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
    }, this));
};

Saya harap ini akan membantu

Needs More Information
Sumber
picture hyojin
👍4 ❤2

Komentar yang paling membantu

@hyojin
Setelah mengujinya di IE, perbaikan Anda tidak berfungsi karena properti parentElement tidak terisi pada simpul saat ini. Gunakan parentNode sebagai gantinya! Bagaimanapun, itu akan lebih jelas karena kita masuk ke NodeParser dan berbicara tentang node.js.

Jika tidak, alih-alih menguji nama tag, saya mengubah kode saya untuk menguji instance parentNode dan memproses node saat ini memiliki TextContainer hanya jika parentNode bukan SVGElement .

Ini berfungsi pada chrome dan ie11. di firefox saya tidak dapat mengujinya karena bug kanvas kosong!

kode saya

NodeParser.prototype.getChildren = function(parentContainer) {
    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
        var container = [node.nodeType === Node.TEXT_NODE && !(node.parentNode instanceof SVGElement) ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
    }, this));
};

Saya harap ini membantu.

picture ncoquelet pada 6 Agu 2015
❤2

Semua 24 komentar

Terima kasih #Hyojin. Itu membantu saya.

josnabattula picture josnabattula pada 17 Mar 2015

Terima kasih, banyak membantu saya!

natee picture natee pada 23 Jul 2015

Terima kasih atas perbaikan Anda!

anda juga dapat memeriksa tspan tagName :
node.nodeType === Node.TEXT_NODE && node.parentElement.tagName !== "text" && node.parentElement.tagName !== "tspan"

ncoquelet picture ncoquelet pada 4 Agu 2015
👍1

@ncoquelet saya memperbarui kode saya. Terima kasih!

hyojin picture hyojin pada 5 Agu 2015

@hyojin
Setelah mengujinya di IE, perbaikan Anda tidak berfungsi karena properti parentElement tidak terisi pada simpul saat ini. Gunakan parentNode sebagai gantinya! Bagaimanapun, itu akan lebih jelas karena kita masuk ke NodeParser dan berbicara tentang node.js.

Jika tidak, alih-alih menguji nama tag, saya mengubah kode saya untuk menguji instance parentNode dan memproses node saat ini memiliki TextContainer hanya jika parentNode bukan SVGElement .

Ini berfungsi pada chrome dan ie11. di firefox saya tidak dapat mengujinya karena bug kanvas kosong!

kode saya

NodeParser.prototype.getChildren = function(parentContainer) {
    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
        var container = [node.nodeType === Node.TEXT_NODE && !(node.parentNode instanceof SVGElement) ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
    }, this));
};

Saya harap ini membantu.

ncoquelet picture ncoquelet pada 6 Agu 2015
❤2

perbaiki masalah firefox saya, berfungsi juga di ff :-)

ncoquelet picture ncoquelet pada 6 Agu 2015

Lebih jelas!
Saya juga memeriksa apakah itu berfungsi dengan baik di ff.
Saya menggabungkan perbaikan Anda dan permintaan tarik telah diperbarui. Terima kasih :)

hyojin picture hyojin pada 12 Agu 2015
👍1

@hyojin @ncoquelet terima kasih atas penyelidikannya dan perbaikannya. Saya mengalami masalah yang sama beberapa hari yang lalu dan saya tidak sepenuhnya yakin apa yang menyebabkannya.

berendberendsen picture berendberendsen pada 17 Jul 2016
😄1

Saya tidak yakin di mana saya menjadi bingung di sini, tetapi saya mendapatkan pengecualian karena "Error Referensi Tidak Tertangkap: NodeParser tidak ditentukan"

Suchetana10 picture Suchetana10 pada 2 Agu 2016

@Suchetana10 Kapan Anda mendapatkan pengecualian? dalam memuat skrip?

hyojin picture hyojin pada 5 Agu 2016

@hyojin terima kasih.. bekerja untuk saya

vishwasvadavi picture vishwasvadavi pada 25 Okt 2016

@hyojin terima kasih! bekerja dengan sempurna untuk saya juga

nugen picture nugen pada 13 Feb 2017

happyvishwasvadavi ugnugen Saya senang mendengarnya! :)

hyojin picture hyojin pada 14 Feb 2017

Beberapa orang masih memiliki masalah dengan elemen teks, saya mengubah masalah ini dibuka dan saya akan mengirim PR lagi.

hyojin picture hyojin pada 14 Feb 2017

image

seemasingh123 picture seemasingh123 pada 25 Feb 2017

Adakah yang punya build perpustakaan dengan perbaikan ini di dalamnya yang bisa saya uji? Melihat masalah yang sama di halaman grafik tinggi..

theinventor picture theinventor pada 24 Mar 2017

Apakah build ini tersedia dengan perbaikan? Saya masih menghadapi masalah ini dengan grafik tinggi.

Nywlem11 picture Nywlem11 pada 2 Agu 2017

Apakah perbaikan ini tersedia di build atau kita harus membuat override ?

sgsmittal picture sgsmittal pada 12 Okt 2017

Apakah ini masih menjadi masalah dengan v1.0.0 ? Jika demikian, dapatkah Anda membagikan contoh di jsfiddle .

niklasvh picture niklasvh pada 12 Des 2017

Masalah ini telah ditutup secara otomatis karena belum ada tanggapan atas permintaan kami untuk informasi lebih lanjut dari penulis asli. Dengan hanya informasi yang sedang dalam masalah, kami tidak memiliki cukup informasi untuk mengambil tindakan. Harap hubungi jika Anda memiliki atau menemukan jawaban yang kami butuhkan sehingga kami dapat menyelidiki lebih lanjut.

no-response[bot] picture no-response[bot] pada 12 Des 2017

Dear @niklasvh ,

Terima kasih untuk perpustakaan yang luar biasa ini. Saya dapat mereproduksi masalah ini dengan versi terbaru - v1.0.0-rc.3

Saya telah membuat contoh pada CodePen di sini (khusus Chrome) di mana Anda akan melihat bahwa beberapa simpul teks (dalam judul Grafik) diduplikasi.

Langkah-langkah untuk mereproduksi -

  1. Silakan buka tautan CodePen - https://codepen.io/karannagupta/pen/RXpddB hanya di Chrome
  2. Klik tombol Salin ke Papan Klip
  3. Tunggu hingga animasi selesai (atau lihat konsol untuk pesan yang disalin)
  4. Tempel grafik di cat atau dokumen (ctrl + v)

Judul grafik ditambahkan pada Baris #193

@hyojin , maukah Anda membuka masalah ini lagi?

Salam,
Karan


text-duplication
karannagupta picture karannagupta pada 10 Sep 2019

Hai @karannagupta
Bisakah Anda mencoba cabang saya untuk memeriksa apakah itu berasal dari alasan yang sama?

hyojin picture hyojin pada 11 Sep 2019

Hai @hyojin

Dengan versi perpustakaan Anda (v0.5.0-alpha2) itu tidak berfungsi. Anda dapat menguji perpustakaan Anda

Juga, saya ingin menggunakan html2canvas versi terbaru. Saya juga tidak perlu menggunakan html2canvas.svg.

Salam,
Karan

karannagupta picture karannagupta pada 11 Sep 2019

Ternyata ini adalah masalah dengan font Unicode

image

karannagupta picture karannagupta pada 11 Sep 2019
Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

wbarrantes picture wbarrantes  ·  3Komentar
celik75 picture celik75  ·  4Komentar
AlphaDu picture AlphaDu  ·  4Komentar
anthonymejia picture anthonymejia  ·  4Komentar
bishwapoudel picture bishwapoudel  ·  4Komentar