程式碼片段圖片製工具可將貼上的程式碼文字轉換為 PNG 圖片，而 Code to Image Generator 會在本機算繪該 PNG，不會上傳或執行原始碼。此工具適合想要乾淨、類似螢幕截圖檔案的讀者，可用於文件、錯誤報告、教學材料或社群貼文。它使用本機可用的等寬字型測量貼上的行數、繪製固定的淺色或深色背景，並將完成的點陣圖編碼為 PNG。輸出採用畫布的自然尺寸，而非經 CSS 縮放的預覽，因此下載的檔案不會在未告知的情況下被降級取樣以配合頁面大小。每個項目都會視為惰性文字：標籤、看似指令碼的字串、事件處理程式文字、範本運算式、引號、＆ 與角括號都會以一般字形繪製，而不會被剖析、注入標記、評估或執行。PNG 包含的是算繪後的像素，而不是可編輯的原始碼或具語言感知能力的詞法色彩，因此在需要精確還原或可編輯文字時，請另外保留原始碼。測量、繪製、編碼、預覽與下載全都在瀏覽器中進行；不會有任何內容傳送至 Lizely。
PNG 中最終包含的內容
視覺結果刻意保持簡潔。每一行都使用同一種前景色，在淺色模式下為淺色背景搭配深色文字，在深色模式下則為深色背景搭配淺色文字。算繪器不會推斷語言、剖析詞法或套用語法醒目提示。看似指令的字串仍只是一列字元，因此不應將圖片視為程式碼已遭理解、驗證或執行的證據。
這項區隔定義了安全邊界。算繪器不會剖析、編譯、評估、強調、注入、匯入或執行程式碼。貼上的標籤與看似指令碼的內容永遠不會變成 DOM 標記；此工具只會將字元繪製到 Canvas 上。原始碼會保留在目前頁面作用中的 React 狀態，而 PNG 則既不包含可編輯的原始碼，也不包含機器可讀取的語法。
分享前，請檢查原始碼中是否含有認證資訊、權杖、私密 URL 或個人資訊。將文字轉換為像素並不會隱藏其內容。
影響輸出的控制項
| 控制項 | 可用設定 | 效果 |
|---|---|---|
| 主題 | 淺色或深色 | 使用固定淺色背景搭配深色文字，或使用深色背景搭配淺色文字。 |
| 字型大小 | 12 至 32 像素 | 設定等寬文字的大小，並影響測得的寬度與列高。 |
| 邊距 | 16 至 96 像素 | 在文字左右兩側及上下兩側加入空間。 |
| 語法色彩 | 無 | 使用單一前景色，而非具語言感知能力的詞法色彩。 |
字型大小與邊距選項都是固定的整數像素選項。瀏覽器會從裝置上可用的字型解析 ui-monospace、SFMono-Regular、Menlo、Consolas 與一般等寬字型堆疊。備援字型與光柵化可能改變字形邊緣或測得的寬度，尤其是表情符號、罕見文字系統與連字。相同的瀏覽器與字型環境應能對相同輸入與選項產生穩定的測量結果，但不保證不同電腦的輸出在像素上完全相同。
從程式碼片段建立 PNG
- 開啟 Code to Image Generator，貼上完整且具惰性的程式碼文字。納入每一行以及任何希望呈現的空白列，並依照下方限制檢查輸入總長度、邏輯行數與最長行。
- 選擇淺色或深色，然後選擇 12 至 32 像素的整數字型大小，以及 16 至 96 像素的邊距。
- 選取 Generate。瀏覽器會測量每一個完整行、計算有上限的自然尺寸 Canvas、繪製完整的不透明背景、繪製各行，並以非同步方式將 Canvas 編碼為 PNG。預覽可以為顯示而縮放，但匯出仍維持自然尺寸。
- 檢查預覽與結果摘要中的實際尺寸、邏輯行數與 PNG 大小。確認完整內容均可見。編輯程式碼、主題、字型大小或邊距都會使先前的結果失效，必須重新產生。
- 完成上述檢查後，下載 code-image.png，並另外保留原始原始碼，以供編輯或精確還原字元。
匯出前與匯出期間檢查的限制
只有在輸入符合下列原始碼、Canvas 與 PNG 邊界時，產生器才會接受完整輸入。
| 資源 | 允許的最大值 |
|---|---|
| 輸入總長度 | 50,000 個 UTF-16 程式碼單位 |
| 邏輯行數 | 200 |
| 任一單行 | 2,000 個 UTF-16 程式碼單位 |
| Canvas 寬度 | 8,192 像素 |
| Canvas 高度 | 8,192 像素 |
| Canvas 像素面積 | 32,000,000 像素 |
| 完成的 PNG Blob | 20 MiB |
確切的邊界值會被接受；多出一個程式碼單位、行、邊緣像素、總像素或位元組時則會遭拒絕。空白輸入也會被拒絕。超出限制的要求會明確失敗，且不會建立部分下載內容。工作流程不會自動限制尺寸、略過行、裁切區域、以較低解析度重試，或在未告知的情況下重新壓縮 PNG。
LF、CRLF 與 CR 會被辨識為行分隔符號。接受的文字永遠不會在未告知的情況下遭縮短。空白行與最後的行尾換行仍會以影像列呈現，而定位點與可列印的 Unicode 字元會原樣傳至 Canvas 文字算繪器。不允許的控制字元與不成對的 Unicode 代理項會觸發明確錯誤，而不會被取代或遺失。
自然影像尺寸的計算方式
寬度以測得最寬的完整行為基礎：內容範圍會向上取整，再加左右邊距。高度使用的列高等於所選字型大小的一又二分之一向上取整，再乘以完整邏輯行數，最後加上上下邊距。結果摘要會回報實際指派給輸出 Canvas 的尺寸。
瀏覽器使用 Canvas measureText 測量每個保留的行，並使用 Canvas fillText 繪製該行。Canvas 調整大小後，會重新取得繪圖內容，並重新套用字型、基線、對齊方式、方向、字距調整、背景與前景設定，因為調整大小會重設 Canvas 狀態。完整的不透明背景會在任何文字之前繪製。每一行都從相同的左側邊距位置開始，並使用頂部基線；即使是空白行仍會佔用完整的一列。
匯出的檔案來自自然尺寸的離屏 Canvas，而非經 CSS 縮放的預覽。因此，預覽可以配合頁面大小，而不會在未告知的情況下降低 code-image.png 的尺寸或解析度。
產生失敗時的處理方式
PNG 編碼是非同步的，因此只有在作用中的 PNG 回呼尚未完成時，產生按鈕才會保持停用。開始產生會使先前的作業失效、撤銷其本機 Object URL、移除舊有結果與錯誤，並進入忙碌狀態。編輯程式碼或任何顯示設定都會造成相同的即時失效。產生識別碼與掛載狀態防護可避免較舊的回呼取代較新的結果，或在頁面卸載後發布結果；由過期回呼建立的 URL 會立即撤銷。
如果 Canvas 無法使用、文字測量無效、尺寸超出預算、PNG 編碼傳回 null、PNG 無效或為零位元組、其大小過大，或 Object URL 建立失敗，目前的產生作業會回報錯誤，且不會發布任何下載內容。先前成功的輸出已在新作業開始前移除，因此不會被誤認為新結果。
分享影像而不遺失原始碼
此工具適用於精簡的視覺分享、文件插圖、錯誤報告、教學材料與社群貼文。它不是程式碼編輯器、編譯器、沙箱、機密資訊掃描器、語法驗證器、格式化工具、OCR 系統，也不是可選取原始碼的無障礙替代方案。
PNG 儲存的是算繪後的像素，而不是可編輯的原始文字、語法結構、字型檔案、執行階段輸出或執行結果。只要涉及可編輯性、精確還原字元、審查紀錄、無障礙或封存保真度，就應另外保留原始碼。圖片也無法證明程式碼是正確、安全、已授權、格式正確或可執行。
發布影像前，請檢查貼上的程式碼是否含有認證資訊、權杖、私密 URL 或個人資訊。本機算繪工作流程可防止原始碼被上傳或執行，但不會從產生的 PNG 中移除敏感內容。