Html2canvas: Tidak merender elemen shadow dom

Anda mungkin perlu melihat ke pengurai simpul (https://github.com/niklasvh/html2canvas/blob/master/src/nodeparser.js) dan memeriksa apakah sebuah simpul memiliki DOM bayangan sebelum mengantre untuk merendernya.

Di Sini?

negatifZindex.concat(nonInlineNonPositionedDescendants).concat(nonPositionedFloats)
.concat(inFlow).concat(stackLevel0).concat(teks).concat(positiveZindex).forEach(fungsi(wadah) {
this.renderQueue.push(wadah);
if (isStackingContext(wadah)) {
this.parse(wadah);
this.renderQueue.push(ClearTransform baru());
}
}, ini);

Bisakah Anda memberi saya petunjuk tentang langkah selanjutnya? :)

Anda harus memesan node di sana dengan benar untuk rendering (untuk informasi lebih lanjut lihat http://www.w3.org/TR/CSS21/visuren.html#z-index), tetapi sebelum itu Anda harus ambil node shadow dom untuk setiap tumpukan konteks.

@fernandezpaco apakah Anda sudah

@niklasvh Apakah ada yang memperbaiki masalah ini? Saya tertarik menggunakan perpustakaan, tetapi saya menggunakan Polimer dan ShadowDOM dan itu tidak berfungsi untuk saya.

var node = parentContainer.node; if(node.shadowRoot !== null){parentContainer.node = node.shadowRoot.querySelector('div');

Baris di atas dalam NodeParser.prototype.getChildren memang membuat elemen shadowDOM

@niklasvh dapatkah Anda mengonfirmasi apakah ini pendekatan yang benar?

Sayangnya ini juga gagal karena cara html2canvas menandai node yang akan dirender dan kemudian mengkloning seluruh dokumen dan ketidakmampuan untuk menembus shadow-dom menggunakan querySelector .

Bahkan ketika menandai node hingga root dokumen, penandaan tampaknya hilang setelah dom bayangan pertama selama kloning. Tidak yakin apa yang terjadi di sana.

@niklasvh dapatkah Anda membagikan tautan (https://github.com/niklasvh/html2canvas/blob/master/src/nodeparser.js) lagi, itu menunjukkan 404.

@niklasvh : Kami menghadapi masalah yang sama (tidak dapat merender SHADOW-DOM), beri tahu kami jika ada yang mengerjakannya.

@srajabhoj Mengikuti penulisan ulang versi 1.0.0, mungkin https://github.com/niklasvh/html2canvas/blob/master/src/NodeParser.js

hai ada yang punya solusi untuk ini, saya juga menghadapi untuk mengambil gambar div yang memiliki gulir, tolong sarankan cara, petunjuk apa pun akan membantu

Solusi saya adalah mengkloning konten dan css yang Anda inginkan untuk membuat HTMLElement , lalu menambahkannya ke document.body . Setel gaya filter:opacity(0) karena html2canvas tidak mendukung ini tetapi didukung di browser modern. Hapus setelah render.

Namun, sangat sulit dilakukan jika Anda menyertakan banyak elemen shadow-dom dalam konten yang ingin Anda render. Masih tidak tahu tentang itu.

Ini kode saya di Angular

const newRef = this.renderRef.nativeElement.cloneNode(true);
this.renderer.setStyle(newRef, 'filter', 'opacity(0)');
this.renderer.appendChild(document.body, newRef);
html2canvas(newRef).then(canvas => {
     if (canvas.toBlob) {
          canvas.toBlob(
            blob => {
              fileSaver.saveAs(blob, 'image.jpg');
              this.renderer.removeChild(document.body, newRef);
              alert('Image has been downloaded to your device');
            },
            'image/jpg',
            0.8
          );
     }
});

@Jeffen ini sangat membantu, terima kasih! Juga hal file saver sangat membantu. Kalau-kalau ada yang bertanya-tanya bagaimana cara kerjanya, saya melakukannya seperti ini:

$ npm i file-saver

import * as saveAs from 'file-saver';

saveAs(blob, 'image.jpg');

Apakah ada pembaruan tentang masalah ini?
Atau ada solusi untuk aplikasi yang memiliki shadow dom bersarang?

html2canvas lib perlu diperbarui agar dapat melintasi "pohon komposisi" alih-alih "pohon ringan".

"Pohon tersusun" (atau "pohon datar" di tempat lain) dijelaskan dalam draf ShadowDOM asli (klik tombol "runtuh" ​​di kotak merah untuk tetap berada di halaman itu alih-alih mengarahkan ulang ke halaman baru). Jangan ragu untuk bertanya kepada saya jika Anda tidak terbiasa dengan konsep apa pun.

Jika semua ShadowRoots memiliki mode:'open' , ini seharusnya cukup mudah.

Jika kita ingin mendukung ShadowRoots dengan mode: 'closed' , maka ini akan menjadi lebih rumit dan membutuhkan patching attachShadow untuk melacak referensi ke akar bayangan sehingga kita dapat menelusurinya.

Setelah kita mengetahui cara melintasi "pohon yang tersusun" secara umum, maka kita perlu memperbarui metode DocumentCloner.cloneNode rekursif html2canvas rekursif untuk membuatnya melintasi pohon yang tersusun alih-alih pohon ringan.

Konten slotted bisa lebih sulit untuk ditangani. Anda harus menemukan slot yang sesuai untuk merender konten ke tempat yang benar.

<!--my-component-->
<div><slot name="some-region"></slot></div>
<slot></slot>

<!--my-app-->
<my-component>
  Default Slotted Content
  <button slot="some-region">Button</button>
</my-component>