Ambil tangkapan layar halaman web dengan JavaScript?

Apakah mungkin untuk mengambil tangkapan layar halaman web dengan JavaScript dan kemudian mengirimkannya kembali ke server?

Saya tidak begitu peduli dengan masalah keamanan browser. dll karena implementasinya untuk HTA . Tetapi apakah itu mungkin?

Saya telah melakukan ini untuk HTA dengan menggunakan kontrol ActiveX. Sangat mudah untuk membangun kontrol di VB6 untuk mengambil tangkapan layar. Saya harus menggunakan keybd_event panggilan API karena SendKeys tidak dapat melakukan PrintScreen. Berikut kode untuk itu:

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

Itu hanya membuat Anda sejauh mendapatkan jendela ke clipboard.

Opsi lain, jika jendela yang Anda inginkan tangkapan layarnya adalah HTA, cukup gunakan XMLHTTPRequest untuk mengirim simpul DOM ke server, lalu buat tangkapan layar di sisi server.

Google melakukan ini di Google+ dan pengembang berbakat membalikkannya dan menghasilkan http://html2canvas.hertzen.com/ . Untuk bekerja di IE, Anda memerlukan pustaka dukungan kanvas seperti http://excanvas.sourceforge.net/

Solusi lain yang mungkin saya temukan adalah http://www.phantomjs.org/ yang memungkinkan seseorang untuk dengan mudah mengambil tangkapan layar halaman dan lebih banyak lagi. Sementara persyaratan asli saya untuk pertanyaan ini tidak berlaku lagi (pekerjaan berbeda), saya kemungkinan akan mengintegrasikan PhantomJS ke proyek masa depan.

Pounder apakah ini mungkin dilakukan dengan mengatur elemen seluruh tubuh menjadi kanvas kemudian menggunakan canvas2image?

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

Cara yang mungkin untuk melakukan ini, jika berjalan di windows dan menginstal .NET Anda dapat melakukannya:

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;
}

Dan kemudian melalui PHP Anda bisa melakukan:

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

Kemudian Anda memiliki tangkapan layar di sisi server.

Ini mungkin bukan solusi ideal untuk Anda, tetapi mungkin masih layak disebut.

Snapsie adalah open source, objek ActiveX yang memungkinkan tangkapan layar Internet Explorer ditangkap dan disimpan. Setelah file DLL terdaftar pada klien, Anda harus dapat menangkap tangkapan layar dan mengunggah file ke server dengan JavaScript. Kelemahan: perlu mendaftarkan file DLL di klien dan hanya bekerja dengan Internet Explorer.

Kami memiliki persyaratan serupa untuk melaporkan bug. Karena itu untuk skenario intranet, kami dapat menggunakan addon browser (seperti Fireshot untuk Firefox dan IE Screenshot untuk Internet Explorer).

The SnapEngage menggunakan applet Java (1.5 +) untuk membuat screenshot browser. AFAIK, java.awt.Robotharus melakukan pekerjaan - pengguna baru saja mengizinkan applet untuk melakukannya (sekali).

Dan saya baru saja menemukan posting tentang hal itu:

• Stack Overflow mempertanyakan kode JavaScript untuk mengambil tangkapan layar situs web tanpa menggunakan ActiveX
• Posting blog Bagaimana cara kerja SnapABug - dan apa yang harus mereka lakukan

Anda dapat mencapainya menggunakan HTA dan VBScript . Cukup panggil alat eksternal untuk melakukan screenshotting. Saya lupa apa namanya, tetapi pada Windows Vista ada alat untuk melakukan screenshot. Anda bahkan tidak perlu menginstal tambahan untuk itu.

Adapun sebagai otomatis - itu benar-benar tergantung pada alat yang Anda gunakan. Jika memiliki API, saya yakin Anda dapat memicu tangkapan layar dan proses penyimpanan melalui beberapa panggilan Visual Basic tanpa pengguna mengetahui bahwa Anda melakukan apa yang Anda lakukan.

Karena Anda menyebutkan HTA, saya berasumsi Anda berada di Windows dan (mungkin) tahu lingkungan Anda (misalnya OS dan versi) dengan sangat baik.

Saya menemukan bahwa dom-to-image melakukan pekerjaan dengan baik (jauh lebih baik daripada html2canvas). Lihat pertanyaan & jawaban berikut: https://stackoverflow.com/a/32776834/207981

Pertanyaan ini menanyakan tentang pengiriman kembali ke server, yang seharusnya dimungkinkan, tetapi jika Anda ingin mengunduh gambar, Anda ingin menggabungkannya dengan FileSaver.js , dan jika Anda ingin mengunduh zip dengan beberapa file gambar yang dihasilkan semua sisi klien lihat di jszip .

Solusi hebat untuk mengambil tangkapan layar dalam Javascript adalah dengan https://grabz.it .

Mereka memiliki API tangkapan layar yang fleksibel dan mudah digunakan yang dapat digunakan oleh semua jenis aplikasi JS.

Jika Anda ingin mencobanya, pertama-tama Anda harus mendapatkan kunci aplikasi + rahasia dan SDK gratis

Kemudian, di aplikasi Anda, langkah implementasi adalah:

// 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>

Tangkapan layar dapat disesuaikan dengan parameter yang berbeda . Sebagai contoh:

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

Itu saja. Kemudian cukup tunggu sebentar dan gambar akan secara otomatis muncul di bagian bawah halaman, tanpa Anda perlu memuat ulang halaman.

Ada fungsi lain untuk mekanisme tangkapan layar yang dapat Anda jelajahi di sini .

Dimungkinkan juga untuk menyimpan tangkapan layar secara lokal. Untuk itu Anda perlu menggunakan API sisi server GrabzIt. Untuk info lebih lanjut, periksa panduan terperinci di sini .

Jika Anda bersedia melakukannya di sisi server, ada opsi seperti PhantomJS , yang sekarang sudah tidak digunakan lagi. Cara terbaik untuk melakukannya adalah Headless Chrome dengan sesuatu seperti Puppeteer di Node.JS. Menangkap halaman web menggunakan Puppeteer akan sesederhana berikut ini:

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();
})();

Namun itu memerlukan chrome tanpa kepala untuk dapat berjalan di server Anda, yang memiliki beberapa dependensi dan mungkin tidak cocok pada lingkungan terbatas. (Juga, jika Anda tidak menggunakan Node.JS, Anda mungkin perlu menangani sendiri pemasangan / peluncuran browser.)

Jika Anda bersedia menggunakan layanan SaaS, ada banyak opsi seperti

• Mengemas kembali
• UrlBox
• Lapisan Screenshot

Pertanyaan ini sudah lama tetapi mungkin masih ada seseorang yang tertarik dengan jawaban canggih:

Anda bisa menggunakan getDisplayMedia:

https://github.com/ondras/browsershot

Mulai hari ini Apr 2020 GitHub library html2Canvas https://github.com/niklasvh/html2canvas

GitHub 20K bintang | Azure pipeles: Berhasil | Unduhan 1.3M / bulan |

kutipan: " JavaScript HTML renderer Script memungkinkan Anda untuk mengambil" tangkapan layar "dari halaman web atau bagian dari itu, langsung di browser pengguna . Screenshot didasarkan pada DOM dan karenanya mungkin tidak 100% akurat untuk representasi nyata seperti itu tidak membuat tangkapan layar yang sebenarnya, tetapi membuat tangkapan layar berdasarkan informasi yang tersedia di halaman.

Saya membuat fungsi sederhana yang menggunakan rasterizeHTML untuk membangun svg dan / atau gambar dengan konten halaman.

Saksikan berikut ini :

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