Fare uno screenshot di una pagina Web con JavaScript?

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

Non sono così preoccupato per i problemi di sicurezza del browser. ecc. come l'implementazione sarebbe per HTA . Ma è possibile?

Ho fatto questo per un HTA usando un controllo ActiveX. È stato abbastanza facile creare il controllo in VB6 per acquisire lo screenshot. Ho dovuto usare la chiamata API keybd_event perché SendKeys non è in grado di 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 a portare la finestra negli appunti.

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

Google lo sta facendo in Google+ e uno sviluppatore di talento l'ha progettato e prodotto http://html2canvas.hertzen.com/ . Per funzionare 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 facilmente schermate di pagine e molto altro ancora. Mentre i miei requisiti originali per questa domanda non sono più validi (lavoro diverso), probabilmente integrerò PhantomJS in progetti futuri.

Pounder se è possibile farlo impostando gli elementi di tutto il corpo in una tela, quindi usando canvas2image?

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

Un modo possibile per farlo, se in esecuzione su Windows e .NET installato è possibile:

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 oggetto ActiveX open source che consente di catturare e salvare schermate di Internet Explorer. Dopo aver registrato il file DLL sul client, dovresti essere in grado di acquisire lo screenshot e caricare il file sul server con JavaScript. Svantaggi: deve registrare il file DLL sul client e funziona solo con Internet Explorer.

Avevamo un requisito simile per la segnalazione di bug. Dato che era per uno scenario intranet, siamo stati in grado di utilizzare i componenti aggiuntivi del browser (come Fireshot per Firefox e IE Screenshot per Internet Explorer).

Lo SnapEngage utilizza un applet Java (1.5+) per rendere un browser screenshot. AFAIK, java.awt.Robotdovrebbe fare il lavoro - l'utente deve solo consentire all'applet di farlo (una volta).

E ho appena trovato un post al riguardo:

• Stack Overflow domanda codice JavaScript per acquisire uno screenshot di un sito Web senza utilizzare ActiveX
• Post del blog Come funziona SnapABug - e cosa dovrebbero fare

Puoi farlo usando HTA e VBScript . Basta chiamare uno strumento esterno per eseguire lo screenshot. Ho dimenticato come si chiama, ma su Windows Vista c'è uno strumento per fare screenshot. Non hai nemmeno bisogno di un'installazione aggiuntiva per questo.

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

Da quando hai citato HTA, presumo che tu sia su Windows e (probabilmente) conosca molto bene il tuo ambiente (es. Sistema operativo e versione).

Ho scoperto che dom-to-image ha fatto un buon lavoro (molto meglio di html2canvas). Vedere la seguente domanda e risposta: https://stackoverflow.com/a/32776834/207981

Questa domanda chiede di inviarlo nuovamente al server, il che dovrebbe essere possibile, ma se stai cercando di scaricare l'immagine (e) vorrai combinarla con FileSaver.js e se vuoi scaricare una zip con più file di immagine tutti generati sul lato client danno un'occhiata a jszip .

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

Hanno un'API per screenshot flessibile e di facile utilizzo che può essere utilizzata da qualsiasi tipo di applicazione JS.

Se vuoi provarlo, inizialmente dovresti ottenere la chiave dell'app di autorizzazione + segreto e l' 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>

La schermata potrebbe essere personalizzata con parametri diversi . Per esempio:

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

È tutto. Quindi attendi qualche istante e l'immagine apparirà automaticamente nella parte inferiore della pagina, senza che sia necessario ricaricare la pagina.

Ci sono altre funzionalità nel meccanismo dello 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 .

Se sei disposto a farlo sul lato server, ci sono opzioni come PhantomJS , che ora è deprecato. Il modo migliore per andare sarebbe Headless Chrome con qualcosa come Puppeteer su Node.JS. Catturare una pagina web usando 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, è necessario che Chrome senza testa sia in grado di funzionare sui server, il che ha alcune dipendenze e potrebbe non essere adatto in ambienti con restrizioni. (Inoltre, se non si utilizza Node.JS, potrebbe essere necessario gestire da soli l'installazione / avvio dei browser.)

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

• Restpack
• UrlBox
• Livello di schermata

Questa domanda è vecchia ma forse c'è ancora qualcuno interessato a una risposta all'avanguardia:

Puoi usare getDisplayMedia:

https://github.com/ondras/browsershot

Ad oggi aprile 2020 libreria GitHub html2Canvas https://github.com/niklasvh/html2canvas

GitHub 20K stelle | Pipeline di Azure: riuscita | Download 1.3M / mese |

quote: " JavaScript renderer HTML Lo script consente di acquisire" schermate "di pagine Web o parti di esso, direttamente sul browser degli utenti . Lo screenshot si basa sul DOM e pertanto potrebbe non essere preciso al 100% della rappresentazione reale in quanto non crea uno screenshot reale, ma crea lo screenshot in base alle informazioni disponibili nella pagina.

Ho creato una semplice funzione che utilizza rasterizeHTML per creare uno svg e / o un'immagine con il contenuto della pagina.

Controlla :

https://github.com/orisha/tdg-screen-shooter-pure-js