Html2canvas: 地図の画像を生成する際の問題（Googleマップ）

問題は、グーグルマップがCSS3変換行列を使用していることです。これはhtml2canvasに完全には実装されていません。

私はどのように行いますか？

Googleマップの画像（外部サーバーの画像）？

プロキシを使用する： https ：

brcontainer：違法だと思います（別のコンピューター/ proxy /から直接マップタイルにアクセスします）。 唯一の方法はCORSを使用することです。

@bkralikプロキシは、「ブロックされたサイト」にアクセスするためだけのものではありません。プロキシ用語は、html2canvasのプロキシが、JavaScript APIがローカルサイトにあるかのように外部サーバーから画像を開くようにする場合に備えて、別の意味を持ちます。

プロキシはダウンロードされた外部サーバーを作成し、html2canvasはダウンロードが完了した後にのみイメージをロードします。

この主題を理解するには、このhttp://en.wikipedia.org/wiki/Same_origin_policyをお読み

このプロキシをどのように使用しますか？

プロキシの使用へのすべてのリンクを使用したリンク（php言語、C＃（asp.net）、python、VB（aspクラシック））。

プロキシへのリンクに気付いていないかもしれませんが、ここで説明します。
https://github.com/niklasvh/html2canvas/wiki/Proxies

新しいライブラリを使用する場合は、README全体を読むことをお勧めします。

@brcontainer私はこのプロキシが何をするか知っています-クライアントがページのスクリーンショットを撮りたいとき、サーバーはすべての写真をローカルフォルダにダウンロードし、クライアントはそれらをロードします。 しかし、それは間違っています-グーグルは彼らのタイルサーバーの直接使用を許可していないので-そして彼らの観点から、誰かがウェブページを見ずに突然大量のタイルをサーバーにダウンロードしています...

私はJavaを使用しています。
プロキシを使用する例がありますか？

@brcontainerそして、私が述べたように、Google Chromeで実行されているgooglemapsがCSS3変換を使用するため、CSS3変換には本当に問題があり、現在の実装ではマップをスクリーニングできません。 私を信じてください、私が書いたプロジェクトでこの問題がありました...

@bkralikでは、どうすればよいですか？
例はありますか？

私もJavaでプログラミングしています（すでにPHP、C＃、VBでプロキシを作成しています）が、Javaでプロキシを作成するのに間に合わず、日曜日に作成できるかもしれません。

そのアプリケーションはJSPまたは「JavaDesktop」ですか？

@brcontainerこれは、JSF、Primefaces、Javascript、およびJavaを使用するWebアプリケーションです。

@DanielSBelo JSFフレームワーク使用したことはありません。フレームワークを使用せずに純粋なJavaでプログラムしているので、Java部分のコードで現在のコードを簡単に実装できるかどうかわかりません。 私は彼を助けたかったのですが、それは本当にタイムリーではありません。

[編集]
cssトランスフォームのサポートについては、 https ： ください。

@DanielSBeloこれに対する良い解決策を見つけましたか？ 私も同じ問題を抱えています。

マップをキャンバスとして保存することはFirefoxでは正常に機能しますが、Chromeでマップを保存することはできません。 変換に直接関係しているとは思いませんが、ChromeがCORを処理する方法である可能性が高いです。 しかし、私は答えを見つけようとして完全に立ち往生しています。

@TGOlson現在のリリースのhtml2canvasは「1レベル」の変換しかレンダリングできないため、CSS3変換には本当に問題があります。つまり、それらをスタックしません。
グーグルマップで遊ぶだけで、問題が変換にあることを確認できます-通常、次のようなスクリーンショットが表示されます：

（cssでは、マップ全体が正しく配置されますが、css3を無効にすると、これが発生します）
唯一の解決策は、css3変換スタック全体を実装することです。 Niklasによって進行中であるかどうかはわかりませんが、誰かがそれを行う必要があります:-)

購読する

私も同じ問題を抱えています-Chromeだけです。 私はhtml2canvas-proxy-phpを使用しています。 他のブラウザは正常に動作します。 マップの一部が欠落しているだけです。マップのサイズ変更、オーバーレイの追加/削除などに関連しているようです。

参考までに-マップキャプチャ機能をすばやく起動して実行する必要がある場合は、いつでもGoogleストリートビューまたは静的マップAPIを使用できます。 基本的に、現在のユーザーが地図上で見ているもの（ map.getPovなど）を再構築し、Googleからその静止画像を取得します。

このアプローチはオーバーレイでは機能しないと思います

私はちょうどこの問題に出くわしました。 私が間違っていない場合、このスタックオーバーフローの

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,
})

おそらく、css3変換をチェックして、レンダリング中に通常のCSSポジショニングに自動的に変換し、レンダリング後にそれらを削除することができます。

画面キャプチャ機能が一定していません。
ページを完全にリロードした後に機能します（FirefoxでCTLR + Rを使用）

これが私のコードです。基本的には、ウィンドウのキャプチャされたprintsreenの64 base / png画像を生成し、最終結果をタグを付けて、機能するかどうかを確認します。

ここに機能があります

関数ebfPrintScreen（componentName）
{{
html2cavnas
（[document.body]、
{{
ロギング：true、
useCORS：true、
onrendered：関数（キャンバス）
{{
img = canvas.toDataURL（ "image / jpg"）;

                                                  console.log(img.length);
                                                  console.log(img);

                                                  var imgComp = $c(conponentName);
                                                  imgComp.img.src = img

                                          }
                      }
                );

}

主な目的は、作成後にグーグルマップルートをキャプチャすることですが、私が言うように、それが機能する場合と機能しない場合があります。 何が起こっているのかについての手がかりはありますか？

私も同じ問題を抱えています。 ズームやパンをした後、地図の画像を撮りに行きます。地図全体にさえ、突然薄茶色に覆われるようになります。 誰かがChromeでこれを修正した場合は、私に知らせてください。

@mfirdausのソリューションを試し

@mfirdausのソリューションを適用した後、マップビューをキャプチャすることができました。 しかし、どういうわけか、以下のこのコードはマップを使用できなくしています（ただし、html2canvasは使用可能です）。

$(".gm-style>div:first>div").css({ //get the map container. not sure if stable
      "transform":"none",
      "left":mapleft,
      "top":maptop,
    })

その行が行っていることを「復元」する方法はありますか？ 今のところ、変換コードを使用せずにhtml2canvas関数を呼び出した後、マップを機能させるために、initMap関数を再度呼び出しています。

上記のスクリプトはGoogleMaps v3で機能しますか？

私の要件は、ルートが描かれたGoogle Mapv3のスクリーンショットを撮ることです。

Firefoxではうまく機能しますが、Chromeにはマーカーやルートがありません。 私はすでにカスタムマーカーを使用しています。

コンソールにエラーがなく、ロギングが非常に制限されているため、デバッグに苦労しています。

Chromeで問題を解決した人はいますか？ 2つの言語でプロキシスクリプトを試しましたが、どちらも違いがないようです。

私は同様の問題を抱えています、私はインターネットからこのコードをコピー/カットします：

  if($.browser.safari) {// Fix for Chrome
    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")[0]], {
    logging: false,
    useCORS: true,
    onrendered: function (canvas) {
      $('#screenshot').after(canvas);

      if($.browser.safari) {// Fix for Chrome
        $(".gm-style>div:first>div").css({
          left:0,
          top:0,
          "transform":transform
        });
      }
    }
  });

動作しますが、ハンドラーを使用してマップを移動すると動作しません。 マーカーやポリゴンなどを操作します。Firefox（マップを移動できます）でも動作しますが、クロムでは動作しません。

何か案が ？

修理済み ！

私が愚かにコピー/貼り付けしたクロムの修正はトリガーされませんでした。

これは私がしました ：

  if(window.chrome) {// Fix for Chrome
    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 > div.g-map-canvas > div > div > div:nth-child(1)")[0]], {
    logging: false,
    useCORS: true,
    onrendered: function (canvas) {
      $('#screenshot').after(canvas);

      if(window.chrome) {// Fix for Chrome
        $(".gm-style>div:first>div").css({
          left:0,
          top:0,
          "transform":transform
        });
      }
    }
  });

html2canvasの非常に長いセレクターは、ボタンやオプションのないマップを持つためのものです。

私は今働いています、ありがとう。

ありがとう@GCorbelそれはあなたのソリューションで非常にうまく機能します。

上記の回避策はマップをレンダリングするために機能しますが、上部のコントロールがないか、間違った位置にあります。 何か案は？

これはまだv1.0.0の問題ですか？ もしそうなら、 jsfiddleで例を共有して

この問題は、元の作成者からの詳細情報の要求に対する応答がなかったため、自動的にクローズされました。 現在問題になっている情報だけでは、行動を起こすのに十分な情報がありません。 さらに調査できるように、必要な回答がある場合はご連絡ください。

@niklasvhそれがまだ最新バージョンの問題であることを確認できます。 これは、この問題のテスト中に作成したフィドルです： http ：

フィドルは、リンクされたスタックオーバーフローの質問で説明されている問題を示していますが、必ずしもこのスレッドのOPにあるものではありません。 マップをパンしなくても、マップをコピーするのに問題はありません。 ChromeではFireFoxではなくマップをパンすると、コピーされたマップは最初に読み込まれた領域の外側では空白になります。

このスレッドで提供されている修正は、問題を解決しているようです。

@ Ananda-Pryana jsFiddleを試しましたが、修正が機能しなくなったようです。 他に解決策はありますか？

前もって感謝します。

最近リリースされた最新バージョンのグーグルマップ（v3.32）には、新しい実験的なレンダラーがあるようです。
https://developers.google.com/maps/documentation/javascript/releases

これは修正を壊しました。 簡単なテストを行っただけですが、（Chromeだけでなく）すべてのブラウザーで同じように問題が発生しているようです。次のバージョンのhtml2canvasで修正しやすくなることを願っています。

ただし、簡単な回避策は、古いバージョンのgmapを使用することです。この場合、修正は引き続き正常に機能します。

@ Ananda-Pryanaうん私はgmapをダウングレードし、機能しました、ありがとう。

ありがとう@ Ananda-Pryana！ 私は先週これを機能させてから、それを新しいプラットフォームに移動しました、そして私はその移動がそれを壊したものだと思いました。 新しい環境が原因だと思って、私は完全にネズミの穴を下っていました。 3.30にダウングレードしましたが、すべて順調です。

グーグルマップの新しいバージョンでは、変換が別のdivに適用されているようです。 @GCorbelのソリューションを使用しますが、このセレクター（ ".gm-style> div：first> div：first> div：last> div"）を使用すると機能するようです。 まだ徹底的にテストしていませんが。

@rSensationのヒントは、最新バージョンでは魅力のように機能しました。 ありがとうございました！

うーん、この問題は私には戻ってきたようです。問題を確認するにはマップをパンする必要があります。パンしてHtml2Canvasを使用して画面を取得すると、一部の領域が空白の灰色で表示されますか？

オーバーレイレイヤーを切り落とすことを扱っている皆さんへ-
@GCorbelのセレクターは、Googleマップレイヤーのみを変換します。 他のオーバーレイがある場合は、それらがどのdivにあるかを見つける必要があります（たとえば、 $('.gm-style>div:first>div:first>div:first>div:first>div')は私のオーバーレイdivの1つであり、同じ変換をcssに適用します。

@mylesbooneオーバーレイレイヤーがどのdivであるかをどのようにして見つけましたか？ 私は現在、オーバーレイレイヤーが切断されるという同じ問題に苦労しています。

現在、オーバーレイレイヤーとしてGmapMarkerとGmapPolylineを使用しています。

@sunghunOW
解決策はここで見つけることができますhttps://github.com/niklasvh/html2canvas/issues/1568
ブラウザの検査ツールを使用して、変換が必要なdivを確認できます。

私が見つけた最良の解決策：

    html2canvas($('.gm-style>div:eq(0)')[0],{
        useCORS: true,
        allowTaint: true,
        async:false,
    }).then(canvas => {document.body.appendChild(canvas)});

    html2canvas($('.gm-style>div:eq(0)')[0],{
        useCORS: true,
        allowTaint: true,
        async:false,
    }).then(canvas => {document.body.appendChild(canvas)});

これは私にキャンバスが定義されていないことを与えます..アイテムのセレクターは箱から出して単語である必要がありますか？

@hseedaありがとうございます！ あなたのセレクターは私のためにトリックをやっていた！

これが機能する少し変更されたセレクターです（少なくとも私にとっては、ハハ）

const div = document.querySelector('#map > div:first-of-type')

html2canvas(div, {})

ただし、現在は、利用規約に準拠するために常に表示する必要のあるGoogleロゴが削除されています:(

さて、ノードか何かのクローンを作成します。 私はしばらくの間このマップと戦ってきました：D

これは私のために働きます：

$('#snapshot').on('click',function () {
    html2canvas(document.querySelector('.gm-style'), 
           {useCORS:true, allowTaint: true,async:false} ).then(canvas => {
            document.body.appendChild(canvas)
    });
});

白地図の問題やキャンバスの生成エラーはトリッキーでしたが、最終的に私にとってそれを修正したのは、この構成を追加することでした。

ignoreElements: (node) => {
        return node.nodeName === 'IFRAME';
      }

html2canvas(mapWrapper, {
      useCORS: true,
      allowTaint: false,
      ignoreElements: (node) => {
        return node.nodeName === 'IFRAME';
      }
    }).then(canvas => {
      const url = canvas.toDataURL('image/png');
      saveAs(url, 'image3.png');
      window.URL.revokeObjectURL(url);
    });

@imlinusと@hseedaに感謝します！ このセレクターは私にとって完璧に機能します！ そしてそれはグーグルのロゴさえ保持します、ありがとう！

@hseedaありがとうございます！ あなたのセレクターは私のためにトリックをやっていた！

これが機能する少し変更されたセレクターです（少なくとも私にとっては、ハハ）

const div = document.querySelector('#map > div:first-of-type')

html2canvas(div, {})

ただし、現在は、利用規約に準拠するために常に表示する必要のあるGoogleロゴが削除されています:(

さて、ノードか何かのクローンを作成します。 私はしばらくの間このマップと戦ってきました：D