Html2canvas: Penataan elemen hanya untuk html2canvas?

Dibuat pada 19 Okt 2015 · 5Komentar · Sumber: niklasvh/html2canvas

Saya menggunakan tag praktis data-html2canvas-ignore pada beberapa elemen, tetapi Firefox memberi saya masalah dengan elemen dengan margin negatif. Saya ingin dapat menambahkan tag gaya khusus html2canvas untuk elemen tertentu, seperti: data-html2canvas-style="margin-left: 0" .

Apakah ada orang lain yang beruntung melakukan hal seperti ini?

Question

Sumber

thesciz

Komentar yang paling membantu

Anda dapat mengubah konten dokumen (yang merupakan tiruan dari dokumen asli) yang akan dirender dengan opsi onclone , misalnya:

html2canvas(document.body, {onclone: function(document) {
  document.querySelector('.something').style.marginLeft = 0;
}}).then(...)

niklasvh pada 19 Okt 2015

👍10 ❤2

Semua 5 komentar

Anda dapat mengubah konten dokumen (yang merupakan tiruan dari dokumen asli) yang akan dirender dengan opsi onclone , misalnya:

html2canvas(document.body, {onclone: function(document) {
  document.querySelector('.something').style.marginLeft = 0;
}}).then(...)

niklasvh pada 19 Okt 2015

👍10 ❤2

Terima kasih Nik! Sangat menghargai pekerjaan Anda di perpustakaan ini. Apakah ini ada dalam dokumentasi?

thesciz pada 20 Okt 2015

Tidak, sayangnya tidak. Dokumentasi sangat kurang dalam banyak hal saat ini ...

niklasvh pada 20 Okt 2015

Gambar yang saya unduh tidak mendapatkan gaya yang tepat, jadi saya menggunakan gaya komputasi-ke-sebaris untuk merendernya dengan benar dengan mengubah semua gaya menjadi css sebaris. Tapi masalahnya adalah itu mempengaruhi dom asli. Jadi saya ingin melakukannya untuk elemen kloning, bukan di dalam fungsi onclone, tetapi tidak berfungsi dan gambar tidak ditata dengan benar. Tahu mengapa itu terjadi?

saksham-sg01 pada 10 Mei 2019

Saya mencoba melakukan hal yang sama, berikut adalah cara saya menerapkannya dan semua gaya saya diunduh dengan benar:

const computedStyleToInlineStyle = require("computed-style-to-inline-style");

 html2canvas(document.querySelector(".someclass"), {onclone: function(document) {
     computedStyleToInlineStyle(document.querySelector(".someclass"), {
          recursive: true
      });
    }}).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        ...
    });