在開發者的情境中，「Spotify程式碼圖片」指的是一張Spotify相關原始文字的PNG快照——可能是一個Web API請求、一段OAuth權杖交換片段、一個SDK呼叫、一個webhook處理程式，或一個設定區塊——用等寬字型呈現在一個固定的淺色或深色背景上，讓它可以貼進文件、README、教學部落格文章，或社群貼文中。這張圖片不帶任何可執行的程式碼；它承載的是像素，這正是它可以安全分享的原因。要在本機產生一張這樣的圖片，只要把不會被執行的原始文字貼進程式碼轉圖片產生器，選擇主題、字型大小和內距，然後下載產生出來的PNG，完全不需要把程式碼片段上傳到任何遠端伺服器。整條處理流程，都在目前的瀏覽器分頁中，使用本機的等寬字型組合和一個有邊界限制的HTML canvas來完成。沒有任何內容會被剖析、語法高亮、執行，或傳送出去，因此片段中如果剛好有一組存取權杖，它的曝險程度並不會比一張編輯器的螢幕截圖更高。
「Spotify程式碼圖片」在開發工作流程中代表的意思
當一位開發者搜尋Spotify程式碼圖片時，他們通常想要的是以下三件事之一：一種能分享Spotify Web API請求的方式，讓標頭和主體在教學文章中容易閱讀；一種能把一段簡短的SDK程式碼片段放進部落格文章、卻不需要安裝笨重語法高亮外掛的方式；或是一種能把一段乾淨的OAuth重新整理權杖片段嵌入README、並在GitHub、GitLab和Notion上都能一致呈現的方式。在每一種情況下，最終成果都是一樣的——一張固定尺寸的PNG，看起來就像一張程式碼編輯器的螢幕截圖，帶有你選定的背景色和單一前景色，並以檔案形式儲存，可以上傳到任何地方。
在這個情境中，「Spotify code」這個說法，指的並不是官方Spotify行動應用程式為分享一首曲目而產生的那種視覺化聲波條碼。那種條碼是在應用程式內部產生的，與原始文字完全無關。這裡所說的Spotify程式碼，指的是與Spotify溝通的文字原始碼——可以是一句打向https://api.spotify.com/v1/me/player/currently-playing的curl單行指令，也可以是一個包裝了Web Playback SDK的TypeScript類別。把這段原始碼算繪成圖片，省去了在每一個需要顯示它的地方，都得安裝語法高亮函式庫的麻煩，也保證在不同的算繪環境中，視覺呈現始終保持穩定。
在本機把一段Spotify程式碼片段算繪成PNG
- 在桌面瀏覽器分頁中開啟「程式碼轉圖片產生器」。這個工具完全在用戶端運作，因此使用一個等寬字型組合穩定的桌面瀏覽器，能得到最一致的量測結果。
- 把Spotify程式碼片段，依照你希望它呈現的樣子，精確地貼上。輸入內容會被當成不會被執行的純文字，而不是可執行的程式碼，因此角括號、and符號、引號，以及範本運算式，都會被繪製成字形符號，而不會被剖析。
- 注意輸入計數器。貼上的文字，總共最多可以包含50,000個UTF-16碼元，最多200個邏輯行，且任何單一一行最多2,000個碼元。空白行以及結尾的最後一個換行符，仍然會算成圖片中的一列。
- 選擇一個主題。淺色模式會繪製一個淡色背景搭配深色前景；深色模式則會繪製一個深色背景搭配淺色前景。每一行都使用同一個單一前景色，因為這個工具不會執行語言感知的記號上色。
- 選擇一個介於12到32像素之間的字型大小，以及一個介於16到96像素之間的內距值。這是僅有的兩個數字型控制項；沒有語法配色選擇器、沒有行號切換開關，也沒有自動調整大小的選項。
- 點擊產生。瀏覽器會量測每一行被保留下來的文字，配置一個以其自然輸出尺寸建立的Canvas，繪製整個背景，以頂端基準線繪製每一行，接著把這個點陣圖編碼成PNG。
- 閱讀結果摘要。它會回報實際指派給這個Canvas的尺寸、被繪製出來的行數，以及下載前這份PNG的檔案大小。
- 下載code-image.png。這個檔案來自那個自然尺寸的離屏Canvas，而不是來自畫面上的預覽，因此它不會為了配合頁面而被靜默地降低取樣。
- 把原始的原始碼文字，另外保存在一個獨立的檔案中。這張PNG只儲存像素；圖片內部並沒有可編輯的原始碼、語法結構，也沒有可供機器讀取的還原路徑。
瀏覽器實際上是如何繪製這張圖片的
每一個步驟，都在目前這個作用中的頁面本機進行，這也是為什麼在測試過程中，即使程式碼片段裡含有憑證，這個工作流程仍然是安全的。瀏覽器會先從本機的等寬字型組合中，依照解析順序——ui-monospace、SFMono-Regular、Menlo、Consolas，或通用等寬字型——把canvas的字型設定為選定的大小。接著它會用CanvasRenderingContext2D.measureText方法，量測每一行被保留下來的文字，取其中最大的有限寬度，向上取整這個範圍，並在兩側各加上選定的內距，得出最終的輸出寬度。
高度的計算方式，是行數乘以字型大小的1.5倍後再向上取整，再加上頂端與底部的內距。一旦尺寸確定下來，繪圖情境就會被重新取得，因為調整canvas尺寸會重設它的狀態，而字型、基準線、對齊方式、書寫方向、背景色與前景色，都會在繪製之前明確地重新設定一次。整個canvas會先用不透明的背景色填滿，然後才會從同一個內距位置開始，把每一行以左對齊、頂端基準線的方式繪製出來。空白列仍然會佔用完整的一列高度，讓垂直間距維持一致。
編碼過程，是透過canvas的非同步toBlob呼叫來完成的。如果這個blob是null、空的、超過20 MiB，或以其他方式無效，這次產生就會回報一個錯誤，也不會提供任何下載連結。成功產生的blob，會被包裝成一個本機的ObjectURL，附加到目前這次產生的識別碼上，並在程式碼片段、主題、字型大小，或內距發生變化的那一刻，或元件卸載的那一刻被撤銷。因為每一個被繪製出來的元素，都是本機文字或純色填色，這個canvas在這整個工作流程中，永遠不會涉及跨來源，也永遠不會被汙染。
一眼看懂算繪選項與硬性限制
| 控制項 | 接受的數值 | 觸及邊界時會發生什麼事 |
|---|---|---|
| 主題 | 淺色或深色 | 每一個字形都套用同一個前景色；不會套用逐一記號上色。 |
| 字型大小 | 12到32像素，整數 | 超過32的下一個整數，會被明確拒絕並顯示錯誤。 |
| 內距 | 16到96像素，整數 | 超過96的下一個整數，會被明確拒絕並顯示錯誤。 |
| 輸入大小 | 最多50,000個UTF-16碼元 | 第50,001個碼元會讓整次產生失敗。 |
| 行數 | 最多200個邏輯行 | 第201行會讓整次產生失敗。 |
| 最長的一行 | 每行最多2,000個碼元 | 單一一行的第2,001個碼元，會讓整次產生失敗。 |
| Canvas邊長 | 每邊最多8,192像素 | 一個會超過8,192的邊長，會在配置之前就失敗。 |
| Canvas面積 | 總計最多32,000,000像素 | 一個面積過大的canvas，會在配置之前就失敗。 |
| PNG檔案大小 | 最多20 MiB | 超過20 MiB、null，或零位元組的blob，都會讓整次產生失敗。 |
這些限制的存在，是為了讓瀏覽器分頁在放入一段非常大的程式碼片段時，不會靜默地遺失作業成果。這裡沒有自動裁切、沒有略過行數的統計、沒有裁切區域、沒有降低解析度重試，也沒有靜默重新壓縮。只要有任何一項超出預算，結果就是一個明確的錯誤，也不會出現任何下載連結。想看同一個工作流程更詳細的說明，請參見如何在你的瀏覽器中產生一張程式碼轉圖片的PNG。
值得做成圖片分享的Spotify程式碼使用情境
最適合算繪成圖片的Spotify片段，是那種人們會從部落格文章中手動複製貼上的片段——簡短、格式良好，且自成一體。一個精簡的OAuth客戶端憑證請求、一個對搜尋端點發出的curl呼叫，或一個包裝了SpotifyApi.getPlaylist的TypeScript輔助函式，都能輕鬆放進200行、50,000碼元的預算內，而且在預設的16像素內距下看起來也很好看。把它們做成PNG，代表讀者在每一種裝置上，看到的都是同一種視覺呈現，無論他們的部落格平台是否支援程式碼區塊主題。
有兩種實用的模式特別有效。第一種，是一個README徽章區塊，把Shields.io的建置狀態徽章、npm版本徽章，以及一張Spotify程式碼片段圖片並排放在一起——這張圖片能讓片段保持可讀，卻不必把語法高亮工具拖進Markdown處理流程中。第二種，是一系列教學文章，每一篇都重複使用相同的主題、字型大小和內距，讓每一張圖都有相同的尺寸，並在網格中對齊排列。想更深入了解這種分享模式，如何取得一張用於分享和文件的程式碼圖片會帶你走過這個文件使用情境。
限制、安全檢查，以及這張PNG做不到的事
這張PNG儲存的是算繪出來的像素，而不是可編輯的原始碼文字、語法結構、字型檔案、執行時期輸出，或執行結果。它並不能證明這段程式碼是正確的、安全的、已取得授權的、格式正確的，或可執行的。圖片內部的文字是否可以被選取，完全取決於檢視者所使用的OCR或無障礙工具層，這已經超出這個工具的控制範圍。這也是為什麼每當可編輯性、字元的精確還原、審閱歷史、無障礙，或典藏保真度很重要時，這個工作流程都堅持要把原始的原始碼另外保存下來。
因為每一個量測、繪製步驟、PNG編碼、預覽和下載，都在本機進行，因此不會有任何內容被傳送到遠端服務。這個canvas永遠不會涉及跨來源，也永遠不會被汙染。不被允許的控制字元，以及未配對的Unicode代理字元，都會被明確拒絕並顯示錯誤，而不是被取代或遺失。LF、CRLF和CR都會被辨識為換行分隔符，而定位字元和可列印的Unicode字元，則會原樣傳遞給canvas的文字算繪器。有一個實務上的但書：表情符號、罕見文字系統、連字、反鋸齒、字型微調（hinting），以及後備字型，可能會在不同作業系統之間，改變量測出來的寬度，或算繪出來的字形邊緣，因此同一台機器上的同一個瀏覽器，對同樣的輸入內容與選項，應該會產生穩定的輸出結果，但不同電腦之間逐像素完全一致的輸出結果，並不在保證範圍內。
什麼時候程式碼圖片是錯誤的格式
如果目標是要在部落格文章或wiki中做到可被搜尋、可被索引，或可以複製貼上的文字，那麼一個普通的Markdown程式碼區塊才是正確的格式——它能保留縮排、允許選取文字，也能與螢幕閱讀器良好配合。當目的地不遵循程式碼區塊樣式時、當這段程式碼片段必須在每一位讀者的螢幕上看起來完全一樣時，或當這段片段夠短、可以作為更大版面中單一一個視覺元素存在時，「程式碼轉圖片產生器」會是更適合的選擇。至於機器可讀的格式化工作，JSON格式化工具、HTML格式化工具、CSS壓縮工具，或JavaScript壓縮工具，會是更合適的工具。這張PNG輸出結果，應該永遠被當成一份完成的視覺成品，而不是一份原始碼檔案。