2016-01-05 19 views
6

Ho provato html2canvas, ma non ho funzionato come previsto, perché sto usando Google Maps con marcatori personalizzati e quando effettuerò solo uno screenshot della mappa senza questi indicatori.Creazione di uno "screenshot" del sito Web corrente utilizzando HTML o JavaScript?

voglio fare uno screenshot in modo che assomiglia a:

enter image description here

Ma il risultato è:

enter image description here

Il grafico fa anche non guardare quel grande. Ci sono delle alternative che posso usare?

Ecco il codice che ho usato per creare un'immagine utilizzando html2canvas (dove #downloadPDF un pulsante):

<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

Speriamo che CSS lo faccia. Sono state utilizzate query multimediali? Controllali. –

+2

Dato che html2canvas usa il dom, se ci sono altre cose come un'altra tela penso che potrebbe non funzionare. Non so se si può fare solo lato client, forse si deve usare qualcosa come phantomJS http: // phantomjs. org/screen-capture.html – FabioCosta

+0

@AfzaalAhmadZeeshan, sto utilizzando anche Bootstrap e vedo alcune query multimediali, ma non sono sicuro di come queste query multimediali influenzino la libreria html2canvas. –

risposta

1

Non sono sicuro della configurazione di hosting, ma ho usato per creare PhantomJS schermate di pagine Web e salvarle come immagini o PDF.

Quando si scarica la libreria, nella directory di esempio è presente un file rasterize.js che consente di passare argomenti per salvare un URL. È possibile modificarlo in modo che si fermi per alcuni secondi, quindi salva la pagina, fornendo alla mappa il tempo necessario per caricarla correttamente.

http://phantomjs.org