主頁(yè) > 知識(shí)庫(kù) > 使用html2canvas對(duì)有百度地圖的Dom元素處理成圖片的解決

使用html2canvas對(duì)有百度地圖的Dom元素處理成圖片的解決

熱門(mén)標(biāo)簽:長(zhǎng)春極信防封電銷(xiāo)卡公司 重慶人工智能電銷(xiāo)機(jī)器人報(bào)價(jià) 智能電銷(xiāo)機(jī)器人廣告語(yǔ) 電銷(xiāo)外呼線路改不外呼線路 crm外呼系統(tǒng)好不好 強(qiáng)訊外呼系統(tǒng) 愛(ài)巢地圖標(biāo)注 電話機(jī)器人批發(fā) 貴陽(yáng)ai外呼系統(tǒng)

問(wèn)題1:百度地圖應(yīng)用的是瓦片式圖片(地圖是一張張圖片拼出來(lái)的),html2canvas 處理時(shí),遇到非同一域名下的圖片,瀏覽器會(huì)顯示跨域的報(bào)錯(cuò),也無(wú)法用反向代理來(lái)解決,因?yàn)橥咂瑘D片的域名不確定,無(wú)法指定 proxy_pass

解決:使用百度地圖靜態(tài)圖處理( http://lbsyun.baidu.com/index.php?title=static ),這時(shí)域名確定了( http://api.map.baidu.com ),可以用反向代理來(lái)解決跨域

<!--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/;
}

問(wèn)題2:地圖上的覆蓋物怎么顯示出來(lái)呢

解決:看了下百度地圖靜態(tài)圖的 api, 不能很好的支持覆蓋物自定義樣式,最多可以讓你指定一張自定義的圖片(不能是本地圖片)。中間試過(guò)很多辦法,覺(jué)得可行的是使用 openLayers.Map, 可是代碼改動(dòng)的工作量太大了,果斷放棄了。再后來(lái)想到自己用 div 直接模擬好覆蓋物,設(shè)置比靜態(tài)圖層級(jí)高一點(diǎn)就可以解決了。

問(wèn)題3:用 css 樣式畫(huà)了一個(gè)虛線圓,在 html2canvas 處理后的生成的圖,發(fā)現(xiàn)虛線變成了實(shí)線

解決:使用 canvas 來(lái)畫(huà)圓

問(wèn)題4:一個(gè) icon 采用絕對(duì)定位,在 html2canvas 處理后的生成的圖,發(fā)現(xiàn) icon 沒(méi)有顯示

解決:給 icon 設(shè)置 z-index 大于百度靜態(tài)圖層級(jí)(PS: 靜態(tài)圖的樣式也用了絕對(duì)定位的情況下)

問(wèn)題5:在 html2canvas 處理后生成的圖片,有黑色背景色

解決: image/png 改成 image/jpg

try {
  html2canvas(sharePage, {
    useCORS: true
  }).then((canvas) => {
    const imgBase64 = canvas.toDataURL('image/jpg')
    this.data64 = imgBase64
    })
  } catch (err) {
}

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

標(biāo)簽:陜西 保定 上海 山南 內(nèi)蒙古 清遠(yuǎn) 廣安 吳忠

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《使用html2canvas對(duì)有百度地圖的Dom元素處理成圖片的解決》,本文關(guān)鍵詞  使用,html2canvas,對(duì),有,百度,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《使用html2canvas對(duì)有百度地圖的Dom元素處理成圖片的解決》相關(guān)的同類(lèi)信息!
  • 本頁(yè)收集關(guān)于使用html2canvas對(duì)有百度地圖的Dom元素處理成圖片的解決的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章