Html2canvas: Mengekspor menggunakan Leaflet

Berikan contoh masalah menggunakan http://jsfiddle.net

Saya menambahkan jsfiddle. https://jsfiddle.net/japiasente/7ybndo5L/

Dibutuhkan beberapa peretasan jelek untuk membuatnya berfungsi. Berikut ini contoh sederhana tanpa perbaikan apa pun:

http://jsfiddle.net/djwbra47/

Ada beberapa masalah:

1. Penanda melingkar akan dipotong menjadi seperempat lingkaran. Sepertinya html2canvas memotong elemen SEBELUM transformasi diterapkan. Penanda akan dipusatkan pada 0,0 tanpa transformasi apa pun, sehingga terpotong menjadi seperempat lingkaran yang akan terlihat pada posisi itu. Kemudian setelah itu html2canvas mengubahnya ke lokasi sebenarnya. Saya memperbaikinya dengan mengatur margin kiri dan atas ke 0 alih-alih negatif (sehingga seluruh penanda akan terlihat pada 0,0), kemudian menyesuaikan transformasi dengan jumlah yang sama. (Dan kemudian ubah nilai-nilai itu kembali setelah kanvas diambil, tentu saja.)
2. Garis muncul di tempat yang salah. Sepertinya html2canvas menerapkan transformasi pada jalur SVG DUA KALI. Tanpa perbaikan, garis muncul terlalu jauh ke kiri atas. Jika Anda mengubah transformasinya menjadi 0, itu menunjukkan jarak yang sama terlalu jauh ke kanan bawah. Saya harus mengatur transformasi ke setengah dari nilai asli untuk membuatnya berfungsi.
3. Saat Anda menggeser peta, ubin terpotong ke tingkat aslinya. Ini adalah masalah yang sama dengan nomor 1: Leaflet menggeser peta dengan mengubah panel peta, dan html2canvas memotong ubin sebelum transformasi itu diterapkan. Untuk memperbaikinya, tambahkan nilai transformasi X dan Y ke nilai kiri dan atas setiap img, lalu atur transformasinya ke 0.
4. Saat Anda menggeser peta, html2canvas menggambar ubin di atas penanda dan garis sehingga tidak lagi terlihat. Ini diperbaiki ketika Anda membuat perubahan di nomor 3, tetapi saya tidak mengerti mengapa. Mungkin urutan gambar berubah ketika properti elemen diperbarui?

Inilah versi tetapnya:
http://jsfiddle.net/oo2yms1h/

Masih ada satu masalah yang belum saya atasi: ketika Anda menggeser peta sehingga garis berada di dekat tepi kanan, garis itu tidak muncul di kanvas. Tapi saya kira itu hasil lain dari kliping html2canvas sebelum transformasi.

Satu catatan lagi: Penanda selebaran default adalah gambar yang dihosting dari cdn.leaflet.com yang memberikan kesalahan CORS, artinya tidak akan muncul di kanvas. Siapa pun yang menggunakannya dengan html2canvas perlu meng-host ikon itu sendiri, atau beralih ke gaya penanda yang berbeda.

JAPIasente, sepertinya perbaikan saya di nomor 3 dapat disesuaikan untuk menyelesaikan masalah ubin dan panning Anda. Juga, penanda Anda adalah jalur SVG dan tampaknya mengalami masalah transformasi ganda yang sama dengan baris saya di nomor 2, mereka muncul terlalu jauh ke kiri atas. Inilah versi dengan perubahan itu:

https://jsfiddle.net/6tn0zy48/

Semuanya muncul di tempat yang tepat, kecuali penanda terpotong lebih jauh dari bagian bawah peta. Sepertinya itu masalah yang sama yang masih saya kerjakan.

Memperbaiki masalah terakhir yang tersisa tidak sulit, itu hanya masalah mengatur transformasi ke 0 dan menggunakan kiri dan atas sebagai gantinya.

Contoh sederhana saya, diperbarui:
http://jsfiddle.net/oo2yms1h/1/

Dan perbaikan saya yang direvisi untuk peta Anda:
https://jsfiddle.net/6tn0zy48/1/

Saya sedang bekerja di Chrome, dan saya baru menyadari bahwa perbaikan saya tidak berfungsi di Firefox dan IE. Mereka memberikan gaya transformasi sebagai terjemahan alih-alih translate3d, dan kode saya berasumsi itu akan selalu menjadi translate3d. Dan mereka memposisikan ubin menggunakan terjemahan alih-alih kiri dan atas seperti di Chrome. Contoh yang diperbarui ini direvisi untuk ketiga browser. Ubin dan ikon penanda berfungsi di ketiganya, tetapi saya masih tidak dapat menampilkan jalur SVG di Firefox dan IE.

http://jsfiddle.net/oo2yms1h/3/

IE membutuhkan html2canvas.svg sebelum menampilkan garis, dan juga tidak berfungsi saat transformasi atau properti kiri/atas disetel pada lapisan SVG. Contoh ini berfungsi di IE, dan hampir berfungsi di Firefox:

http://jsfiddle.net/oo2yms1h/5/

Untuk menampilkan baris di firefox, Anda juga perlu beralih ke pengkodean base64 dengan membuat perubahan ke html2canvas yang disebutkan di #648:
https://github.com/niklasvh/html2canvas/pull/648/files

Terima kasih atas semua bantuan Anda selama ini. Satu-satunya masalah terakhir sekarang adalah jika saya memiliki overlay svg di atasnya, IE tidak bermain dengan baik dengannya. Peta dan hamparan svg berfungsi dengan baik di chrome. Ada ide?

@CraigVA Anda luar biasa. Saya baru saja menghabiskan dua hari terakhir mencoba memperbaiki masalah ini. Saya berharap saya telah menemukan jsfiddles Anda sebelumnya. Terima kasih!!!

Saya memiliki masalah menggunakan solusi @CraigVA di mana jika saya menggeser peta sama sekali, overlay akan keluar dari tengah ubin.

Untuk mengatasinya, yang saya lakukan hanyalah fungsi redraw() yang mengatur tampilan ke beberapa tempat lain di laut selama beberapa detik dan kemudian mengatur tampilan kembali ke tempatnya. Berfungsi dengan baik.

function redraw() {
    var lat_tmp = map.getCenter().lat;
    var lng_tmp = map.getCenter().lng;
    map.setView([-66.22149259832975, -1.142578125]);
    setTimeout(function () {
        waitForTilesToLoad()
    }, 50000);
    map.setView([lat_tmp, lng_tmp]);
}

Jika ada yang menemukan ini dan memiliki masalah yang sama.

Hai, terima kasih untuk peretasan ini, ini berfungsi dengan baik kecuali untuk lapisan Path dan untuk TileLayers besar.

• Jika bagian dari lapisan Path (poligon/polyline) berada di luar batas peta asli, maka akan terpotong oleh html2canvas saat saya memindahkan peta.
  Saya memperbarui kode Anda di sini http://jsfiddle.net/c8LL4qfo/ dengan polyline yang lebih panjang. Cobalah untuk memindahkan peta, Anda akan melihat bahwa garis terpotong di kanvas.
  Adakah ide tentang cara mengatasi bug ini?

• Poin kedua : jika tileLayers terlalu besar, html2canvas tidak menunggu peta dirender. Bahkan dengan UseCors=true. Apakah ada cara untuk menunggu pemuatan tileLayers? Saya sedang berpikir untuk menggunakan acara memuat, tetapi saya tidak tahu bagaimana saya bisa.

Terima kasih

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

Saya memecahkan masalah ini menggunakan React : komponen leaflet disetel ulang setelah memindahkan peta, dengan tetap mempertahankan pusat terakhir dan tingkat zoom. Tidak ada lagi konflik dengan html2canvas karena peta yang disediakan adalah peta baru.

Ok, saya membuat pembaruan dalam kode jsfiddle di sini: http://jsfiddle.net/2zkLkLxc/
Tidak ada lagi masalah kliping dengan V1.0.0 tetapi kami memiliki masalah kembali dengan kliping ikon (kapan saja) dan kliping ubin saat memindahkan peta.
Saya mencoba menghapus peretasan pada ubin dan itu tidak mengubah apa pun.

Aneh, karena saya telah memperbarui ke v.1.0.0 dalam kode saya dan saya tidak memiliki kliping ikon.

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.

Saya memiliki masalah yang sama, tetapi saya menggunakan Leaflet Map alih-alih Google Map.
Kode di bawah ini

var transform=$(".leaflet-map-pane").css("transform");
jika (mengubah) {
var c = transform.split(",");
var d = parseFloat(c[4]);
var h = parseFloat(c[5]);
$(".leaflet-map-pane").css({
"mengubah": "tidak ada",
"kiri": d,
"atas": h
})
}
html2canvas(document.body).lalu(fungsi(kanvas){
$(".leaflet-map-pane").css({
kiri: 0,
atas: 0,
"mengubah": mengubah
})
} // Di sini digunakan html2canvas 1.0.0-alpha.9

@CraigVA Terima kasih banyak!

Saya memiliki masalah saat ini di stackoverflow mengenai masalah kliping. Saya menggunakan selebaran 1.3.1. Jika seseorang dapat memberi saya beberapa panduan, itu akan sangat dihargai. Masalahnya ada di sini.

@niklasvh Masalahnya masih ada: http://jsfiddle.net/x3jzsg9b/4/

Masalahnya masih ada: https://jsfiddle.net/x512pgjt/269/

@amarandon @bomba1990

Coba hapus bantalan de renderer dari peta Anda. Itu berhasil untuk saya.

map.getRenderer(peta).options.padding = 0;

Ini bekerja indah!

html2canvas(document.querySelector("#mapid"), {
allowTaint: benar,
gunakanCORS: benar
}).lalu(kanvas => {
document.body.appendChild(kanvas)
});