Html2canvas: Masalah untuk menghasilkan gambar peta (Google Maps)

Masalahnya, google maps menggunakan matriks Transformasi CSS3, yang tidak sepenuhnya diimplementasikan di html2canvas.

bagaimana caranya?

Gambar Google Maps (gambar di server eksternal)?

Gunakan proxy: https://github.com/niklasvh/html2canvas#how -does-it-work

brcontainer: Saya pikir ini ilegal (mengakses petak peta langsung dari komputer lain /proxy/). Satu-satunya cara adalah dengan menggunakan CORS.

@bkralik proxy tidak hanya bagi Anda untuk mengakses "situs yang diblokir", istilah proxy berarti sesuatu yang lain jika proxy untuk html2canvas berfungsi untuk membuat API javascript membuka gambar dari server eksternal seolah-olah berada di situs lokal Anda.

Proxy membuat unduhan server eksternal dan html2canvas memuat gambar hanya setelah unduhan selesai.

Baca http://en.wikipedia.org/wiki/Same_origin_policy ini agar Anda memahami subjeknya.

bagaimana cara menggunakan proksi ini?

Tautan yang Anda habiskan semua tautan ke penggunaan proxy (dalam bahasa php​​, C# (asp.net), python dan VB (asp classic)).

Mungkin Anda belum memperhatikan tautan ke proxy, maka saya akan memberi Anda di sini:
https://github.com/niklasvh/html2canvas/wiki/Proxies

Saat menggunakan perpustakaan baru selalu baik untuk membaca seluruh README.

@brcontainer Saya tahu apa yang dilakukan proxy ini - ketika klien ingin mengambil tangkapan layar halaman, kemudian SERVER mengunduh semua gambar ke folder lokal dan kemudian klien memuatnya. Tapi itu salah - karena google tidak mengizinkan penggunaan langsung dari server ubin mereka - dan dari sudut pandang mereka, seseorang tiba-tiba mengunduh banyak ubin ke server tanpa melihat halaman web ...

saya menggunakan Jawa.
Anda memiliki contoh untuk menggunakan proxy?

@brcontainer Dan seperti yang saya sebutkan, benar-benar ada masalah dengan transformasi CSS3, karena googlemaps yang berjalan di Google Chrome menggunakannya, jadi peta tidak dapat disaring dengan implementasi saat ini. Percayalah, saya punya masalah ini dalam proyek yang saya tulis ...

@bkralik Jadi, bagaimana saya bisa melakukannya?
apakah kamu punya contoh?

Saya juga memprogram di java (saya sudah membuat proxy di PHP, C # dan VB), tetapi saya tidak tepat waktu untuk membuat proxy di Java, mungkin saya bisa melakukannya pada hari Minggu.

Aplikasinya JSP atau "Java Desktop"?

@brcontainer Ini adalah aplikasi web, menggunakan JSF, Primefaces, Javascript, dan Java

Kerangka kerja

[diedit]
Tentang dukungan transformasi css, baca: https://github.com/niklasvh/html2canvas#contributing

@DanielSBelo apakah Anda menemukan solusi yang bagus untuk ini? Saya mempunyai masalah yang sama.

Menyimpan peta sebagai kanvas berfungsi dengan baik di Firefox, tetapi gagal menyimpan peta di Chrome. Saya tidak berpikir itu terkait langsung dengan transformasi, tetapi lebih mungkin cara Chrome menangani COR. Aku benar-benar terjebak mencoba untuk menemukan jawaban, meskipun.

@TGOlson Ini benar-benar masalah dengan transformasi CSS3, karena rilis html2canvas saat ini hanya dapat membuat "satu tingkat" transformasi - itu tidak menumpuknya.
Anda dapat memverifikasi bahwa masalah dalam transformasi hanya dengan bermain dengan peta google - biasanya, tangkapan layar seperti ini diberikan:

(Dalam css, seluruh peta diposisikan dengan benar tetapi setelah menonaktifkan css3, ini terjadi)
Satu-satunya solusi adalah mengimplementasikan seluruh tumpukan transformasi css3. Saya tidak tahu, apakah itu sedang dalam proses oleh Niklas, tetapi seseorang harus melakukannya :-)

berlangganan

Saya juga mengalami masalah yang sama - hanya di Chrome. Saya menggunakan html2canvas-proxy-php. Browser lain berfungsi dengan baik. Bagian dari peta hilang begitu saja.. tampaknya terkait dengan mengubah ukuran peta, menambah/menghapus overlay, dll

FYI - jika Anda perlu mengaktifkan dan menjalankan fungsi pengambilan peta dengan cepat, Anda selalu dapat menggunakan google streetview atau static maps API. Pada dasarnya, buat ulang apa yang dilihat pengguna saat ini di peta ( map.getPov , dll.) lalu dapatkan gambar statis itu dari google.

Saya tidak berpikir pendekatan itu bekerja dengan overlay

Saya baru saja menemukan masalah ini. Jika saya tidak salah, pertanyaan stackoverflow ini menunjukkan masalah ini dan saya telah menawarkan solusi dengan membaca transformasi css3 dan menerapkannya sebagai posisi CSS normal.

var transform=$(".gm-style>div:first>div").css("transform")
var comp=transform.split(",") //split up the transform matrix
var mapleft=parseFloat(comp[4]) //get left value
var maptop=parseFloat(comp[5])  //get top value
$(".gm-style>div:first>div").css({ //get the map container. not sure if stable
  "transform":"none",
  "left":mapleft,
  "top":maptop,
})

Mungkin, transformasi css3 dapat diperiksa dan secara otomatis dikonversi ke posisi CSS normal saat merender kemudian menghapusnya setelah render.

saya memiliki fungsi tangkapan layar yang tidak konstan.
Bekerja setelah memuat ulang halaman secara penuh (menggunakan CTLR+R di firefox)

di sini adalah kode saya, yang pada dasarnya dilakukannya adalah menghasilkan gambar 64 basis/png dari layar yang diambil dari jendela dan hasil akhir yang saya masukkan ke dalam tag untuk melihat apakah itu berfungsi.

Berikut adalah fungsinya

fungsi ebfPrintScreen(nama komponen)
{
html2cavnas
([document.body],
{
pencatatan: benar,
gunakanCORS: benar,
dirender: fungsi (kanvas)
{
img = kanvas.toDataURL("gambar/jpg");

                                                  console.log(img.length);
                                                  console.log(img);

                                                  var imgComp = $c(conponentName);
                                                  imgComp.img.src = img

                                          }
                      }
                );

}

Tujuan utamanya adalah untuk menangkap rute peta google setelah dibuat, tetapi seperti yang saya katakan, kadang berhasil, kadang tidak. Ada petunjuk tentang apa yang sedang terjadi?

Saya mengalami masalah yang sama. Saya pergi untuk mengambil gambar peta setelah melakukan zoom dan panning di sekitar dan bagian yang lebih besar, bahkan semua peta, tiba-tiba diselimuti warna coklat muda. Jika ada yang memiliki perbaikan untuk ini di Chrome, beri tahu saya.

mencoba solusi @mfirdaus , dan berfungsi untuk tampilan peta noraml, namun, di streetview, masih rusak ... ada yang punya masalah yang sama?

Setelah menerapkan solusi @mfirdaus , saya bisa mendapatkan tampilan peta yang ditangkap. Tapi entah bagaimana kode di bawah ini membuat peta tidak dapat digunakan (tetapi html2canvas dapat digunakan):

$(".gm-style>div:first>div").css({ //get the map container. not sure if stable
      "transform":"none",
      "left":mapleft,
      "top":maptop,
    })

Apakah ada cara untuk "mengembalikan" apa yang dilakukan baris itu? Untuk saat ini saya memanggil fungsi initMap lagi agar peta berfungsi setelah memanggil fungsi html2canvas dengan kode transformasi.

Apakah skrip di atas berfungsi untuk Google Maps v3?

Persyaratan saya adalah mengambil tangkapan layar dari Google Map v3 dengan rute yang digambar di atasnya.

Ini berfungsi dengan baik di Firefox, tetapi di Chrome tidak ada penanda atau rute. Saya sudah menggunakan spidol khusus.

Saya mengalami kesulitan men-debug karena tidak ada kesalahan di konsol dan logging sangat terbatas.

Adakah yang memecahkan masalah di Chrome? Saya telah mencoba skrip proxy dalam dua bahasa, tetapi sepertinya tidak ada bedanya.

Saya memiliki masalah serupa, saya menyalin/memotong kode ini dari internet:

  if($.browser.safari) {// Fix for Chrome
    var transform=$(".gm-style>div:first>div").css("transform");
    var comp=transform.split(","); //split up the transform matrix
    var mapleft=parseFloat(comp[4]); //get left value
    var maptop=parseFloat(comp[5]);  //get top value
    $(".gm-style>div:first>div").css({ //get the map container. not sure if stable
      "transform":"none",
      "left":mapleft,
      "top":maptop,
    });
  }

  html2canvas([$("#map")[0]], {
    logging: false,
    useCORS: true,
    onrendered: function (canvas) {
      $('#screenshot').after(canvas);

      if($.browser.safari) {// Fix for Chrome
        $(".gm-style>div:first>div").css({
          left:0,
          top:0,
          "transform":transform
        });
      }
    }
  });

Ini berfungsi tetapi jika saya memindahkan peta dengan pawang itu tidak berfungsi. Saya bekerja dengan spidol, poligon, dll. Ini juga berfungsi di firefox (saya dapat memindahkan peta) tetapi tidak di chrome.

Ada ide ?

Tetap !

Perbaikan untuk chrome yang saya salin/tempel dengan bodoh tidak dipicu.

Saya melakukan ini:

  if(window.chrome) {// Fix for Chrome
    var transform=$(".gm-style>div:first>div").css("transform");
    var comp=transform.split(","); //split up the transform matrix
    var mapleft=parseFloat(comp[4]); //get left value
    var maptop=parseFloat(comp[5]);  //get top value
    $(".gm-style>div:first>div").css({ //get the map container. not sure if stable
      "transform":"none",
      "left":mapleft,
      "top":maptop,
    });
  }

  html2canvas([$("#map > div.g-map-canvas > div > div > div:nth-child(1)")[0]], {
    logging: false,
    useCORS: true,
    onrendered: function (canvas) {
      $('#screenshot').after(canvas);

      if(window.chrome) {// Fix for Chrome
        $(".gm-style>div:first>div").css({
          left:0,
          top:0,
          "transform":transform
        });
      }
    }
  });

Selektor yang sangat panjang di html2canvas adalah untuk memiliki peta tanpa tombol dan opsi.

Saya bekerja sekarang, terima kasih.

Terima kasih @GCorbel Ini bekerja sangat baik dengan solusi Anda.

Solusi di atas berfungsi untuk merender peta tetapi kontrol teratas tidak ada atau berada di posisi yang salah. Ada ide?

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

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.

@niklasvh Saya dapat mengonfirmasi bahwa ini masih menjadi masalah dengan versi terbaru. Ini adalah biola yang saya buat saat menguji masalah ini: http://jsfiddle.net/9agom947/4/

Biola menunjukkan masalah seperti yang dijelaskan dalam pertanyaan stackoverflow tertaut, belum tentu apa yang ada di OP utas ini. Jika Anda tidak menggeser peta, tidak ada masalah untuk membuat peta disalin. Setelah Anda menggeser peta, di Chrome tetapi tidak di FireFox, peta yang disalin akan kosong di luar wilayah yang awalnya dimuat.

Perbaikan yang diberikan di utas ini tampaknya menyelesaikan masalah.

@Ananda-Pryana Saya sudah mencoba jsFiddle Anda namun perbaikannya sepertinya tidak berfungsi lagi. Apakah ada solusi lain ?

Terima kasih sebelumnya.

Sepertinya versi terbaru dari google map (v3.32) yang dirilis baru-baru ini memiliki renderer eksperimental baru.
https://developers.google.com/maps/documentation/javascript/releases

Ini telah merusak perbaikannya. Saya hanya melakukan pengujian cepat, tetapi sepertinya sekarang semuanya rusak secara merata di semua browser (bukan hanya untuk Chrome), jadi semoga itu akan mempermudah perbaikan di versi html2canvas berikutnya?

Tetapi solusi cepat adalah menggunakan versi gmap yang lebih lama, di mana perbaikannya masih berfungsi dengan baik.

@Ananda-Pryana Yup saya downgrade gmap, berhasil, terima kasih.

Terima kasih @Ananda-Pryana! Saya memiliki ini bekerja minggu lalu kemudian memindahkannya ke platform baru dan saya pikir langkah itu yang merusaknya. Saya benar-benar masuk ke lubang tikus dengan asumsi lingkungan baru adalah pelakunya. Saya menurunkan versi ke 3.30 dan semuanya baik-baik saja.

Tampaknya di versi baru google maps transform diterapkan ke div yang berbeda. Menggunakan solusi @GCorbel tetapi dengan pemilih ini (".gm-style>div:first>div:first>div:last>div") tampaknya berfungsi. Meskipun saya belum mengujinya secara menyeluruh.

@rSensation tip bekerja seperti pesona di versi terbaru. Terima kasih!

Hmm sepertinya masalah ini kembali untuk saya, saya harus menggeser peta untuk melihat masalahnya dan ketika saya menggeser dan menggunakan Html2Canvas untuk mendapatkan tangkapan layar, beberapa area ditampilkan sebagai abu-abu kosong?

Untuk siapa pun dari Anda yang berurusan dengan pemotongan lapisan overlay --
Pemilih @GCorbel hanya mengubah lapisan peta google. Jika Anda memiliki overlay lain, Anda harus menemukan div mana mereka berada (misalnya, $('.gm-style>div:first>div:first>div:first>div:first>div') adalah salah satu div overlay saya dan menerapkan transformasi yang sama ke css.

@mylesboone bagaimana Anda menemukan div mana lapisan overlay? Saat ini saya sedang berjuang melalui masalah yang sama dari lapisan overlay yang terputus.

Saya menggunakan GmapMarker dan GmapPolyline sebagai lapisan overlay saat ini.

@sunghunOW
Solusi dapat ditemukan di sini https://github.com/niklasvh/html2canvas/issues/1568
Anda dapat menggunakan alat inspeksi browser Anda untuk melihat div mana yang perlu diubah.

Solusi terbaik yang saya temukan:

    html2canvas($('.gm-style>div:eq(0)')[0],{
        useCORS: true,
        allowTaint: true,
        async:false,
    }).then(canvas => {document.body.appendChild(canvas)});

    html2canvas($('.gm-style>div:eq(0)')[0],{
        useCORS: true,
        allowTaint: true,
        async:false,
    }).then(canvas => {document.body.appendChild(canvas)});

Ini memberi saya kanvas tidak ditentukan .. Haruskah pemilih item keluar dari kotak?

@hseeda Terima kasih! Pemilih Anda melakukan trik untuk saya!

Inilah pemilih saya yang sedikit dimodifikasi yang berfungsi (setidaknya untuk saya, haha)

const div = document.querySelector('#map > div:first-of-type')

html2canvas(div, {})

Namun, sekarang memotong Logo Google yang selalu harus ditampilkan untuk mematuhi syarat dan ketentuan :(

Yah, aku hanya akan mengkloning node atau sesuatu. Saya sudah bertarung dengan peta ini untuk sementara waktu sekarang: D

Ini bekerja untuk saya:

$('#snapshot').on('click',function () {
    html2canvas(document.querySelector('.gm-style'), 
           {useCORS:true, allowTaint: true,async:false} ).then(canvas => {
            document.body.appendChild(canvas)
    });
});

Masalah dengan peta kosong atau kesalahan menghasilkan kanvas itu rumit, tetapi akhirnya yang memperbaikinya bagi saya adalah menambahkan konfigurasi ini:

ignoreElements: (node) => {
        return node.nodeName === 'IFRAME';
      }

html2canvas(mapWrapper, {
      useCORS: true,
      allowTaint: false,
      ignoreElements: (node) => {
        return node.nodeName === 'IFRAME';
      }
    }).then(canvas => {
      const url = canvas.toDataURL('image/png');
      saveAs(url, 'image3.png');
      window.URL.revokeObjectURL(url);
    });

Terima kasih kepada @imlinus dan @hseeda ! Pemilih ini bekerja dengan sempurna untuk saya! dan bahkan menyimpan logo google, terima kasih!

@hseeda Terima kasih! Pemilih Anda melakukan trik untuk saya!

Inilah pemilih saya yang sedikit dimodifikasi yang berfungsi (setidaknya untuk saya, haha)

const div = document.querySelector('#map > div:first-of-type')

html2canvas(div, {})

Namun, sekarang memotong Logo Google yang selalu harus ditampilkan untuk mematuhi syarat dan ketentuan :(

Yah, aku hanya akan mengkloning node atau sesuatu. Saya sudah bertarung dengan peta ini untuk sementara waktu sekarang: D