Sử dụng HTML5/Canvas/JavaScript để chụp ảnh màn hình trong trình duyệt

Question

"Báo cáo lỗi" hoặc "Công cụ phản hồi" của Google cho phép bạn chọn khu vực cửa sổ trình duyệt của mình để tạo ảnh chụp màn hình được gửi cùng với phản hồi của bạn về lỗi.

_{Ảnh chụp màn hình của Jason Small, được đăng trong duplicate question.}

Họ làm như thế nào? API phản hồi JavaScript của Google được tải từ here và their overview of the feedback module sẽ chứng minh khả năng chụp màn hình.

Answer 1

JavaScript có thể đọc DOM và hiển thị đại diện khá chính xác bằng cách sử dụng canvas. Tôi đã làm việc trên một kịch bản mà chuyển đổi html thành một hình ảnh canvas. Quyết định ngày hôm nay để thực hiện nó để gửi phản hồi như bạn mô tả.

Tập lệnh cho phép bạn tạo biểu mẫu phản hồi bao gồm ảnh chụp màn hình, được tạo trên trình duyệt của khách hàng, cùng với biểu mẫu. Ảnh chụp màn hình dựa trên DOM và do đó có thể không chính xác 100% đối với biểu diễn thực vì nó không tạo ảnh chụp màn hình thực, 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.

Nó không yêu cầu bất kỳ hiển thị nào từ máy chủ, vì toàn bộ hình ảnh được tạo trên trình duyệt của khách hàng. Bản thân HTML2Canvas chính nó vẫn ở trạng thái rất thử nghiệm, vì nó không phân tích gần như nhiều thuộc tính CSS3 mà tôi muốn nó, cũng không có bất kỳ sự hỗ trợ nào để tải các hình ảnh CORS ngay cả khi có sẵn proxy.

Tính tương thích của trình duyệt vẫn còn khá hạn chế (không phải vì không thể hỗ trợ nhiều hơn, chỉ không có thời gian để hỗ trợ trình duyệt chéo nhiều hơn).

Để biết thêm thông tin, có một cái nhìn vào các ví dụ ở đây:

http://hertzen.com/experiments/jsfeedback/

chỉnh sửa Kịch bản html2canvas bây giờ đã có riêng here và một số examples here.

chỉnh sửa 2 Một xác nhận rằng Google sử dụng một phương pháp rất giống nhau, (trong thực tế dựa trên các tài liệu sự khác biệt lớn duy nhất là phương pháp traversing/vẽ async của họ) có thể được tìm thấy trong bài trình bày này bằng cách Elliott Sprehn từ nhóm Google Feedback: http://www.elliottsprehn.com/preso/fluentconf/

Answer 2

ứng dụng web của bạn bây giờ có thể mất một ảnh chụp màn hình 'mẹ đẻ' của toàn bộ máy tính để bàn của khách hàng sử dụng getUserMedia():

hãy nhìn vào ví dụ này:

https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/

Khách hàng sẽ phải sử dụng chrome (hiện tại) và sẽ cần bật hỗ trợ chụp màn hình trong chrome: // flags.