Công cụ chuyển HTML thành ảnh
Dán một đoạn HTML. Script, biểu mẫu, khung và trình xử lý sự kiện sẽ bị loại bỏ trước khi kết xuất.
HTML và ảnh được tạo vẫn nằm trong trình duyệt này. Ảnh, phông chữ hoặc stylesheet từ xa sẽ được tải từ URL nguồn. Hãy nhúng dữ liệu vào HTML nếu bạn cần kết xuất hoàn toàn ngoại tuyến.
Chuyển một đoạn HTML và CSS thành PNG hoặc JPG kích thước cố định mà không tải mã nguồn hay ảnh lên Hyperion. Chọn mỗi cạnh từ 64 đến 1.920 px và tỷ lệ từ 1x đến 3x, sau đó xem trước và tải kết quả ngay trong trình duyệt.
Cách kết xuất HTML thành ảnh
-
1
Dán mã
Nhập một đoạn hoặc tài liệu HTML. Công cụ hỗ trợ CSS nội tuyến và quy tắc `<style>`; script, biểu mẫu, khung và trình xử lý sự kiện sẽ bị loại bỏ.
-
2
Đặt khung ảnh
Chọn PNG hoặc JPG, nhập chiều rộng, chiều cao và tỷ lệ từ 1x đến 3x.
-
3
Kết xuất bản xem trước
Trình duyệt bố trí mã đã làm sạch trong một khung cách ly có kích thước cố định.
-
4
Tải xuống máy
Lưu PNG hoặc JPG trực tiếp. Tệp được tạo không được tải lên Hyperion.
Những gì bộ kết xuất trình duyệt hỗ trợ
Công cụ dùng bộ máy bố cục của trình duyệt. HTML thông thường, CSS nội tuyến, quy tắc <style>, Flexbox, Grid, chuyển màu, đổ bóng, SVG nhúng và phông chữ đã cài có thể xuất hiện trong kết quả. Đầu ra là ảnh raster tĩnh, không phải bản sao trang web có thể tương tác.
Quy tắc khung ảnh và đầu ra
| Thiết lập | Phạm vi hỗ trợ | Cách hoạt động |
|---|---|---|
| Chiều rộng | 64 đến 1.920 px | Chiều rộng CSS chính xác của khung |
| Chiều cao | 64 đến 1.920 px | Chiều cao CSS chính xác; nội dung tràn bị cắt |
| Tỷ lệ | 1x đến 3x | Tăng độ phân giải mà không đổi bố cục |
| PNG | Ảnh raster kích thước cố định | Giữ vùng trong suốt |
| JPG | Ảnh raster kích thước cố định | Dùng chất lượng 92% và nền trắng |
Đầu ra được giới hạn ở 16 megapixel để bảo vệ bộ nhớ trình duyệt. Nếu kích thước và tỷ lệ vượt giới hạn, công cụ hạ xuống mức 0,5x cao nhất còn an toàn. Mã nguồn HTML dài tối đa 100.000 ký tự.
Quyền riêng tư và tài nguyên từ xa
HTML và ảnh dữ liệu được tạo vẫn nằm trong trình duyệt hiện tại. Ở chế độ từng bước, bộ nhớ phiên của thẻ này giữ thiết lập để chuyển sang bước tiếp theo; bắt đầu lại sẽ xóa dữ liệu đó. Công cụ không gửi mã hay ảnh đến Hyperion.
URL bên ngoài là ngoại lệ. Ảnh, phông chữ web và stylesheet từ xa được yêu cầu từ máy chủ nguồn, nơi có thể thấy yêu cầu này. CORS hoặc kiểm soát truy cập cũng có thể khiến chúng không tải được. Hãy nhúng ảnh và phông chữ dưới dạng URL dữ liệu, đồng thời dùng CSS nội tuyến nếu cần kết xuất hoàn toàn ngoại tuyến.
Giới hạn về an toàn và độ trung thực
Script, biểu mẫu, khung lồng nhau, đối tượng nhúng và thuộc tính sự kiện bị loại bỏ trước khi chụp. Bản xem trước không còn tương tác, nhưng quá trình này không thay thế một bộ làm sạch HTML đa dụng cho nội dung sẽ đăng ở nơi khác. Tiện ích JavaScript không chạy, trạng thái video và canvas không được bảo đảm, hoạt ảnh trở thành một khung hình tĩnh và CSS riêng của trình duyệt có thể khác trên bộ máy khác.
Câu hỏi thường gặp
Có. Bộ kết xuất lấy các quy tắc <style> và liên kết stylesheet được hỗ trợ từ head rồi chụp nội dung body. Script, siêu dữ liệu, biểu mẫu, khung và trình xử lý chủ động bị loại bỏ, vì vậy kết quả không phải trang có thể điều hướng.
Máy chủ nguồn có thể chặn dùng chéo miền, yêu cầu đăng nhập hoặc phản hồi quá chậm. Hãy dùng URL truy cập được và cho phép CORS, hoặc nhúng tài nguyên dưới dạng URL dữ liệu.
PNG giữ các điểm ảnh trong suốt. JPG dùng nền trắng và chất lượng cố định 92%, thường nhỏ hơn với ảnh chụp. Công cụ không xuất WebP và không có điều khiển chất lượng riêng.
Công cụ giới hạn đầu ra ở 16 megapixel. Với khung ảnh lớn, hệ thống tự chọn mức 0,5x cao nhất còn an toàn để tránh làm cạn bộ nhớ trình duyệt.
Công cụ liên quan
Bảng tham chiếu ASCII
Bảng ASCII đầy đủ từ 0 đến 127 với giá trị thập phân, thập lục phân, bát phân, nhị phân và ký hiệu tham chiếu ký tự số HTML, gồm NUL, LF và DEL.
Bộ chuyển đổi Base64 sang Hex
Chuyển chuỗi Base64 thành các byte nền tảng được biểu diễn dưới dạng hệ thập lục phân (hex). Hữu ích để kiểm tra token, khóa, chứng chỉ và JWT.
Trình tạo bảng màu ngẫu nhiên
Tạo bảng màu ngẫu nhiên từ 2 đến 15 mẫu màu, chọn phong cách rực rỡ, pastel, dịu hoặc tối, rồi sao chép mã HEX hoặc biến CSS.
Trình tạo bảng màu
Tạo bảng màu đơn sắc, tương đồng, bổ túc, bộ ba hoặc bộ bốn từ màu HEX gốc và xuất các biến CSS sẵn sàng sao chép.
Trình rút gọn đại số Boolean
Rút gọn biểu thức Boolean bằng Karnaugh maps và thuật toán Quine-McCluskey. Hiển thị từng bước tối thiểu hóa và dạng SOP/POS cuối cùng.
Bộ chọn màu HEX
Chọn hoặc nhập màu HEX để xem RGB, HSL, CMYK ước tính, độ chói tương đối và tương phản với trắng và đen.