使用html2canvas對有百度地圖的Dom元素處理成圖片的解決
我要評(píng)論問題1：百度地圖應(yīng)用的是瓦片式圖片（地圖是一張張圖片拼出來的），html2canvas 處理時(shí)，遇到非同一域名下的圖片，瀏覽器會(huì)顯示跨域的報(bào)錯(cuò)，也無法用反向代理來解決，因?yàn)橥咂瑘D片的域名不確定，無法指定 proxy_pass
解決：使用百度地圖靜態(tài)圖處理（ http://lbsyun.baidu.com/index.php?title=static ），這時(shí)域名確定了（ http://api.map.baidu.com ），可以用反向代理來解決跨域
<!--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"
>
加載中<span class="dot">...</span>
</div>
</el-image>
<!--nginx-->
location ^~ /baidu-static/ {
add_header 'Access-Control-Allow-Origin' "$http_origin" always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-
Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
proxy_pass http://api.map.baidu.com/;
}
問題2：地圖上的覆蓋物怎么顯示出來呢
解決：看了下百度地圖靜態(tài)圖的 api, 不能很好的支持覆蓋物自定義樣式，最多可以讓你指定一張自定義的圖片（不能是本地圖片）。中間試過很多辦法，覺得可行的是使用 openLayers.Map, 可是代碼改動(dòng)的工作量太大了，果斷放棄了。再后來想到自己用 div 直接模擬好覆蓋物，設(shè)置比靜態(tài)圖層級(jí)高一點(diǎn)就可以解決了。
問題3：用 css 樣式畫了一個(gè)虛線圓，在 html2canvas 處理后的生成的圖，發(fā)現(xiàn)虛線變成了實(shí)線
解決：使用 canvas 來畫圓
問題4：一個(gè) icon 采用絕對定位，在 html2canvas 處理后的生成的圖，發(fā)現(xiàn) icon 沒有顯示
解決：給 icon 設(shè)置 z-index 大于百度靜態(tài)圖層級(jí)（PS: 靜態(tài)圖的樣式也用了絕對定位的情況下）
問題5：在 html2canvas 處理后生成的圖片，有黑色背景色
解決： image/png 改成 image/jpg
try {
html2canvas(sharePage, {
useCORS: true
}).then((canvas) => {
const imgBase64 = canvas.toDataURL('image/jpg')
this.data64 = imgBase64
})
} catch (err) {
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
移動(dòng)端Html5中百度地圖的點(diǎn)擊事件
這篇文章主要介紹了移動(dòng)端Html5中百度地圖的點(diǎn)擊事件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2019-01-31- 這篇文章主要介紹了Html5如何喚起百度地圖App的方法的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-27
HTML5頁面直接調(diào)用百度地圖API獲取當(dāng)前位置直接導(dǎo)航目的地的實(shí)現(xiàn)代碼
這篇文章主要介紹了HTML5頁面直接調(diào)用百度地圖API獲取當(dāng)前位置直接導(dǎo)航目的地的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-03-02- 這篇文章主要為大家詳細(xì)介紹了HTML5地理定位與第三方工具百度地圖的應(yīng)用,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-17
- 用html5的地理定位功能通過手機(jī)定位獲取當(dāng)前位置并在地圖上居中顯示出來，下面是百度地圖API的使用過程，有需要的朋友可以參考下2014-08-22
- 這篇文章主要介紹了html5定位并在百度地圖上顯示的示例,需要的朋友可以參考下2014-04-27
