Fare uno screenshot di una pagina web con JavaScript?

StackOverflow https://stackoverflow.com/questions/60455

  •  09-06-2019
  •  | 
  •  

Domanda

È possibile acquisire uno screenshot di una pagina Web con JavaScript e quindi inviarlo nuovamente al server?

Non sono così interessato ai problemi di sicurezza del browser.eccetera.come sarebbe l'implementazione HTA.Ma è possibile?

È stato utile?

Soluzione

L'ho fatto per un HTA utilizzando un controllo ActiveX.È stato abbastanza semplice creare il controllo in VB6 per acquisire lo screenshot.Ho dovuto utilizzare la chiamata API keybd_event perché SendKeys non può eseguire PrintScreen.Ecco il codice per questo:

Declare Sub keybd_event Lib "user32" _
(ByVal bVk As Byte, ByVal bScan As Byte, ByVal dwFlags As Long, ByVal dwExtraInfo As Long)

Public Const CaptWindow = 2

Public Sub ScreenGrab()
   keybd_event &H12, 0, 0, 0
   keybd_event &H2C, CaptWindow, 0, 0
   keybd_event &H2C, CaptWindow, &H2, 0
   keybd_event &H12, 0, &H2, 0
End Sub

Questo ti porta solo fino a portare la finestra negli appunti.

Un'altra opzione, se la finestra di cui desideri uno screenshot è un HTA, sarebbe quella di utilizzare semplicemente una XMLHTTPRequest per inviare i nodi DOM al server, quindi creare gli screenshot sul lato server.

Altri suggerimenti

Google lo sta facendo in Google+ e uno sviluppatore di talento lo ha decodificato e prodotto http://html2canvas.hertzen.com/ .Per lavorare in IE avrai bisogno di una libreria di supporto Canvas come http://excanvas.sourceforge.net/

Un'altra possibile soluzione che ho scoperto è http://www.phantomjs.org/ che consente di acquisire molto facilmente screenshot di pagine e molto altro ancora.Sebbene i miei requisiti originali per questa domanda non siano più validi (lavoro diverso), probabilmente integrerò PhantomJS nei progetti futuri.

Pounder's se questo è possibile farlo impostando gli elementi dell'intero corpo in una tela e quindi utilizzando canvas2image?

http://www.nihilogic.dk/labs/canvas2image/

Un modo possibile per farlo, se si esegue su Windows e si ha .NET installato, è possibile fare:

public Bitmap GenerateScreenshot(string url)
{
    // This method gets a screenshot of the webpage
    // rendered at its full size (height and width)
    return GenerateScreenshot(url, -1, -1);
}

public Bitmap GenerateScreenshot(string url, int width, int height)
{
    // Load the webpage into a WebBrowser control
    WebBrowser wb = new WebBrowser();
    wb.ScrollBarsEnabled = false;
    wb.ScriptErrorsSuppressed = true;
    wb.Navigate(url);
    while (wb.ReadyState != WebBrowserReadyState.Complete) { Application.DoEvents(); }


    // Set the size of the WebBrowser control
    wb.Width = width;
    wb.Height = height;

    if (width == -1)
    {
        // Take Screenshot of the web pages full width
        wb.Width = wb.Document.Body.ScrollRectangle.Width;
    }

    if (height == -1)
    {
        // Take Screenshot of the web pages full height
        wb.Height = wb.Document.Body.ScrollRectangle.Height;
    }

    // Get a Bitmap representation of the webpage as it's rendered in the WebBrowser control
    Bitmap bitmap = new Bitmap(wb.Width, wb.Height);
    wb.DrawToBitmap(bitmap, new Rectangle(0, 0, wb.Width, wb.Height));
    wb.Dispose();

    return bitmap;
}

E poi tramite PHP puoi fare:

exec("CreateScreenShot.exe -url http://.... -save C:/shots domain_page.png");

Quindi hai lo screenshot sul lato server.

Questa potrebbe non essere la soluzione ideale per te, ma potrebbe comunque valere la pena menzionarla.

Snapsie è un open source, ActiveX oggetto che consente di acquisire e salvare schermate di Internet Explorer. Una volta registrato il file DLL sul client, dovresti essere in grado di acquisire lo screenshot e caricare il file sul server tramite JavaScript.Svantaggi:è necessario registrare il file DLL sul client e funziona solo con Internet Explorer.

Avevamo un requisito simile per segnalare i bug.Dato che si trattava di uno scenario Intranet, siamo stati in grado di utilizzare i componenti aggiuntivi del browser (come Colpo di fuoco per Firefox e Schermata di IE per Internet Explorer).

IL SnapEngage utilizza a Applet Java (1.5+) per creare uno screenshot del browser.PER QUANTO NE SO, java.awt.Robot dovrebbe fare il lavoro: l'utente deve semplicemente consentire all'applet di farlo (una volta).

E ho appena trovato un post a riguardo:

Puoi raggiungere questo obiettivo utilizzando HTA e VBScript.Basta chiamare uno strumento esterno per eseguire lo screenshot.Ho dimenticato il nome, ma su Windows Vista c'è uno strumento per fare screenshot.Non hai nemmeno bisogno di un'installazione aggiuntiva per questo.

Per quanto riguarda l'automatico, dipende totalmente dallo strumento che usi.Se ha un'API, sono sicuro che puoi attivare lo screenshot e il processo di salvataggio tramite un paio di chiamate di Visual Basic senza che l'utente sappia che hai fatto quello che hai fatto.

Dato che hai menzionato HTA, presumo che tu utilizzi Windows e (probabilmente) conosca il tuo ambiente (ad es.sistema operativo e versione) molto bene.

Un'ottima soluzione per acquisire screenshot in Javascript è quella di https://grabz.it.

Hanno un'API screenshot flessibile e semplice da usare che può essere utilizzata da qualsiasi tipo di applicazione JS.

Se vuoi provarlo, prima dovresti ottenere l'autorizzazione chiave dell'app + segreto e il SDK gratuito

Quindi, nella tua app, i passaggi di implementazione sarebbero:

// include the grabzit.min.js library in the web page you want the capture to appear
<script src="grabzit.min.js"></script>

//use the key and the secret to login, capture the url
<script>
GrabzIt("KEY", "SECRET").ConvertURL("http://www.google.com").Create();
</script>

Lo screenshot può essere personalizzato con diversi parametri.Per esempio:

GrabzIt("KEY", "SECRET").ConvertURL("http://www.google.com", 
{"width": 400, "height": 400, "format": "png", "delay", 10000}).Create();
</script>

È tutto.Quindi attendi semplicemente qualche istante e l'immagine apparirà automaticamente in fondo alla pagina, senza che tu debba ricaricare la pagina.

Ci sono altre funzionalità nel meccanismo degli screenshot che puoi esplorare Qui.

È anche possibile salvare lo screenshot localmente.Per questo dovrai utilizzare l'API lato server GrabzIt.Per maggiori informazioni consulta la guida dettagliata Qui.

l'ho trovato dom-immagine ha fatto un buon lavoro (molto meglio di html2canvas).Vedi la domanda e la risposta seguenti: https://stackoverflow.com/a/32776834/207981

Questa domanda chiede di inviarla nuovamente al server, cosa che dovrebbe essere possibile, ma se stai cercando di scaricare le immagini ti consigliamo di combinarle con FileSaver.js, e se desideri scaricare un file zip con più file di immagine, tutti generati sul lato client, dai un'occhiata a jszip.

Se sei disposto a farlo lato server, ci sono opzioni come PhantomJS, che ora è deprecato.Il modo migliore per procedere sarebbe Headless Chrome con qualcosa di simile Burattinaio su Node.JS.Catturare una pagina web utilizzando Puppeteer sarebbe semplice come segue:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

Tuttavia richiede Chrome headless per poter funzionare sui tuoi server, che ha alcune dipendenze e potrebbe non essere adatto ad ambienti limitati.(Inoltre, se non utilizzi Node.JS, potresti dover gestire tu stesso l'installazione/l'avvio dei browser.)

Se sei disposto a utilizzare un servizio SaaS, ci sono molte opzioni come

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top