2016-01-05 14 views
6

私はhtml2canvasを試しましたが、期待どおりに動作しませんでした。なぜなら私はカスタムマーカーでGoogleマップを使用しており、これらのマーカーなしで地図のスクリーンショットを作成するだけなのでです。HTMLまたはJavaScriptを使用して現在のウェブサイトの「スクリーンショット」を作成していますか?

私はそれがどのように見えるようにスクリーンショットを作りたい:

enter image description here

しかし、結果は次のとおりです。

enter image description here

チャートにもその偉大に見えるしません。私が使用できる選択肢はありますか?ここで

は、私は(#downloadPDFがボタンがある)html2canvasを使用して画像を作成するために使用するコードです:あなたのホスティングセットアップ上

<script type="text/javascript"> 
jQuery(document).ready(function ($) { 
    $('#downloadPDF').click(function() { 
     html2canvas($(".map"), { 
      logging: true, 
      useCORS: true, 
      onrendered: function (canvas) { 
       var imgData = canvas.toDataURL('image/png'); 
       window.open(imgData); 
      } 
     }); 
    }); 
}); 

+0

うまくいけば、CSSがそうします。メディアクエリが使用されていますか?それらを確認してください。 –

+2

html2canvasはdomを使用しているので、別のキャンバスのようなものがあれば、それはうまくいかないかもしれないと私は思っています。あなたはクライアント側だけをphantomJS http:// phantomjsのようなものにする必要があります。 org/screen-capture.html – FabioCosta

+0

@AfzaalAhmadZeeshan、私はBootstrapも使用していますが、いくつかのメディアクエリがありますが、これらのメディアクエリがhtml2canvasライブラリにどのような影響を与えるかはわかりません。 –

答えて

1

わからないが、私は作成するためにPhantomJSを使用していましたウェブページのスクリーンショットを作成し、画像やPDFとして保存することができます。

ライブラリをダウンロードすると、exampleディレクトリにrasterize.jsがあり、引数を渡してURLを保存できます。これを修正して数秒間一時停止させてから、ページを保存してマップを適切にロードするのに十分な時間を与えることができます。

http://phantomjs.org

関連する問題