html2canvas を使用して、Baidu マップを含む Dom 要素を画像に処理するソリューション

問題 1: Baidu Map はタイル画像 (地図が写真で構成されている) を使用しています。html2canvas を使用して同じドメイン名にない画像を処理すると、ブラウザにクロスドメイン エラーが表示されます。タイル画像のドメイン名が不明で proxy_pass を指定できないため、リバース プロキシを使用しても解決できません。

解決方法：百度地図の静的画像処理（http://lbsyun.baidu.com/index.php?title=static）を使用する。このとき、ドメイン名が決定され（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
  スロット="プレースホルダー"
  クラス="画像スロット"
>
  読み込み中...
</div>
</el-image>

<!--nginx-->
場所 ^~ /baidu-static/ {
add_header 'Access-Control-Allow-Origin' "$http_origin" 常に;
add_header 'Access-Control-Allow-Credentials' 常に 'true' を設定します。
add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' 常に;
add_header 'Access-Control-Allow-Headers' 'Accept、Authorization、Cache-Control、Content-Type、DNT、If-Modified-
常に、Keep-Alive、Origin、User-Agent、X-Requested-With' が設定されます。
proxy_pass http://api.map.baidu.com/;
}

質問 2:マップ上にオーバーレイを表示するにはどうすればよいですか?

解決策: Baidu Map の静的画像 API を調べたところ、カスタム オーバーレイ スタイルがあまりサポートされていないことがわかりました。指定できるのはカスタム画像 (ローカル画像ではない) のみです。いろいろ試した結果、openLayers.Map を使うのが実現可能な方法だと思いました。しかし、コード修正の作業量が大きすぎたため、断念しました。その後、div を使用してオーバーレイを直接シミュレートし、静的レイヤー レベルよりも少し高いレベルに設定すると問題が解決すると考えました。

質問 3: CSS スタイルを使用して点線の円を描きました。生成された画像を html2canvas で処理したところ、点線が実線に変わったことがわかりました。

解決策: キャンバスを使用して円を描く

質問4:アイコンは絶対配置されていますが、html2canvasで処理された後、生成された画像にアイコンが表示されません。

解決策: アイコンの Z インデックスを Baidu の静止画像レベルよりも大きく設定します (PS: 静止画像のスタイルも絶対位置を使用します)

質問5: html2canvas処理後に生成された画像の背景色が黒色になります

解決策: image/png を image/jpg に変更する

試す {
  html2canvas(sharePage, {
    CORS の使用: true
  }).then((キャンバス) => {
    const imgBase64 = canvas.toDataURL('image/jpg')
    this.data64 = imgBase64
    })
  } キャッチ (エラー) {
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。