Cattura schermate di <body> con html2canvas e memorizza img come JS var

Sto tentando di consentire agli utenti del mio sito di premere un pulsante per acquisire uno screenshot dello schermo corrente (tutto nel corpo).Cattura schermate di <body> con html2canvas e memorizza img come JS var

Dalla mia ricerca, html2canvas sembra essere una risorsa che lo rende possibile.

Il mio problema è la documentazione non fornisce codice di esempio e sto lottando per ottenere una presa sui passaggi coinvolti.

http://html2canvas.hertzen.com/documentation.html

Il seguente domanda SO (How to upload a screenshot using html2canvas?) mi lascia un po 'confuso. Voglio solo sapere come ottenere un'immagine a questo punto.

Dal suo codice.

$(window).ready(function(){ 
    ('body').html2canvas(); 
    var canvasRecord = new html2canvas(document.body).canvas; 

    //At this point does the .toDataURL method return a png? 
});

A questo punto mi sono perso dove l'immagine è, o anche come/quando crearla. Non mi preoccupo di inviarlo al server più tardi.

Qualsiasi informazione apprezzata. Grazie! (Html2canvas anche necessari?)

fonte

2012-05-01 mattyd

Si potrebbe voler dare un'occhiata alla sezione uso del [file readme] (https://github.com/niklasvh/html2canvas/blob/master/readme.md#usage). – 0sh

Si potrebbe anche prendere in considerazione alcune delle soluzioni di screen shot basate su phantomjs. Guarda [sul wiki di PhantomJS] (http://code.google.com/p/phantomjs/wiki/WhoUsesPhantomJS) (cerca "screenshot") o considera [questo progetto node.js/phantom] (https: // github .com/fzaninotto/screenshot-as-a-service). –

Come si utilizza il html2canvas plugin jQuery, ecco un frammento di esempio

var screenshot; 

$('body').html2canvas({ 
    onrendered: function(canvas) { 
    screenshot = canvas.toDataURL(); 

    //code to process/send the image to server 
    } 
});

Nel codice precedente snippet html2canvas crea lo screenshot della pagina.

È inoltre possibile utilizzare PhantomJS per creare schermate di pagine Web, purché siano pagine pubbliche, in quanto potrebbe non essere possibile accedere alle pagine protette da login sul lato server; in tali situazioni funzionerà solo una soluzione lato client come html2canvas.

fonte

2012-12-25 18:20:30

puoi eseguire phantomjs sul lato client? – cantdutchthis

'phantomjs' non è una libreria javascript, è un browser webkit senza l'interfaccia utente. Quindi non puoi eseguirlo sul lato client. Puoi utilizzare servizi come http://usersnap.com per ottenere screenshot del tuo sito web/app. –

$("#screenshot").click(function() { 
    $("body").html2canvas({ 
    onrendered: function(canvas) { 
     $(".filt_opt_n").html(canvas); 
     //window.open(img); 
    } 
    }); 
}); 
<div id="screenshot"></div>

.filt_opt_n questo è un div che u vuole mostrare l'uscita questo sta lavorando per me

fonte

2013-02-08 07:34:35

può essere una vecchia questione. Potresti provare questo!

var htmlCanvas = new html2canvas(document.body); 
var queue = htmlCanvas.parse(); 
var canvas = htmlCanvas.render(queue, { elements: { length: 1} }); 
var img = canvas.toDataURL();

fonte

2014-12-03 10:31:38

Cattura schermate di <body> con html2canvas e memorizza img come JS var

risposta

Problemi correlati