Làm cách nào tôi có thể chụp ảnh màn hình trình duyệt ở độ phân giải cao hơn trình duyệt của tôi hỗ trợ?


97

Tôi cần chụp ảnh màn hình của một trang web vì nó sẽ xuất hiện trên màn hình độ phân giải rất cao ... giả sử 4000x3000 pixel. Màn hình máy tính xách tay của tôi có độ phân giải 1400x768. Về cơ bản, tôi cần mô phỏng việc có độ phân giải màn hình cao hơn nhiều so với màn hình và card màn hình thực sự hỗ trợ. Tôi muốn ảnh chụp màn hình của trang web trông giống như khi bạn nhấn CTRL MINUS (thu nhỏ) trong Firefox liên tục, nhưng không bị mất pixel do tỷ lệ. Tôi có thể làm cái này như thế nào? Có cách nào để sử dụng phần mềm máy ảo để mô phỏng màn hình độ phân giải siêu cao không? Nếu không, có cách nào để mở một cửa sổ trình duyệt lớn hơn màn hình, và sau đó chụp nội dung của nó dưới dạng PNG không? Bất cứ điều gì khác có thể làm việc?


Bạn có thể thử chuyển đổi cài đặt dpi của HĐH. Tôi tin vào windows 8 nó yêu cầu thay đổi giá trị đăng ký. Trong khi điều này cung cấp cho bạn một máy tính để bàn khổng lồ, tất nhiên các phông chữ cũng có tỷ lệ để bạn phải căng mắt hơn để đọc văn bản.
jiggunjer

Câu trả lời:


104

Bạn có thể làm điều đó với Firefox và 2 tiện ích mở rộng: Web DeveloperFireShot .

Khi cả hai tiện ích mở rộng được cài đặt, hãy chuyển đến Công cụ - Nhà phát triển web - Thay đổi kích thước - Chỉnh sửa thay đổi kích thước Kích thước ....

Thêm kích thước mới, 4000 x 3000. kiểm tra "Thay đổi kích thước khung nhìn" nếu bạn chỉ muốn nội dung trang là 4000x3000. Nếu bạn không kiểm tra nó, cửa sổ hoàn chỉnh của Firefox (với thanh công cụ, menu, ...) sẽ được đặt thành kích thước này.

văn bản thay thế

Khi ở kích thước chính xác, hãy chuyển đến Công cụ - FireShot - Chụp toàn bộ trang và .... Chọn một hành động, như Save chẳng hạn. Nó sẽ lưu nội dung trang đã được Nhà phát triển web đặt thành kích thước mong muốn.

văn bản thay thế


@snark - Chà, gần như đã làm việc. Nhưng có vẻ như tiện ích mở rộng Nhà phát triển web sẽ không cho phép tôi làm cho chế độ xem lớn hơn màn hình của tôi ...?
Joshua Carmody

@Joshua: nó hoạt động tốt với tôi. Tôi đã kiểm tra trước khi đăng câu trả lời của tôi. Tôi đã thực hiện một thử nghiệm mới nhưng không thể tìm thấy nơi lưu trữ một hình ảnh lớn như vậy
Snark

1
Cập nhật: Vấn đề không thể tạo ra cửa sổ lớn hơn màn hình dường như là một hạn chế do chính HĐH Windows áp đặt.
Joshua Carmody

@snark - Bạn có phiền nếu tôi hỏi bạn đang chạy HĐH nào không?
Joshua Carmody

2
@snark - À. Có lẽ đó là một thứ Windows XP (đó là những gì tôi bị mắc kẹt ở đây). Trong mọi trường hợp, tôi có thể làm việc xung quanh nó bằng cách sử dụng FireBug để chèn DIV với style = "width: 4000px; height: 3000px;" vào mã HTML và sau đó sử dụng FireShot, vì vậy tôi vẫn tốt. Cảm ơn bạn đã chỉ ra FireShot. Điều đó làm cho cuộc sống của tôi dễ dàng hơn rất nhiều. Tôi đã cuộn xung quanh và chụp ảnh màn hình hơn là ghép chúng bằng tay trước đó. Đó là một SƠN CHÍNH.
Joshua Carmody

19

Trong khi đó (trong ít nhất một hoặc hai năm - kể từ phiên bản 15, nếu tôi không nhầm), Firefox hỗ trợ điều này trực tiếp thông qua các công cụ dành cho nhà phát triển tích hợp.

Nhấn CtrlShift Mhoặc chọn Chế độ xem thiết kế đáp ứng từ biểu tượng Công cụ dành cho nhà phát triển trong menu sọc.

Điều đó sẽ đưa ra chế độ xem này, cho phép bạn chọn từ một tập hợp các cài đặt trước cũng như nhập bất kỳ độ phân giải mong muốn nào trực tiếp lưu ảnh chụp màn hình ở định dạng PNG vào đĩa chỉ bằng một cú nhấp chuột:

nhập mô tả hình ảnh ở đây


1
Nút chụp màn hình có thể không hoạt động chính xác khi bạn mô phỏng hình ảnh hi-dpi bằng cách phóng to. Trong trường hợp đó, hãy mở thanh công cụ dành cho nhà phát triển Shift+ F2và dán screenshot --clipboard --fullpagevào "bảng điều khiển". Điều này khác với bảng điều khiển JS thông thường.
lưỡi dao

Điều này cũng hoạt động với chế độ thử nghiệm thiết bị bảng điều khiển dành cho nhà phát triển chrome. Tùy chọn ảnh chụp màn hình nằm trong menu thả xuống ở trên cùng bên phải.
Tully

Thật không may, điều này dường như không hoạt động trong Chrome; Tôi vừa thử chụp ảnh màn hình toàn màn hình trong Chrome của Microsoft Flow (vì Flow không hiển thị đúng trong Firefox, mặc dù phương pháp chụp màn hình toàn màn hình của Firefox hoạt động) và nó chỉ chụp ảnh màn hình của không gian đang xem ... Nói cách khác, không có sự khác biệt giữa các tùy chọn "chụp ảnh màn hình" và "chụp ảnh màn hình kích thước đầy đủ" của Chrome ... bummer.
TylerH


6

Tôi sử dụng tiện ích bổ sung FireFox được gọi là Bắt cóc để tạo toàn bộ ảnh .png của trang web. Thật không may, tiện ích bổ sung chưa được cập nhật để tương thích với FireFox 3.6.

Có vẻ như ScreenGrab sẽ làm điều tương tự.


5

Firefox 16 trở đi hiện có khả năng kiểm soát kích thước của khung nhìn với bảng điều khiển dành cho nhà phát triển:

Mở công cụ ... Nhà phát triển web ... Thanh công cụ dành cho nhà phát triển

Thay đổi kích thước khung nhìn bằng lệnh này:

resize to 5000 5000

Chụp màn hình bằng lệnh này:

screenshot output.png

4

Chà, với Linux (hoặc thiết lập Hệ thống Cửa sổ X của bất kỳ hương vị nào), bạn có thể đặt máy tính để bàn ảo lớn hơn màn hình của mình. Bạn cuộn quanh nó, nhưng tôi nghĩ bạn có thể tối đa hóa trình duyệt của mình và chụp màn hình.

Tôi không biết có cách nào để làm điều đó trong Windows hoặc OS X.


3

Tôi thấy việc sử dụng các dịch vụ trực tuyến như thumbalizr dễ dàng hơn so với cài đặt plugin trình duyệt, nếu bạn không cần phải làm điều này thường xuyên.


1

Trong Chrome có các tiện ích mở rộng như:

Có một ảnh chụp màn hình trang web khác nhưng tôi không đủ uy tín để xuất bản nhiều hơn hai liên kết

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.