Chuyển văn bản thành hình ảnh miễn phí

Tại sao bạn cần chuyển văn bản thành hình ảnh

Văn bản và hình ảnh di chuyển qua internet theo những cách rất khác nhau. Văn bản được định dạng lại bởi mọi nền tảng chạm vào nó, font chuyển, ngắt dòng thay đổi, thụt lề sụp đổ, ký tự đặc biệt bị méo. Hình ảnh là nguyên tử: mỗi pixel đều sống sót. Vì vậy bất cứ khi nào định dạng quan trọng, chuyển văn bản thành hình ảnh là cách đơn giản nhất để đảm bảo những gì bạn viết là những gì mọi người nhìn thấy. Các kịch bản phổ biến: các đoạn code chia sẻ trên Twitter/X (loại bỏ thụt lề và ngắt dòng khỏi các bài đăng văn bản nhưng vui vẻ render hình ảnh); đồ họa trích dẫn cho Instagram (chú thích Instagram không cho phép định dạng font nào, mỗi bài đăng tiền tệ học thẩm mỹ là một hình ảnh văn bản); chữ ký và biểu ngữ diễn đàn trên phpBB hoặc Discourse nơi hình ảnh tải lên sống sót nhưng kiểu chữ kỳ lạ trong BBCode không; screenshot-không-UI khi bạn muốn chia sẻ một mẩu văn bản như thể bạn đã chụp screenshot nhưng không có chrome trình duyệt xung quanh; hình ảnh nút tùy chỉnh cho các trang web kiểu cũ hoặc email HTML nơi giấy phép webfont là một vấn đề; các lớp phủ WhatsApp Status và Snapchat nơi văn bản hình ảnh được tạo kiểu đọc tốt hơn các công cụ chú thích của chính nền tảng; chữ ký email cho các client loại bỏ định dạng phong phú (các phiên bản Outlook cũ là khét tiếng, chữ ký dựa trên hình ảnh là giải pháp). Sợi chỉ chung: khi bạn không thể tin tưởng đích sẽ render văn bản theo cách bạn muốn, hãy render nó như một hình ảnh trước.

Cách Canvas API render văn bản

Phần tử HTML <canvas> phơi bày một bối cảnh render 2D xử lý văn bản qua ba phương thức cốt lõi. ctx.font chấp nhận cùng cú pháp viết tắt như CSS ("bold 32px Helvetica, Arial, sans-serif"), trọng lượng font, kích thước font và họ font trong một chuỗi. ctx.fillStyle đặt màu (bất kỳ giá trị màu CSS nào: hex, rgb, hsl, có tên). ctx.fillText(text, x, y) render văn bản ở vị trí đã cho sử dụng font và fill hiện tại. Hai phương thức hỗ trợ quan trọng: ctx.measureText(text) trả về một đối tượng TextMetrics chứa width đã render và (trong các trình duyệt hiện đại) actualBoundingBoxAscent và actualBoundingBoxDescent cho tính toán hộp bao dọc; ctx.textAlign kiểm soát căn chỉnh ngang (left, right, center, start, end) tương đối với tọa độ x; ctx.textBaseline kiểm soát căn chỉnh dọc (top, middle, alphabetic, hanging, ideographic) tương đối với tọa độ y. Baseline alphabetic mặc định đặt tọa độ y ở baseline của các chữ thường, đó là quy ước về kiểu chữ nhưng phản trực giác cho bố cục, hầu hết mã render chuyển sang top để định vị y có thể dự đoán được. Văn bản nhiều dòng không tự động ngắt: fillText render một dòng ở một vị trí duy nhất. Việc ngắt thủ công theo từng từ sử dụng measureText trong một vòng lặp là mẫu chuẩn.

Tại sao chỉ có bảy font

Bảy lựa chọn font ở đây, Arial, Helvetica, Georgia, Times New Roman, Courier New, Verdana, Impact, là các "font an toàn cho web" kinh điển được giao theo mặc định trên cơ bản mọi cài đặt máy tính để bàn Windows, macOS và hầu hết Linux. Danh sách phát triển từ dự án Core Fonts for the Web của Microsoft (1996-2002), đã phân phối Impact, Verdana, Georgia, Trebuchet MS và những thứ khác như các bản tải xuống TrueType miễn phí để gieo tính nhất quán đa nền tảng. Chỉ chọn các font hệ thống có nghĩa là hình ảnh được render trông giống nhau bất kể thiết bị nào tạo ra nó; sử dụng Google Font sẽ yêu cầu tải file font trước qua Promise document.fonts.ready trước khi render văn bản Canvas nào, một con đường khả thi nhưng nặng hơn. Đối với các công cụ có công việc cụ thể là "kiểu chữ ưa thích", tải font tùy chỉnh là điều cần thiết. Đối với một trình tạo text-to-image tiện ích nhanh, bảy lựa chọn an toàn web bao phủ cơ bản mọi register kiểu chữ phổ biến: Arial / Helvetica (sans-serif trung tính, con ngựa làm việc), Verdana (sans-serif x-height lớn được thiết kế để đọc trên màn hình), Georgia / Times New Roman (serif cho thanh lịch / trang trọng), Courier New (monospace cho nội dung giống mã), Impact (face hiển thị in đậm cô đọng kinh điển-meme). Đối với kiểu chữ cố ý kỳ quặc hoặc có thương hiệu, hãy sử dụng một công cụ chuyên dụng tải các font tùy chỉnh.

Độ sắc nét High-DPI / Retina

Một triển khai Canvas ngây thơ tạo ra đầu ra mờ trên màn hình mật độ cao. Điện thoại, máy tính bảng và laptop "Retina" hiện đại có window.devicePixelRatio là 2 (đôi khi 3), có nghĩa là mỗi pixel CSS ánh xạ tới 2 (hoặc 3) pixel vật lý. Một Canvas được render ở kích thước CSS của nó chỉ có 1 pixel chi tiết trên mỗi pixel CSS, được kéo căng 2 lần cho hiển thị, tạo ra sự mềm mại có thể nhìn thấy. Cách khắc phục là đặt kích thước backing-store của Canvas (canvas.width và canvas.height) thành kích thước CSS nhân với devicePixelRatio, sau đó sử dụng CSS để khóa kích thước hiển thị về kích thước CSS gốc, rồi gọi ctx.scale(devicePixelRatio, devicePixelRatio) để tất cả các thao tác vẽ tiếp theo sử dụng hệ tọa độ CSS gốc. Công cụ này áp dụng tự động bản sửa lỗi high-DPI, PNG được tải xuống sắc nét ở độ phân giải retina và in sạch ở kích thước tài liệu điển hình.

Đoạn mã như hình ảnh, hãy sử dụng Carbon thay thế

Để chia sẻ các đoạn mã như hình ảnh, trường hợp sử dụng đơn lẻ phổ biến nhất cho "text-to-image", có các công cụ chuyên dụng xử lý sorot cú pháp, phát hiện ngôn ngữ, các preset chủ đề và trang trí chrome cửa sổ tốt hơn nhiều so với một trình tạo text-to-image chung có thể. Carbon (Dawn Labs, ra mắt 2017, carbon.now.sh) là lựa chọn kinh điển: dán mã, chọn ngôn ngữ và chủ đề, thả đầu ra được render cho các bài đăng Twitter/Slack/blog. Ray.so (Raycast, ra mắt 2022) là đối thủ Carbon hiện đại với thẩm mỹ mặc định sạch hơn một chút và xử lý chủ đề tối tốt hơn. Codeimg.io, Chalk.ist, Snappify và CodeSnap cạnh tranh trong cùng ngách với nhiều bộ phân biệt khác nhau (mẫu, bố cục đa cửa sổ, nền có thương hiệu). Đối với văn xuôi đơn giản, tiêu đề, trích dẫn và chữ ký, trình tạo này là hình dạng đúng; đối với mã, hãy sử dụng Carbon.

PNG vs JPEG vs WebP cho hình ảnh văn bản

Đối với hình ảnh chủ yếu chứa văn bản (đó là những gì công cụ này tạo ra), PNG hầu như luôn là định dạng đúng. Văn bản có các cạnh cứng và các vùng màu phẳng lớn, chính xác những gì JPEG xử lý kém nhất. Biến đổi cosin rời rạc của JPEG làm nhòe các cạnh sắc với các artefact rung ("tiếng ồn muỗi") trông đặc biệt tệ xung quanh hình thức chữ. Nén DEFLATE không tổn thất của PNG xử lý hiệu quả các vùng màu phẳng và giữ văn bản sắc nét ở bất kỳ mức zoom nào. PNG cũng hỗ trợ độ trong suốt, hữu ích khi phủ văn bản lên hình ảnh hiện có sau này. JPEG chỉ có ý nghĩa cho hình ảnh văn bản với nền chụp ảnh (một trích dẫn trên đỉnh một bức ảnh phong cảnh, ví dụ) nơi nội dung chụp ảnh chiếm ưu thế kích thước file. WebP (chế độ không tổn thất) cho chất lượng tương đương PNG ở kích thước file thường nhỏ hơn 26% và được hỗ trợ trong 97% các trình duyệt tính đến năm 2026. Công cụ này xuất PNG để tương thích tối đa, thả vào bất kỳ ứng dụng nào mà không lo về hỗ trợ định dạng.

Lưu ý về khả năng tiếp cận: Văn bản-là-hình-ảnh mất khả năng tìm kiếm

Bất cứ khi nào bạn biến văn bản thành một hình ảnh, bạn mất ba thứ: khả năng tiếp cận trình đọc màn hình (người dùng khiếm thị sử dụng công nghệ trợ giúp không thể đọc văn bản bên trong hình ảnh mà không có OCR), khả năng tìm kiếm (công cụ tìm kiếm và công cụ tìm kiếm văn bản lập chỉ mục chú thích xung quanh hoặc văn bản alt nhưng không lập chỉ mục nội dung hình ảnh chính nó), và sao chép-dán (người dùng không thể chọn và sao chép văn bản từ một PNG). Đối với các bài đăng xã hội nơi sự đánh đổi hình ảnh-là-văn-bản là cố ý, điều này là tốt. Đối với bất cứ thứ gì cần được phát hiện, có thể lập chỉ mục hoặc có thể truy cập được, hãy ưu tiên văn bản HTML thực được tạo kiểu với CSS và dành phương pháp hình ảnh-văn-bản cho các bối cảnh nơi nền tảng buộc tay bạn. Hướng dẫn WCAG khuyến nghị cung cấp văn bản alt có ý nghĩa cho bất kỳ văn bản-là-hình-ảnh nào, tối thiểu, chép văn bản nhìn thấy được vào thuộc tính alt để trình đọc màn hình có thể thông báo nó.

Quyền riêng tư: Tại sao chỉ-trình-duyệt quan trọng ở đây

Văn bản bạn biến thành hình ảnh chính xác là loại nội dung mà quyền riêng tư quan trọng: bản nháp các bài đăng xã hội, biên bản nội bộ, screenshot-văn-bản từ tài liệu bí mật, trích dẫn từ tác phẩm chưa được xuất bản. Các trình tạo text-to-image phía máy chủ tải lên văn bản của bạn đến một máy chủ từ xa, nơi nó ngồi trong log. Công cụ này chạy hoàn toàn trong trình duyệt của bạn qua Canvas API, xác minh trong tab Network của DevTools trong khi bạn tạo, hoặc đưa trang ngoại tuyến (chế độ máy bay) sau khi nó tải và công cụ vẫn hoạt động. An toàn cho các bản nháp bí mật, copy khách hàng NDA, truyền thông nội bộ hoặc bất kỳ văn bản nào bạn không muốn được sao chép vào ổ cứng của người lạ.

Câu hỏi thường gặp