Phần Màn hình của hệ thống Google+ Feedback hoạt động như thế nào?

Question

Tôi không có lời mời nhưng nó được sử dụng trên TWIG. Nó hoạt động như sau:

Bạn có thể chọn một phần để làm nổi bật, các bộ phận bị mất điện. Trong bước tiếp theo, ảnh chụp màn hình được tạo (??) và bạn có thể xem trước thông tin trình duyệt khác được truyền đi.

Vậy Google tạo ảnh chụp màn hình đó như thế nào? nó có gửi DOM được sửa đổi hoàn chỉnh để xử lý phía máy chủ không? hoặc ma thuật đen khác có liên quan gì ở đây?

Answer 1

Điểm nổi bật và màu đen chỉ là HTML divs. Ảnh chụp màn hình của trang là canvas.

Tôi đã sử dụng công cụ dành cho nhà phát triển của Chrome để xác nhận điều này. Nó thậm chí hoạt động trong Firefox và Internet Explorer, do đó, nó chắc chắn không chỉ là một điều Chrome.

Dưới đây là một ảnh chụp màn hình của các công cụ nhà phát triển với một trong những yếu tố nổi bật đánh dấu để chứng minh rằng nó là một div:

Có một canvas:

Khi hộp thoại nói điều này:

Vui lòng chờ trong khi chúng tôi chụp nhanh trang để bạn có thể đánh dấu các khu vực có liên quan.

Có vẻ như đang hiển thị ảnh chụp màn hình của trang trên máy chủ (vì có yêu cầu trong tab Mạng và nó phải thực hiện với ảnh chụp nhanh và phản hồi theo các biến trong URL yêu cầu) và sau đó nó đặt ảnh chụp màn hình trên trang.

Sau khi bạn nhấp vào "Tiếp theo", một hộp thoại khác mở ra với tất cả thông tin và hiển thị ảnh chụp màn hình cuối cùng với điểm nổi bật và màu đen của bạn trong đó.

Tôi không chắc chắn làm thế nào họ đã làm "Nổi bật Text" phần mặc dù.

Answer 2

không biết tính năng này, nhưng cách bạn mô tả nó; không phải là tính năng đa nền tảng và không có trong thông số kỹ thuật. Bạn đang tìm kiếm drawWindow của phần tử canvas. Sau đó, họ căn cứ64/urlencode canvas và gửi nó đến máy chủ. Có thể tưởng tượng họ quay lại với ma thuật đen đen cho IE6 .. hoặc họ chỉ làm cho google + một trình duyệt html5 duy nhất ..

Answer 3

Nó chỉ có thể gửi toàn bộ cây DOM lên máy chủ và đưa nó vào đầu kia.