跳至主要內容
Lizely

碼到圖片生成器

將完整程式碼文字轉換為清晰的淺色或深色 PNG,全程在本機進行,不會上傳或執行任何內容。

隱私權:你的檔案不會離開裝置,所有處理均在瀏覽器本機完成。

使用方式

  1. 1.請貼入完整且無活性的程式碼文字,並遵守字元、行數及每行的限制。
  2. 2.選擇亮色或暗色主題、字型大小與邊距,然後產生具有自然尺寸的 bounded PNG。
  3. 3.檢查預覽、實際尺寸、行數以及 PNG 大小,然後下載 code-image.png。

關於碼到圖片生成器

程式碼轉圖片將普通程式碼文字轉換為PNG風格的截圖式圖片,目前瀏覽器分頁中。貼上文字,選擇固定明亮或深色調色盤,從12至32像素選擇字型大小,從16至96像素選擇內邊距,並產生圖片。瀏覽器會以所選的本機等寬字型堆疊測量每一行完整的文字,建立自然輸出尺寸的受限制畫布,繪製整個背景,使用畫布 fillText繪製每一行,並將完成的點陣圖編碼為PNG。

輸入內容永遠是靜態文字。此工具不會解析、編譯、評估、高亮、注入、匯入或執行程式碼。HTML 標籤、類似指令碼的字串、事件處理函式文字、模板表示式、引號、連線符、尖括弧等仍僅作為普通畫布文書處理,絕不會被賦值給 innerHTML 或插入為 DOM 標記。本工具不使用任何語法高亮語法、套件、遠端渲染器或語言執行時,因此輸出僅使用一種前景顏色,無法聲稱具有語言識別的語彙著色功能。看起來可執行的字串僅是字元序列。

輸入的文字絕不會被靜默截斷。空行與結尾的換行符會保留為圖片中的完整行。LF、CRLF 與 CR 均被視為行分隔符。Tab 與可列印的 Unicode 會原樣傳遞至畫布文字渲染器。任何不允許的控制字元與未配對的 Unicode 偏移符會被明確拒絕,而非被取代或遺失。原始內容僅保留在當前頁面的 React 狀態中,不會以可編輯來源或機器可讀語法形式嵌入至 PNG 中。

字型降級與字元形狀因作業系統而異,因為瀏覽器會從本機可用字型中解析宣告的 ui-monospace、SFMono-Regular、Menlo、Consolas 與通用等寬字型堆疊。相同瀏覽器與字型環境應能穩定測量相同輸入與選項,但跨電腦的像素完全一致輸出並無法保證。表情符、罕見文字、連字、抗鋸、提示與降級字型可能改變測量寬度或掃描字元邊緣。結果摘要會報告實際分配給輸出畫布的尺寸。

寬度計算會測量設定字型後每行保留內容的寬度,取最大有限測量寬度,向上取整並加上兩側邊距。高度則使用行高為字型大小的 1.5 倍向上取整,乘以完整邏輯行數,再加上頂部與底部邊距。設定畫布寬高後,會重新取得繪圖上下文,因為調整尺寸會重置畫布狀態。因此,字型、基線、對齊、方向、間距、背景與前景顏色都會在繪製前明確重新套用。

整個畫布會先以選定的不透明背景繪製,再繪製文字內容。淺色模式使用淺色背景與深色文字;深色模式使用深色背景與淺色文字。每行文字從相同邊距位置左對齊,以相同基線繪製。空行即使沒有繪製字元,也會佔用完整行高。下載的 PNG 來自此自然尺寸的離屏畫布,而非來自 CSS 比例縮放的預覽,因此下載的檔案不會被靜默降解析以適配頁面顯示。預覽僅限制於螢幕顯示範圍內。

嚴格的資源限制在大量畫布分配發生前保護分頁。輸入最多包含50,000個UTF-16程式碼字元、200個邏輯行,以及任一行最多2,000個程式碼字元。畫布寬度與高度各自最多為8,192像素,總面積最多為32,000,000像素。完整的PNG Blob最多為20個MiB。精確的限制被接受,下一單位、行、邊界像素、總像素或位元組將被拒絕。無效或零位元組的PNG輸出也會被拒絕。不會使用自動限制、跳過行數計算、裁剪區域、部分影象、低解析度重試或靜默重新壓縮。

PNG 編碼是非同步的。啟動一個產生會無效化先前的作業,收回其本機 ObjectURL,移除舊結果與錯誤,並進入忙碌狀態。編輯程式碼、主題、字型大小或內邊距會立即執行相同的無效化動作。一個產生識別碼與掛載狀態防護機制可防止較舊的 toBlob 回呼取代較新的結果或在取消掛載後發布。若過期的回呼在偵測到取代前產生 URL,則該 URL 會立即被收回。編輯、取代或元件清理時,目前的結果 會被收回。

若畫布不可用,測量結果無效、尺寸超出預算、PNG 編碼返回 null、PNG 尺寸無效或過大、或 ObjectURL 建立失敗,當前產生將報告錯誤且不會釋出下載。舊的正確輸出在作業開始前已經被移除。產生按鈕僅在當前 PNG 回呼仍處於待處理狀態時保持關閉。由於所有繪製內容皆為本機文字與實體顏色,此畫布無跨源圖片來源,也未透過此流程被汙染。

所有測量、繪製、PNG 編碼、預覽與下載皆在本機完成。不會傳送任何內容至 Lizely。PNG 僅儲存渲染後的像素,並非可編輯的原始文字、語法結構、字型檔、執行輸出或執行結果。此工具無法證明程式碼正確、安全、合法授權、格式正確或可執行。若需保留原始文字以便編輯、精確字元還原、審查歷史、可訪問性或歸檔一致性,請務必另行儲存原始內容。

本工具適用於緊湊的視覺分享、檔案說明圖、問題報告、教學材料及社群貼文。它並非程式碼編輯器、編譯器、沙盒環境、機密掃描工具、語法驗證器、格式化工具、OCR 系統,或可選原始碼的可訪問性替代方案。分享 PNG 前,請先審查程式碼中是否包含憑證、令牌、私人網址或個人資訊。若需機器可讀格式,請使用適當的 JSON 格式化器、HTML 格式化器、CSS 壓縮器或 JavaScript 壓縮器。

方法與來源

將輸入 exclusively 視為無活性文字;拒絕空輸入、不支援的控制項、未配對的代理、超過 50,000 UTF-16 碼元、超過 200 邏輯行,或超過 2,000 碼元的行。驗證固定整數字元字型與內邊距選項。設定本機等寬 畫布 字型,測量每個完整行,計算行高為 ceil(字型大小 × 1.5),並在分配前拒絕超過 8,192 像素或面積超過 32 百萬像素的尺寸。調整 畫布 大小,重新取得並完全配置其上下文,繪製不透明背景,並使用左對齊頂基線 fillText 繪製每個保留的行。非同步將自然尺寸的 畫布 編碼為 image/png,拒絕 null、零位元組、無效或超過 20-MiB Blobs 的情況,僅為目前活體產生發布本機 ObjectURL,並在編輯、取代、過期完成或解除安裝時撤銷。

常見問題

程式碼轉圖片會執行或上傳我的程式碼嗎?
不會。程式碼僅作為無害文書處理,並在當前瀏覽器分頁中使用畫布繪製。它從來不會被執行、以 HTML 的形式注入,或上傳。
長程式碼會被靜默裁切嗎?
不會。系統會明確檢查字元、行數、每行、畫布邊緣、像素面積與 PNG 位元組的限制。超出限制的請求將失敗,且不會產生部分下載。
為何字型在另一臺電腦上看起來不同?
瀏覽器會使用本機的等寬字型堆疊。字型可用性、備用字元與點陣圖化會因作業系統而異,因此跨裝置的像素一致性無法保證。
PNG 會保留可編輯或高亮的程式碼嗎?
不會。PNG 只包含像素。此工具僅使用一個前景顏色,並不會進行語法感知的語法高亮,因此請保留原始來源以供編輯。

開發者工具 使用指南

查看全部