2016-01-05 8 views
6

Ich habe html2canvas versucht, aber nicht wie erwartet funktioniert, weil ich Google Maps mit benutzerdefinierten Markierungen verwende und wenn es nur einen Screenshot der Karte ohne diese Markierungen macht.Erstellen Sie einen Screenshot der aktuellen Website mit HTML oder JavaScript?

Ich möchte einen Screenshot machen, so dass es wie folgt aussieht:

enter image description here

Aber das Ergebnis ist:

enter image description here

Die Grafik nicht auch, dass gut aussehen. Gibt es Alternativen, die ich nutzen kann? Hier

ist der Code, den ich verwenden, um ein Bild zu erstellen, mit html2canvas (wo #downloadPDF eine Taste):

<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

Hoffentlich tut CSS dass. Werden Medienanfragen verwendet? Überprüfen Sie sie. –

+2

Da html2canvas das dom verwendet, wenn es einige andere Dinge wie ein anderes Canvas gibt, denke ich, dass es nicht funktioniert. Ich weiß nicht, ob Sie es Clientseite exklusiv tun können, vielleicht müssen Sie etwas wie phantomJS http: // phantomjs verwenden. org/screen-capture.html – FabioCosta

+0

@AfzaalAhmadZeeshan, ich benutze auch Bootstrap und ich sehe ein paar Medienabfragen, aber ich bin mir nicht sicher, wie diese Medienabfragen die html2canvas Bibliothek beeinflussen. –

Antwort

1

Nicht sicher auf Ihrem Hosting-Setup, aber ich habe PhantomJS zum Erstellen Screenshots von Webseiten und speichern Sie diese als Bilder oder PDFs.

Wenn Sie die Bibliothek herunterladen, befindet sich im Beispielverzeichnis eine Datei "rasterize.js", in der Sie Argumente zum Speichern einer URL übergeben können. Sie können dies ändern, so dass es für ein paar Sekunden pausiert und dann die Seite speichert. Dadurch hat die Karte genug Zeit, um korrekt geladen zu werden.

http://phantomjs.org

Verwandte Themen