Chụp màn hình trang web có JavaScript?

Question

Có thể chụp ảnh màn hình trang web có JavaScript và sau đó gửi lại máy chủ không?

Tôi không quan tâm đến vấn đề bảo mật của trình duyệt. v.v. khi triển khai sẽ là HTA. Nhưng có thể không?

Answer 1

Tôi đã thực hiện việc này cho HTA bằng cách sử dụng điều khiển ActiveX. Nó đã được khá dễ dàng để xây dựng sự kiểm soát trong VB6 để chụp ảnh màn hình. Tôi đã phải sử dụng cuộc gọi API keybd_event vì SendKeys không thể thực hiện PrintScreen. Đây là mã cho điều đó:

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 

Điều đó chỉ giúp bạn đạt được cửa sổ vào khay nhớ tạm.

Một tùy chọn khác, nếu cửa sổ bạn muốn có ảnh chụp màn hình là HTA sẽ chỉ sử dụng XMLHTTPRequest để gửi nút DOM đến máy chủ, sau đó tạo ảnh chụp màn hình phía máy chủ.

Answer 2

Bạn có thể đạt được điều đó bằng cách sử dụng HTA và VBScript. Chỉ cần gọi một công cụ bên ngoài để thực hiện việc chia sẻ màn hình. Tôi quên tên là gì, nhưng trên Windows   Vista có một công cụ để làm ảnh chụp màn hình. Bạn thậm chí không cần cài đặt thêm cho nó.

Như là tự động - nó hoàn toàn phụ thuộc vào công cụ bạn sử dụng. Nếu nó có một API, tôi chắc chắn bạn có thể kích hoạt ảnh chụp màn hình và quá trình lưu thông qua một vài cuộc gọi Visual Basic mà không cần người dùng biết rằng bạn đã làm những gì bạn đã làm.

Vì bạn đã đề cập đến HTA, tôi giả sử bạn đang sử dụng Windows và (có thể) biết môi trường của bạn (ví dụ: OS và phiên bản) rất tốt.

Answer 3

Chúng tôi đã có yêu cầu tương tự về báo cáo lỗi. Vì nó là cho một kịch bản mạng nội bộ, chúng tôi đã có thể sử dụng trình duyệt addons (như Fireshot cho Firefox và IE Screenshot cho Internet   Explorer).

Answer 4

Đây có thể không phải là giải pháp lý tưởng cho bạn, nhưng nó vẫn có thể đáng nói đến.

Snapsie là nguồn mở, đối tượng ActiveX cho phép chụp và lưu ảnh chụp màn hình Internet Explorer. Khi tệp DLL được đăng ký trên máy khách, bạn sẽ có thể chụp ảnh chụp màn hình và tải tệp lên máy chủ bằng JavaScript. Nhược điểm: nó cần phải đăng ký tập tin DLL tại máy khách và chỉ làm việc với Internet   Explorer.

Answer 5

SnapEngage sử dụng Java applet (1,5+) để tạo ảnh chụp màn hình trình duyệt. AFAIK, java.awt.Robot nên thực hiện công việc - người dùng vừa cho phép applet làm điều đó (một lần).

Và tôi vừa tìm thấy một bài về nó:

• Stack Overflow câu hỏi JavaScript code to take a screenshot of a website without using ActiveX
• bài Blog How SnapABug works – and what they should do

Answer 6

Pounder của nếu điều này có thể làm bằng cách thiết lập toàn bộ các yếu tố cơ thể thành một canvase sau đó sử dụng canvas2image?

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

Answer 7

Một cách tốt để làm điều này, nếu chạy trên cửa sổ và có NET được cài đặt bạn có thể làm:

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

Và sau đó thông qua PHP bạn có thể làm:

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

Sau đó, bạn có ảnh chụp màn hình ở phía máy chủ.

Answer 8

Google đang thực hiện việc này trong Google+ và nhà phát triển tài năng đảo ngược thiết kế và sản xuất http://html2canvas.hertzen.com/. Để làm việc trong IE, bạn sẽ cần thư viện hỗ trợ canvas như http://excanvas.sourceforge.net/

Answer 9

Một giải pháp có thể khác mà tôi đã phát hiện là http://www.phantomjs.org/ cho phép người dùng dễ dàng chụp ảnh màn hình trang và hơn thế nữa. Trong khi các yêu cầu ban đầu của tôi cho câu hỏi này không hợp lệ nữa (công việc khác), tôi có thể sẽ tích hợp PhantomJS vào các dự án trong tương lai.

Answer 10

Một giải pháp tuyệt vời cho việc chụp màn hình trong Javascript là một trong số https://grabz.it.

Chúng có API ảnh chụp màn hình linh hoạt và dễ sử dụng, có thể được sử dụng bởi bất kỳ loại ứng dụng JS nào.

Nếu bạn muốn thử nó, lúc đầu bạn sẽ nhận được sự cho phép app key + secret và free SDK

Sau đó, trong ứng dụng của bạn, các bước thực hiện sẽ là:

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

Ảnh chụp màn hình có thể được tùy chỉnh với khác nhau parameters. Ví dụ:

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

Đó là tất cả. Sau đó, chỉ cần chờ một lát và hình ảnh sẽ tự động xuất hiện ở cuối trang, mà không cần tải lại trang.

Có các chức năng khác cho cơ chế chụp màn hình mà bạn có thể khám phá here.

Cũng có thể lưu ảnh chụp màn hình cục bộ. Cho rằng bạn sẽ cần phải sử dụng API phía máy chủ GrabzIt. Để biết thêm thông tin, hãy xem hướng dẫn chi tiết here.