Html2canvas: ambil screenshot peta google menggunakan javascript

Dibuat pada 13 Des 2014 · 7Komentar · Sumber: niklasvh/html2canvas

Hai

Saya mencoba kode berikut: div ini "# map-canvas" isi peta google.
$ ('# map-canvas'). html2canvas ({
onrendered: function (canvas) {
var img = canvas.toDataURL ("image / png");
window.open (img);
}
});
}

Menggunakan kode ini saya mendapatkan peta kosong.
Silakan cari keluaran peta Google.

Beri tahu saya cara mengatasi masalah ini.

googlemapimageusinghtml2canvas

Question

Sumber

hardikshah157

👍2

Komentar yang paling membantu

Meneruskan useCORS: true dalam opsi memperbaiki masalah untuk saya. Juga, allowTaint: false . Ini akan membantu jika Anda menjalankan fungsi setelah semua ubin terlihat, Anda dapat mendengarkan tilesloaded dan mengeksekusi html2canvas setelah itu terjadi.

orloxx pada 2 Mar 2017

❤2 🎉2 👍1

Semua 7 komentar

Anda tidak dapat merender gambar (dalam hal ini ubin peta google) yang berada di bawah asal yang berbeda kecuali disajikan dengan header cors . Salah satu cara untuk mengatasinya adalah dengan menggunakan proxy untuk gambar.

niklasvh pada 13 Des 2014

Saya telah mencoba dengan server proxy php tetapi menghadapi kesalahan: "Tidak tertangkap
SecurityError: Gagal mengeksekusi 'toDataURL' pada 'HTMLCanvasElement':
Kanvas tercemar tidak boleh diekspor. "

Saya telah mencoba server proxy ini:
https://github.com/brcontainer/html2canvas-php-proxy ,
Dengan server proxy di atas saya telah menggunakan arah peta Google:
https://developers.google.com/maps/documentation/javascript/examples/directions-simple

Pada hari Sabtu, 13 Desember 2014 pukul 23:11, Niklas von Hertzen <
[email protected]> menulis:

Anda tidak dapat membuat gambar (ubin peta google dalam hal ini) yang berada di bawah
berbeda asal kecuali mereka disajikan dengan cors header
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS.
Salah satu cara untuk mengatasinya adalah dengan menggunakan proxy untuk gambar.
-
Balas email ini secara langsung atau lihat di GitHub
https://github.com/niklasvh/html2canvas/issues/485#issuecomment -66884354
.

_HARDIK SHAH_

hardikshah157 pada 14 Des 2014

Saya menghadapi masalah yang sama. Apakah Anda menemukan solusi untuk ini? Saya ingin mendapatkan tangkapan layar untuk peta google menggunakan html2canvas. Hargai balasan Anda.

tarekahf pada 25 Nov 2016

👍1

Menabrak. Ada Pembaruan?

smittysmee pada 28 Feb 2017

orloxx pada 2 Mar 2017

❤2 🎉2 👍1

Saya menghadapi masalah yang sama. Saya mencoba menggunakan useCORS: true dan allowTaint: false di Opsi Peta tetapi itu tidak membantu. Saya mencoba untuk mendapatkan tangkapan layar hanya setelah halaman dimuat. Apakah saya melewatkan sesuatu?

NikhilDole pada 30 Jul 2019

Saya mendapatkan masalah juga saat mengambil tangkapan layar dari Google Maps, saya mendapatkan kesalahan ini:
ERROR Error: Uncaught (in promise): InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0. Error: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0. at CanvasRenderer.<anonymous> (html2canvas.js:6289) at step (html2canvas.js:83) at Object.next (html2canvas.js:64) at fulfilled (html2canvas.js:54) at ZoneDelegate.invoke (zone-evergreen.js:365) at Object.onInvoke (core.js:39698) at ZoneDelegate.invoke (zone-evergreen.js:364) at Zone.run (zone-evergreen.js:124) at zone-evergreen.js:851 at ZoneDelegate.invokeTask (zone-evergreen.js:400) at resolvePromise (zone-evergreen.js:793) at resolvePromise (zone-evergreen.js:752) at zone-evergreen.js:854 at ZoneDelegate.invokeTask (zone-evergreen.js:400) at Object.onInvokeTask (core.js:39679) at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Zone.runTask (zone-evergreen.js:168) at drainMicroTaskQueue (zone-evergreen.js:570) at invokeTask (zone-evergreen.js:485) at ZoneTask.invoke (zone-evergreen.js:470)

Tolong, ini sangat penting.