Solusi untuk menggunakan html2canvas untuk memproses elemen dom dengan peta baidu ke dalam gambar

Pertanyaan 1: Baidu Maps menggunakan gambar gaya ubin (peta dijabarkan satu per satu). Ketika html2canvas diproses, ketika menemukan gambar selain nama domain yang sama, browser akan menampilkan kesalahan domain silang, dan tidak dapat diselesaikan dengan proxy terbalik, karena nama domain gambar ubin tidak pasti dan proxy_pass tidak dapat ditentukan

Solusi: Gunakan pemrosesan peta statis peta baidu (http://lbsyun.baidu.com/index.php?title=static), dan nama domain ditentukan (http://api.map.baidu.com), dan proxy terbalik dapat digunakan untuk menyelesaikan silang-domain cross-domain

 <!--html--><el-image:src=`/baidu-static/staticimage/v2?ak=yourak&width=1024&height=400¢er=${center.lng},${center.lat}&zoom=16`><div slot=placeholder class=image-slot> Loading <span class = dot> ... </span> </div> </el-image> <!-nginx-> Lokasi ^~/baidu-static/{add_header 'akses-control-wallow-origin' $ http_origin selalu; add_header 'akses-control-wallow-credentials' alwo '’’ all-control-control-control-control-control-controls; Selalu; add_header 'akses-kontrol-wallow-headers' '' menerima, otorisasi, cache-control, tipe konten, dnt, if-modified-since, Keep-Alive, Origin, User-Agent, X-Rlequested-With 'selalu; proxy_pass http://api.map.baidu.com/;

Pertanyaan 2: Bagaimana menampilkan overlay di peta

Solusi: Setelah melihat API dari peta statis peta baidu, tidak dapat mendukung gaya overlay kustom dengan baik. Paling -paling, Anda dapat menentukan gambar khusus (bukan gambar lokal). Saya mencoba banyak metode di tengah, dan saya pikir layak untuk menggunakan OpenLayers.map, tetapi beban kerja perubahan kode terlalu besar, jadi saya menyerah dengan tegas. Kemudian saya berpikir untuk menggunakan Div untuk secara langsung mensimulasikan penutup, dan mengaturnya sedikit lebih tinggi dari level gambar statis yang dapat menyelesaikannya.

Pertanyaan 3: Saya menggambar lingkaran putus -putus dalam gaya CSS. Angka yang dihasilkan setelah html2canvas diproses dan menemukan bahwa garis putus -putus menjadi garis solid

Solusi: Gunakan kanvas untuk menggambar lingkaran

Pertanyaan 4: Ikon menggunakan penentuan posisi absolut dan grafik yang dihasilkan setelah HTML2Canva diproses, dan ditemukan bahwa ikon tidak ditampilkan.

Solusi: Atur z-index agar ikon lebih besar dari level grafik statis Baidu (PS: ketika gaya grafik statis juga digunakan untuk penentuan posisi absolut)

Pertanyaan 5: Gambar yang dihasilkan setelah html2canvas diproses dengan warna latar belakang hitam

Solusi: Ubah gambar/png menjadi gambar/jpg

 coba {html2canvas (sharepage, {usecors: true}). Kemudian ((canvas) => {const imgbase64 = canvas.todataurl ('gambar/jpg') this.data64 = imgbase64})} catch (err) {}

Di atas adalah semua konten artikel ini. Saya harap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.