html2canvas Googleドライブルートマップを含むdiv要素の「screenshot」

Question

Googleマップが存在するdiv要素の「スクリーンショット」を作成しようとしています。私はhtml2canvasを使用し、 "通常のマップ"（マップ上に1つまたはいくつかのマーカーでいくつかの場所を表示）に関しては何の問題にも直面しません。しかし、この問題は、2つのポイントを計算されたルートに結ぶ地図である運転ルートマップで発生します。この地図はおそらくレイヤー/画像の束ではありませんが、ルートの計算と描画を担当するGoogle DirectionsServiceとDirectionsDisplayサービスも使用しています。 （html2canvasが "イメージ"を再構築しようとするとバックグラウンドで実行できないかもしれません）最後に、私は取得していますSecurityError： 'HTMLCanvasElement'で 'toDataURL'を実行できませんでした：汚染されたキャンバスはエクスポートできません。

あり、この場合にかなり近いStackOverflowの上のいくつかの質問は、ありますが、それらのどれも正確にどちらのソリューションが提供されているのと同じシナリオを説明していない。

私はこの問題とCORSの原則のセキュリティの背景を知っている。分析のヘッダーはAccess-Control-Allow-Origin：*また、お互いの地図も問題なくレンダリングされていますので、ここではこの特定の原因を見ることはできません問題。

また、私が知る限り、Googleの静的マップを使用して上書きすることはできませんでした。これは、経路を静的な地図に描画できなかったためです。

これはコードです：

 
    html2canvas(document.getElementById('map'), {

 
     //"proxy": "/html2canvasproxy.php",
 //proxy is not used
 
     "logging": true,

 
     "useCORS": true,

 
     "onrendered": function (canvas) {

 
      var img = new Image();

 
      img.onload = function() {

 
       img.onload = null;

 
       img.setAttribute('crossOrigin', 'anonymous');
 
       document.getElementById("output").appendChild(img);
 
      };

 
      img.src = canvas.toDataURL("image/png");
 //error line
 
     }

 
    }); 

Answer 1

いくつかの古い構文と醜いコードが、これは終わりで働いていた何かをする必要があります... HTTPの

screenShot (i) { 
     html2canvas(document.getElementById('map' + i), { 
      "logging": true, 
      "useCORS": true 
     }).then(function (canvas) { 
      var encodedString = canvas.toDataURL("image/png"); 

      // sending encoded base64 image to the server 
      googleMaps.$http.post('/api/screenshots', { 
       appraisalId: googleMaps.$data.appraisal_id, 
       encodedScreenshot: encodedString, 
       tag: 'googlemaps', 
       index: i, 
      }).then(function (response) { 
       googleMaps.setButtonsCaptions(); 
       console.log(response.data.success); 
      }, function (response) { 
       console.log(response); 
       console.log('Problem while sending screenshot to the server') 
      }.bind(googleMaps)); 
     }); 
    }