Chụp ảnh màn hình của một trang web với JavaScript?

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

Tôi không quá quan tâm đến các vấn đề bảo mật của trình duyệt. vv như việc thực hiện sẽ dành cho HTA . Nhưng nó có thể không?

Tôi đã thực hiện điều này cho HTA bằng cách sử dụng điều khiển ActiveX. Thật dễ dàng để xây dựng điều khiển trong VB6 để chụp ảnh màn hình. Tôi đã phải sử dụng lệnh 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ỉ đưa bạn đến tận cửa sổ vào bảng 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 các nút DOM đến máy chủ, sau đó tạo phía máy chủ chụp màn hình.

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

Một giải pháp khả thi khác mà tôi đã khám phá là http://www.ph Phantomjs.org/ , cho phép một người rất dễ dàng chụp ảnh màn hình của các trang và nhiều 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 còn hiệu lực 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.

Pounder nếu điều này có thể thực hiện được bằng cách đặt toàn bộ các thành phần cơ thể vào một canvase sau đó sử dụng canvas2image?

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

Một cách có thể để làm điều này, nếu chạy trên windows và cài đặt .NET, 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ủ.

Đâ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ể được đề cập.

Snapsie là một đối tượng ActiveX , mã nguồn mở 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 màn hình và tải tệp lên máy chủ với JavaScript. Hạn chế: nó cần phải đăng ký tệp DLL tại máy khách và chỉ hoạt động với Internet Explorer.

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

Các SnapEngage sử dụng một applet Java (1.5+) để thực hiện một ảnh chụp màn hình trình duyệt. AFAIK, java.awt.Robotnên thực hiện công việc - người dùng chỉ cần cho phép các applet thực hiện nó (một lần).

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

• Câu hỏi chồng chéo Mã JavaScript để chụp ảnh màn hình của trang web mà không cần sử dụng ActiveX
• Bài đăng trên blog Cách SnapABug hoạt động - và những gì họ nên làm

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 sàng lọc. Tôi đã quên tên là gì, nhưng trên Windows Vista có một công cụ để chụp ảnh màn hình. Bạn thậm chí không cần cài đặt thêm cho nó.

Đối với tự động - nó hoàn toàn phụ thuộc vào công cụ bạn sử dụng. Nếu nó có 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à người dùng khô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 ở trên Windows và (có thể) biết rất rõ môi trường của bạn (ví dụ: HĐH và phiên bản).

Tôi thấy rằng dom-to-image đã làm rất tốt (tốt hơn nhiều so với html2canvas). Xem câu hỏi và câu trả lời sau: https://stackoverflow.com/a/32776834/207981

Câu hỏi này hỏi về việc gửi lại cho máy chủ, điều này là có thể, nhưng nếu bạn đang muốn tải xuống (các) hình ảnh, bạn sẽ muốn kết hợp nó với FileSaver.js và nếu bạn muốn tải xuống một zip với nhiều tập tin hình ảnh tất cả phía máy khách được tạo ra hãy xem jszip .

Một giải pháp tuyệt vời để chụp ảnh màn hình trong Javascript là 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 dùng thử, đầu tiên, bạn nên lấy khóa ứng dụng ủy quyền + bí mật và SDK miễn phí

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 các thông số khác nhau . 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 đợi một lát và hình ảnh sẽ tự động xuất hiện ở dưới cùng của trang, mà bạn không cần phải 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á ở đây .

Cũng có thể lưu ảnh chụp màn hình cục bộ. Vì vậy, bạn sẽ cần sử dụng API phía máy chủ GrabzIt. Để biết thêm thông tin kiểm tra hướng dẫn chi tiết ở đây .

Nếu bạn sẵn sàng làm điều đó ở phía máy chủ, có những lựa chọn như PhantomJS , hiện không được chấp nhận. Cách tốt nhất để đi là Chrome không đầu với thứ gì đó như Puppeteer trên Node.JS. Chụp một trang web bằng Puppeteer sẽ đơn giản như sau:

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

Tuy nhiên, nó đòi hỏi chrome không đầu để có thể chạy trên máy chủ của bạn, có một số phụ thuộc và có thể không phù hợp trên các môi trường bị hạn chế. (Ngoài ra, nếu bạn không sử dụng Node.JS, bạn có thể cần tự xử lý việc cài đặt / khởi chạy trình duyệt.)

Nếu bạn sẵn sàng sử dụng dịch vụ SaaS, có nhiều tùy chọn như

• Gói lại
• UrlBox
• Ảnh chụp màn hình Lớp

Câu hỏi này đã cũ nhưng có lẽ vẫn có người quan tâm đến câu trả lời hiện đại:

Bạn có thể sử dụng getDisplayMedia:

https://github.com/ondras/browsershot

Kể từ hôm nay tháng 4 năm 2020 thư viện GitHub html2Canvas https://github.com/niklasvh/html2canvas

GitHub 20K sao | Azure pipele: Thành công | Tải xuống 1,3M / tháng |

trích dẫn: " Trình kết xuất HTML JavaScript Tập lệnh cho phép bạn chụp" ảnh chụp màn hình "các trang web hoặc các phần của nó, trực tiếp trên trình duyệt của người dùng . Ảnh chụp màn hình dựa trên DOM và như vậy có thể không chính xác 100% so với biểu diễn thực như nó. không tạo ảnh chụp màn hình thực tế, nhưng xây dựng ảnh chụp màn hình dựa trên thông tin có sẵn trên trang.

Tôi đã thực hiện một chức năng đơn giản sử dụng rasterizeHTML để xây dựng một Svg và / hoặc một hình ảnh có nội dung trang.

Kiểm tra xem nó:

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