web-dev-qa-db-ja.com

html2canvasはGoogleマップパンでは機能しません

私はhtml2canvasを使用して オンラインマップ を画像として保存しています（「画像として保存」リンクを参照）。私はFirefox、ChromeおよびOperaで試してみました。

デフォルトのマップを変更しないと、より頻繁に機能する傾向があります。マップをズームしてから画面移動すると、機能しなくなります。マップはパンしますが、html2canvasは古い中心点とマップの境界を使用します。また、html2canvasは新しいマップ境界のマップタイルの読み込みに失敗します。

マップは正しくパンしますが、html2canvasは古い中心点とマップの境界を使用します。どうしてこれなの？

異なるドメインからの画像の取得をサポートするために、次の設定があります。

useCors: true;

私は次の解決策を試しました

-手動でマップタイプを変更する。時々これはそれを修正します。

-ブラウザのサイズ変更イベントをトリガーする-役に立たない。

-setTimeout（）を使用して、タイルが確実に読み込まれるように2000ミリ秒待機-役に立たない

-プロキシの使用（html2canvas_proxy_php.php）-役に立たない

-Googleマップのアイドルイベントを使用して、保存する前にマップがアイドルになるのを待つ-役に立たない

javascriptgoogle-mapshtml2canvas
22
Aaron Kreider

どうやら、問題はhtml2canvasが少なくともchrome（OSXではChromeでのみ問題を再現できた）でcss変換をレンダリングできないことから生じているようです。）コンテナタイルを保持し、-webkit-transformを使用して変換されます。コンテナにシフトされた値を取得し、変換を削除して、leftとtopを取得した値transformを使用し、次にhtml2canvasを使用します。その後、マップが壊れないように、html2canvasが完了したときにマップのcss値をリセットします。

だから私はあなたのサイトのjavascriptコンソールにこれを貼り付けました、そしてそれはうまくいったようです

//get transform value
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-canvas'),
{
  useCORS: true,
  onrendered: function(canvas)
  {
    var dataUrl= canvas.toDataURL('image/png');
    location.href=dataUrl //for testing I never get window.open to work
    $(".gm-style>div:first>div").css({
      left:0,
      top:0,
      "transform":transform
    })
  }
});
64
mfirdaus

Googleマップがmfirdausのソリューションを更新した後、機能しなくなり、新しいソリューションは次のようになります。

var transform = $(".gm-style>div:first>div:first>div:last>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:first>div:last>div").css({ //get the map container. not sure if stable
  "transform": "none",
  "left": mapleft,
  "top": maptop,
})

同じですが、セレクタをから変更する必要があります

.gm-style>div:first>div

に

.gm-style>div:first>div:first>div:last>div

手を挙げろ????

7
Daniel Torres Laserna

同じ問題がありますが、Googleマップの代わりにリーフレットマップを使用しました。

コードは以下です

var transform=$(".leaflet-map-pane").css("transform");
if (transform) {
    var c = transform.split(",");
    var d = parseFloat(c[4]);
    var h = parseFloat(c[5]);
    $(".leaflet-map-pane").css({
        "transform": "none",
        "left": d,
        "top": h
    })
}           


html2canvas(document.body).then(function(canvas){
    $(".leaflet-map-pane").css({
        left: 0,
        top: 0,
        "transform": transform
    })
   }
// Here is used html2canvas 1.0.0-alpha.9
2
Nilesh Panchal

私の場合、html2Canvas構成でクロスオリジンリソースシェアリング（CORS）を許可しただけで、うまくいきました。

useCORS:true,

詳細については、html2Canvasのドキュメントを参照してください。 http://html2canvas.hertzen.com/configuration

1
Amit Anand