Html2canvas: Mengembalikan gambar kosong untuk elemen apa pun saat badan dokumen tingginya lebih dari 30.000 piksel.

Dibuat pada 31 Mei 2016  ·  16Komentar  ·  Sumber: niklasvh/html2canvas

Pustaka mengembalikan gambar kosong saat isi dokumen lebih dari 30.000 piksel. Anda akan mencoba untuk menangkap elemen 100 x 100. Tetapi Anda mendapatkan gambar kosong dari elemen tersebut pada tubuh yang tinggi.

Berikut adalah biola yang menunjukkan kesalahan ini.

https://jsfiddle.net/fvo1xh8b/2/

Anda dapat mengubah ukuran tubuh kurang dari 30.000 dan berfungsi dengan baik.

Needs More Information
Sumber
picture charlie-lk

Komentar yang paling membantu

@niklasvh Ini yang sulit tetapi sebenarnya karena keterbatasan ukuran kanvas. Saya kira ini perlu dibuka kembali untuk membahas bagaimana menerapkan perilaku yang benar. Jelas gambar yang dicuci putih bukanlah perilaku yang benar.

  • Default lebar/tinggi maksimum ke persyaratan browser untuk kanvas
  • Bagi dan taklukkan menggunakan beberapa elemen kanvas dan kembalikan array.
  • Lempar kesalahan di konsol yang memberi tahu batasan kanvas dan menyarankan cara untuk menerapkannya.

Dalam kasus saya, saya mengkloning seluruh tubuh dan hanya mengatur max width/height: html2canvas(el, {height: 3000, width: 3000}) .

picture toadkicker pada 10 Okt 2018
👍9 ❤2 🎉2 👎1

Semua 16 komentar

Saya memiliki masalah yang sama persis seperti Anda. Apakah Anda menemukan solusi untuk ini?

Sebastianvarv picture Sebastianvarv pada 15 Feb 2017

http://stackoverflow.com/questions/37520013/html2canvas-returns-invalid-image-when-the-body-height-is-more-than-30000-pixels

charlie-lk picture charlie-lk pada 15 Feb 2017

emm, saya mendapat masalah yang sama, tetapi akhirnya, saya tahu!
dalam kasus saya, inilah solusi saya:
letakkan iframe di elemen tubuh Anda, seperti

<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>

dan setiap elemen yang Anda perlukan untuk disembunyikan ke kanvas, Anda dapat menyalin dan meletakkannya di iframe ini, dan menggunakan html2canvas, lalu menghapusnya, seperti ini

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);
netweng picture netweng pada 25 Okt 2017

Apakah ini masih menjadi masalah dengan v1.0.0 ? Jika demikian, bisakah 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

hai ketika saya mencoba menyaring iframe dengan kamera ip internal, itu mengembalikan gambar kosong, tolong bisakah Anda membantu saya?

AntonioDilorenzo picture AntonioDilorenzo pada 21 Agu 2018

@niklasvh Ini yang sulit tetapi sebenarnya karena keterbatasan ukuran kanvas. Saya kira ini perlu dibuka kembali untuk membahas bagaimana menerapkan perilaku yang benar. Jelas gambar yang dicuci putih bukanlah perilaku yang benar.

  • Default lebar/tinggi maksimum ke persyaratan browser untuk kanvas
  • Bagi dan taklukkan menggunakan beberapa elemen kanvas dan kembalikan array.
  • Lempar kesalahan di konsol yang memberi tahu batasan kanvas dan menyarankan cara untuk menerapkannya.

Dalam kasus saya, saya mengkloning seluruh tubuh dan hanya mengatur max width/height: html2canvas(el, {height: 3000, width: 3000}) .

toadkicker picture toadkicker pada 10 Okt 2018
👍9 ❤2 🎉2 👎1

@toadkicker saudara, Anda menyimpan kode / pekerjaan saya hari ini hahahahahahahaht terima kasih banyak

leandrosouza0786 picture leandrosouza0786 pada 26 Sep 2019

@toadkicker Terima kasih!

Liberateur picture Liberateur pada 24 Des 2019

emm, saya mendapat masalah yang sama, tetapi akhirnya, saya tahu!
dalam kasus saya, inilah solusi saya:
letakkan iframe di elemen tubuh Anda, seperti

<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>

dan setiap elemen yang Anda perlukan untuk disembunyikan ke kanvas, Anda dapat menyalin dan meletakkannya di iframe ini, dan menggunakan html2canvas, lalu menghapusnya, seperti ini

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);

Saya mencoba metode ini, tetapi tidak bekerja dengan tepat. Dalam cara saya, akan bekerja dengan kode di bawah ini:

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

Dan jika Anda ingin menerapkan gaya css Anda sama seperti di dokumen saat ini, Anda juga perlu menyalin gaya ke iframe:

// add style
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'your_style_file_url.css';
canvas_handler.contentDocument.head.appendChild(link);

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});
ricosmall picture ricosmall pada 16 Mar 2020

Sekali lagi ini adalah batasan di browser itu sendiri dan perpustakaan ini tidak menangani kesalahan dengan benar. Tidak ada solusi pengkodean selain membatasi jumlah piksel yang ditangkap yang akan mengubahnya.

toadkicker picture toadkicker pada 16 Mar 2020

emm, saya mendapat masalah yang sama, tetapi akhirnya, saya tahu!
dalam kasus saya, inilah solusi saya:
letakkan iframe di elemen tubuh Anda, seperti

<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>

dan setiap elemen yang Anda perlukan untuk disembunyikan ke kanvas, Anda dapat menyalin dan meletakkannya di iframe ini, dan menggunakan html2canvas, lalu menghapusnya, seperti ini

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);

Saya mencoba metode ini, tetapi tidak bekerja dengan tepat. Dalam cara saya, akan bekerja dengan kode di bawah ini:

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

Dan jika Anda ingin menerapkan gaya css Anda sama seperti di dokumen saat ini, Anda juga perlu menyalin gaya ke iframe:

// add style
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'your_style_file_url.css';
canvas_handler.contentDocument.head.appendChild(link);

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

dalam kasus saya, semua elemen adalah svg atau gaya sebaris, jadi saya tidak perlu menambahkan stylesheet. tapi ya, Anda harus menambahkan stylesheet Anda jika diperlukan

netweng picture netweng pada 30 Mar 2020

Saya pernah menghadapi masalah yang sama. Saya perlu membuat gambar dari jendela modal (dengan posisi tetap). Saya selalu menerima gambar putih. Masalahnya ada di posisi gulir. Kode ini berfungsi untuk saya:

const el = document.getElementById('html-to-canvas-area')
const area = el.getBoundingClientRect()
html2canvas(el, {
  scrollX: 0,
  scrollY: 0,
  width: area.width,
  height: area.height
})
invisor picture invisor pada 24 Sep 2020
🎉5 👍3 ❤1

Bekerja untuk saya seperti pesona! Terima kasih atas solusi cerdasnya!

flaviostutz picture flaviostutz pada 30 Sep 2020

@invisor penyelamat! Itulah satu-satunya hal yang berhasil untuk saya.

MEGApixel23 picture MEGApixel23 pada 26 Okt 2020

Opsi ini mungkin juga merupakan solusi untuk menggulir kasus terkait

{
  scrollX: 0,
  scrollY: -window.scrollY
}
seahindeniz picture seahindeniz pada 9 Nov 2020
❤2 🎉1
Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

celik75 picture celik75  ·  4Komentar
anthonymejia picture anthonymejia  ·  4Komentar
AlphaDu picture AlphaDu  ·  4Komentar
tjchambers32 picture tjchambers32  ·  3Komentar
diego-rey picture diego-rey  ·  3Komentar