Chuyển HTML sang PNG

Q: Ảnh PNG có thể có nền trong suốt thay vì nền trắng không?

Có. Hãy bật **Nền trong suốt**. Nền chỉ trong suốt ở những chỗ trang không đặt màu nền, nên trang web có màu nền body là trắng vẫn ra nền trắng. Cách này hiệu quả nhất với một thành phần hoặc huy hiệu riêng được tạo thành một file HTML.

Q: Làm sao để chỉ chụp phần đầu của một trang dài?

Chuyển **Hình ảnh** sang một ảnh cho mỗi trang và đặt **Trang** là Trang đầu tiên. Bạn sẽ nhận phần đầu có kích thước bằng một trang thay vì toàn bộ chiều dài. Để cắt ảnh đúng khung sau đó, hãy dùng công cụ [cắt ảnh](/crop-image).

Biến một trang web đã lưu, bản xuất dashboard hay bản mockup giao diện thành ảnh PNG, giữ nguyên từng chữ và từng đường kẻ mảnh đúng như trình duyệt đã hiển thị. Bạn chọn chiều rộng cửa sổ, bố cục sẽ dàn theo chiều rộng đó.

hoặc thả tệp DOC, DOCX, DOCM … vào đây ·

Tối đa 95 MB mỗi tệp· Tối đa 20 tệp· Xóa sau 30 phút

Đầu ra

Chuyển sang

Độ phân giải

Hình ảnh

Tệp được xử lý trên máy chủ của chúng tôi và bị xóa sau 30 phút.

Cách sử dụng công cụ này

1
Thêm file HTML
Tải lên các tệp .html, .htm hoặc .mhtml, tối đa 20 tệp mỗi lượt và 95 MB mỗi tệp. Trang được lưu thành một tệp MHTML duy nhất sẽ chứa sẵn cả hình ảnh và kiểu dáng bên trong.
2
Đặt chiều rộng cửa sổ
Chiều rộng trang HTML mặc định là 1280 px. Dùng 390 px cho bố cục điện thoại hoặc 1920 px cho bảng điều khiển rộng. Chuyển sang đã là PNG và Hình ảnh là một ảnh dài duy nhất.
3
Chuyển sang PNG
Nhấn Chuyển sang PNG →. Bật Nền trong suốt trong Cài đặt nâng cao nếu trang không có màu nền riêng và ảnh sẽ được đặt lên hình khác.

Trả lời

Làm thế nào để chuyển HTML sang PNG?

Tải lên tệp .html hoặc .mhtml, đặt Chiều rộng trang HTML theo màn hình bạn muốn mô phỏng, rồi nhấn Chuyển sang PNG →. Toàn bộ trang đã hiển thị sẽ được trả về dưới dạng một ảnh không mất dữ liệu.

Chuyển HTML sang PNG khi chữ và đường kẻ cần giữ sắc nét

PNG là khuyến nghị của W3C từ năm 1996 và dùng nén không mất dữ liệu, nên các cạnh khử răng cưa của chữ 14 px, đường viền bảng một điểm ảnh và mã nguồn tô màu cú pháp đều được giữ nguyên. Đó là lý do lập trình viên đính kèm ảnh PNG vào báo cáo lỗi và nhà thiết kế chia sẻ trong buổi duyệt: không ai phải băn khoăn một cạnh mờ là lỗi CSS hay do nén.

Cái giá phải trả là dung lượng. Trang gồm chữ và màu phẳng nén tốt; trang đầy ảnh chụp thì không. Nếu ảnh chụp sẽ gửi qua tin nhắn hoặc email, nơi dung lượng quan trọng hơn độ sắc nét, JPG cho file nhỏ hơn. Với tài liệu, ghi chú phát hành, bảng điều khiển và hướng dẫn phong cách, PNG là lựa chọn mặc định an toàn hơn.

Chiều rộng quyết định bố cục. HTML không có trang cố định: cùng một file hiển thị thiết kế ba cột trên máy tính ở 1280 px và một cột xếp chồng ở 390 px. Công cụ dàn trang theo Chiều rộng trang HTML bạn nhập, từ 320 đến 3840 px, rồi chụp từ dòng đầu tiên đến chân trang.

Chiều rộng chuyển HTML sang PNG cho các màn hình phổ biến

195:422

390 × 844 px

Điện thoại

Viewport CSS của nhiều mẫu iPhone gần đây; hiển thị bố cục di động

41:59

820 × 1180 px

Máy tính bảng

iPad Air ở chiều dọc; nhiều trang web đổi điểm ngắt quanh mức này

8:5

1280 × 800 px

Laptop

Chiều rộng mặc định của công cụ này

16:9

1920 × 1080 px

Màn hình Full HD

Bảng điều khiển và trang quản trị rộng

HTML

Ngôn ngữ đánh dấu siêu văn bản (HTML)

HTML là ngôn ngữ đánh dấu của web, được Tim Berners-Lee mô tả lần đầu vào đầu thập niên 1990 và hiện do WHATWG duy trì dưới dạng tiêu chuẩn sống. Tệp HTML mô tả tiêu đề, đoạn văn, liên kết, bảng, hình ảnh và biểu mẫu, còn phần trình bày thường đến từ CSS. Mọi trình duyệt đều hiển thị HTML, và định dạng này cũng được dùng cho mẫu email và trang web đã lưu. Một tệp HTML đơn lẻ thường phụ thuộc vào ảnh và stylesheet bên ngoài, nên có thể hiển thị lỗi khi bị di chuyển riêng.

Nén: –
Độ trong suốt: –
Ảnh động: –
Ra mắt: 1993 · Tim Berners-Lee; maintained by WHATWG

Công cụ chuyển đổi HTML

PNG

Ảnh PNG (Portable Network Graphics)

PNG là định dạng ảnh raster không mất dữ liệu (lossless), được PNG Development Group công bố năm 1996 và sau đó được W3C và ISO chuẩn hóa. Định dạng giữ nguyên chính xác từng điểm ảnh, hỗ trợ đầy đủ kênh alpha cho nền trong suốt và hiển thị văn bản, cạnh sắc nét và mảng màu phẳng mà không bị nhiễu. Độ chính xác đó khiến PNG lý tưởng cho ảnh chụp màn hình, logo, biểu tượng và đồ họa giao diện. Cái giá phải trả là dung lượng: ảnh chụp lưu dưới dạng PNG thường lớn gấp nhiều lần cùng bức ảnh ở dạng JPEG hoặc WebP. Mọi trình duyệt, hệ điều hành và trình chỉnh sửa đều mở được tệp PNG.

Nén: Không mất dữ liệu
Độ trong suốt: Có
Ảnh động: Không
Ra mắt: 1996 · PNG Development Group

Công cụ chuyển đổi PNG

Người ta chọn PNG khi trang chủ yếu là chữ, mã nguồn, bảng hoặc thành phần giao diện: điểm ảnh không mất dữ liệu giữ nét mảnh và chữ nhỏ sắc nét trong tài liệu, báo cáo lỗi và buổi duyệt thiết kế, nơi nhiễu của JPG sẽ lộ rõ.

Chuyển HTML sang PNG mà không mất kiểu dáng hay font chữ

Một file .html thông thường thường phụ thuộc vào những thứ lưu ở nơi khác: tệp kiểu dáng trong thư mục css, hình ảnh trên máy chủ gốc, font từ dịch vụ font. Khi thiếu chúng, trang quay về chữ không định dạng với kiểu chữ mặc định. Lưu trang trong Chrome hoặc Edge dưới dạng Webpage, Single File sẽ tạo ra tệp .mhtml giữ kiểu dáng và hình ảnh cùng nhau, đây là cách đáng tin cậy nhất để tải lên.

Font web cũng theo quy tắc tương tự. Font khai báo bằng @font-face chỉ được tải nếu truy cập được tệp của nó; font chỉ có trên máy của bạn sẽ bị thay bằng font tương tự. Nếu kiểu chữ chính xác quan trọng, hãy nhúng font hoặc kiểm tra kết quả trước khi gửi đi.

Chiều rộng cố định cũng giúp các bản chụp báo cáo hằng tuần có thể so sánh cạnh nhau. Khi kết quả cần giữ chữ chọn được để in, hãy dùng Chuyển HTML sang PDF.

Câu hỏi về chuyển HTML sang PNG

Chuyển HTML sang PNG có tốt hơn chụp màn hình bằng trình duyệt của tôi không?

Ảnh chụp màn hình từ trình duyệt chỉ lấy phần vừa với màn hình của bạn, trừ khi dùng công cụ chụp toàn trang, và chiều rộng phụ thuộc vào kích thước cửa sổ lúc đó. Ở đây chiều rộng là con số do bạn đặt, nên hai bản chụp cách nhau nhiều tuần vẫn khớp hoàn toàn, và toàn bộ trang được lấy từ dòng đầu tiên đến chân trang.

Vì sao ảnh PNG có dung lượng lớn gấp mấy lần cùng trang đó ở dạng JPG?

PNG lưu mọi điểm ảnh mà không mất dữ liệu. Chữ và màu phẳng nén tốt theo cách này, còn ảnh chụp, dải màu chuyển và poster video thì không, nên một trang đích nhiều ảnh có thể tạo ra file PNG lớn. Với những trang đó, Chuyển HTML sang JPG nhẹ hơn; còn với mã nguồn, biểu đồ và giao diện thì thường không đáng đánh đổi bằng độ mờ.

Ảnh PNG có thể có nền trong suốt thay vì nền trắng không?

Có. Hãy bật Nền trong suốt. Nền chỉ trong suốt ở những chỗ trang không đặt màu nền, nên trang web có màu nền body là trắng vẫn ra nền trắng. Cách này hiệu quả nhất với một thành phần hoặc huy hiệu riêng được tạo thành một file HTML.

Công cụ chuyển đổi có chạy JavaScript trên trang không?

Nội dung do script tạo ra khi mở trang có thể xuất hiện, nhưng những gì phải chờ nhấp chuột, cuộn trang hoặc đăng nhập thì không. Nếu biểu đồ hoặc bảng chỉ có sau khi tương tác, hãy mở trang trong trình duyệt, chờ tải xong rồi lưu thành một tệp duy nhất trước khi tải lên.

Làm sao để chỉ chụp phần đầu của một trang dài?

Chuyển Hình ảnh sang một ảnh cho mỗi trang và đặt Trang là Trang đầu tiên. Bạn sẽ nhận phần đầu có kích thước bằng một trang thay vì toàn bộ chiều dài. Để cắt ảnh đúng khung sau đó, hãy dùng công cụ cắt ảnh.