程式碼轉圖片產生器是一款瀏覽器工具，能將不具執行意義的原始文字繪製到本機的 HTML5 Canvas 上，並將產生的點陣圖匯出為 PNG 檔案。Code to Image Generator 完全遵循這個模式：貼上完整的程式碼文字、挑選固定的淺色或深色調色盤、選擇 12 到 32 像素之間的字型大小，以及 16 到 96 像素之間的留白，然後從原始大小的 Canvas 下載 code-image.png。每一個步驟 — 測量、繪製、PNG 編碼、預覽渲染與下載 — 都在目前的瀏覽器分頁內完成。輸入內容永遠不會被剖析、編譯、執行、語法上色、注入為 HTML，或上傳到伺服器。輸出的 PNG 僅儲存渲染後的像素，使用一種前景色搭配不透明的背景，因此沒有語言感知權杖上色，也不聲稱能跨裝置保持像素一致。這讓本工具非常適合用於程式碼片段的精簡視覺分享、文件插圖、議題回報、教學素材，以及社群貼文等場景，這些場景的目標是取得乾淨、可預測的程式碼圖片，而非可編輯的原始碼。它不是編輯器、編譯器、沙盒、格式化工具、OCR 系統，也無法取代可選取文字以提供無障礙功能。

how to generate qr code to image
how to generate qr code to image

Code to Image Generator 實際做了什麼

此工具接受純文字，將每個字元視為不具執行意義的 Canvas 字型，並產生一張 PNG。瀏覽器會解析一組本機等寬字型堆疊 — ui-monospace、SFMono-Regular、Menlo、Consolas，以及通用的等寬字型備援 — 接著在配置點陣圖之前，使用 Canvas 的 measureText 測量每一個完整的邏輯行。每個可辨識的行分隔符（LF、CRLF 或 CR）都會前進到新的一列，因此即使是最後的尾端換行，仍會佔用一列，即使它沒有繪製任何字型。空白行也會佔用完整的列高度。在繪製任何文字之前，整個 Canvas 會先以選定的透明背景塗滿，接著每一行保留文字會以相同的留白位置、靠左對齊、頂部基線，使用 Canvas 的 fillText 來渲染。由於每次調整大小後都會重新設定繪製環境，且點陣圖是從原始大小的離屏 Canvas 編碼，而非來自任何經 CSS 縮放的預覽，因此下載的檔案不會被悄悄降階取樣以符合頁面大小。

三個控制項決定了圖片：固定的淺色或深色調色盤、12 到 32 像素的整數字型大小，以及 16 到 96 像素的整數留白。行高為所選字型大小一點五倍的無條件進位，會統一套用於每個邏輯行。寬度為最長的測量行寬加上兩側的留白，高度則是行高乘以總行數，再加上上下留白。在 Canvas 調整大小之後，繪製環境會重新取得，字型、基線、對齊、方向、字距、背景與前景也都會在繪製前明確重新套用，因為調整大小會重設 Canvas 的狀態。

嚴格的限制與遭到拒絕的項目

嚴格的資源上限可在大型 Canvas 配置發生之前保護瀏覽器分頁。每個上限都會逐一檢查，一旦下一個單位、行、邊緣像素、總像素或位元組超出限制，就會遭到拒絕。不會自動夾緊、不會略過行數、不會裁切區域、不會產生部分圖片、不會以較低解析度重試，也不會悄悄重新壓縮。確切限制記載於下表。

資源接受上限超出時的行為
總輸入大小50,000 個 UTF-16 字碼單位以明確錯誤訊息拒絕
邏輯行數200 行以明確錯誤訊息拒絕
單行長度任何一行最多 2,000 個字碼單位以明確錯誤訊息拒絕
Canvas 寬度或高度每邊最多 8,192 像素在配置之前拒絕
總像素面積32,000,000 像素在配置之前拒絕
PNG Blob 大小20 MiB編碼後拒絕
不允許的控制字元與未配對代理項一律不接受以明確錯誤訊息拒絕

接受的文字絕不會被悄悄縮短，而定位字元加上可列印的 Unicode 會原封不動地傳遞給 Canvas 文字渲染器。不允許的控制字元與未配對的 Unicode 代理項會直接遭到拒絕，而不是被替換或遺失。如果 Canvas 無法使用、測量無效、尺寸超出預算、PNG 編碼回傳 null、PNG 大小無效或過大，或 ObjectURL 建立失敗，目前的產生作業會回報錯誤，且不會發佈下載。先前成功的輸出在作業開始前就已經消失。

三個步驟產生程式碼圖片

  1. 在字元、行與單行長度的限制內貼上完整且不具執行意義的程式碼文字。空白行與最後的尾端換行仍會以圖片列的形式呈現，因此請保持文字與您希望呈現的完全一致。
  2. 選擇淺色或深色主題、12 到 32 像素之間的字型大小，以及 16 到 96 像素之間的留白。每個控制項只接受固定的整數值，並在每次變更時重新驗證，這會立即使先前的產生結果失效。
  3. 檢查預覽、回報的實際尺寸、邏輯行數以及 PNG 位元組大小，然後下載 code-image.png。匯出的 PNG 來自原始大小的離屏 Canvas，因此檔案與回報的尺寸完全相符。

在產生作業進行期間，產生按鈕只有在目前 toBlob 回呼完成解析之前才會保持停用狀態。PNG 編碼是非同步的，因此產生作業識別碼與掛載狀態守衛機制可防止較舊的回呼取代較新的結果，或在卸載後發佈內容。如果過期的回呼在偵測到取代之前建立了 URL，該 URL 會立即被撤銷，而目前的結果 URL 會在編輯、取代與元件清理時被撤銷。

預覽、尺寸與匯出的 PNG

螢幕上的預覽僅限制顯示大小；下載的 PNG 是從獨立的離屏 Canvas 以其原始輸出尺寸渲染而成。結果摘要會回報實際指派給該 Canvas 的尺寸，因此您看到的數字會與您儲存的檔案相符。影響點陣圖的選項彙整如下。

選項允許的值對輸出的影響
主題淺色或深色（固定調色盤）淺色會以淺色背景搭配深色前景繪製；深色會以深色背景搭配淺色前景繪製
字型大小12 到 32 px 的整數設定每個保留行的 Canvas 字型與行高
留白16 到 96 px 的整數套用於內容兩側的水平與垂直內縮

由於瀏覽器是從本機可用字型中等寬字型堆疊解析字型，字型備援與字型形狀會因作業系統而異。相同的瀏覽器與字型環境應能針對相同的輸入與選項產生穩定的測量結果，但無法保證跨電腦產生像素完全相同的輸出。表情符號、少見的字集、連字、抗鋸齒、字型提示與備援字型都可能改變測量寬度或點陣化後的字型邊緣，因此請將 PNG 視為視覺快照，而非決定性的識別碼。

為什麼 PNG 包含的是像素而非原始碼

匯出的檔案是渲染後字型的 PNG 圖片，而非原始文字的副本。PNG 不包含可編輯的原始碼、語法結構、字型檔案、執行階段輸出、執行結果，也沒有人類可讀或機器可讀的字串。它無法證明程式碼是正確、安全、授權合規、格式良好或可執行的，且無法在沒有獨立 OCR 的情況下轉換回可選取的原始碼區塊。對於任何依賴可編輯性、精確字元還原、審查記錄、無障礙或歸檔完整性的用途，請將原始文字保留在一般檔案中，並改用格式化工具、最小化工具或驗證工具。

所有的測量、繪製、PNG 編碼、預覽與下載都在本機進行，不會傳送至任何遠端服務。由於所有繪製的素材都是本機文字與單色，Canvas 沒有跨來源圖片來源，因此也不會透過此工作流程變成污染狀態。在分享 PNG 之前，請檢查貼上的片段中是否含有憑證、權杖、私人 URL 與個人資訊，因為該圖片會以比純文字更難以塗銷的方式，將這些文字永久視覺化。

何時應改用格式化工具

如果目標是機器可讀的格式化，而非視覺快照，那麼合適的工具是專門的格式化工具或最小化工具。例如，JSON Formatter 能產生美化排版或壓縮的 JSON，並標示精確的錯誤位置，而 HTML Formatter、CSS Minifier 與 JavaScript Minifier 則涵蓋其他常見的網頁格式。Code to Image 的設計刻意比這些工具更為單純：單一固定調色盤、單一前景色、沒有語言感知權杖上色，且輸出在本質上即為唯讀。當交付物是乾淨、有界限的文字 PNG，將嵌入至文件、附加於議題、分享於社群貼文或放入簡報時，請使用本工具。

延伸閱讀：How to Use ASCII Code on Mac: A Quick Lookup Reference。

延伸閱讀：Turn Claude Code Snippets Into a Clean PNG Image。