不會 — 當您使用 影像平均色彩尋找器 時,您的影像不會離開您的裝置。瀏覽器會使用內建的影像解碼器開啟檔案,透過 HTML canvas 取樣其像素資料,在同一個分頁內計算 alpha 加權平均值,並將產生的 HEX 值寫入您的剪貼簿,全程不會將任何位元組傳送給 Lizely 或任何第三方的影像分析服務。您可以在挑選檔案前先開啟瀏覽器的網路面板來確認:一旦工具頁面載入完成,無論是選擇檔案時、讀取 canvas 時,或是計算完成時,都不會再有任何夾帶影像資料的請求透過網路傳出。整個流程只會針對您電腦上既有的資源執行,因此無論圖片是機密的產品模擬圖、個人照片、您不想被建立索引的螢幕截圖,或是影片中的某一格影格,隱私狀況都相同。這很重要,因為許多色彩工具在處理像素資料前,會悄悄地把您的影像上傳到遠端伺服器,而這個上傳動作在使用者介面上往往看不到。影像平均色彩尋找器是以 HTML canvas 像素操作規格為基礎所打造,這項規格讓網頁能讀取影像中的 RGBA 值,完全不需要將檔案從使用者電腦傳出。
本機處理與伺服器色彩工具有何不同
在瀏覽器型影像工具的脈絡下,所謂的「本機處理」代表計算的每一步都在使用者自己的硬體上、也就是載入工具的同一個分頁內執行。檔案由瀏覽器的影像解碼器讀取,使用一個隱藏的 canvas 作為工作區,運算則在頁面內以 JavaScript 執行。不會有 API 呼叫把影像位元組向外傳送,也不涉及任何伺服器端算圖農場。
相較之下,以伺服器為基礎的色彩工具會透過 HTTPS 把影像送到遠端機器,在那裡處理像素,再把結果送回來。在良好的網路環境下這個往返很快速,但這也代表您的影像是(即便只是短暫地)存在於您無法掌控的基礎架構上。對於敏感素材——內部 UI 截圖、未公開的產品算圖、受 NDA 約束的模擬圖、任何含有人臉或位置的畫面——這種往返即使是操作者承諾會刪除,仍可能造成問題。
影像平均色彩尋找器是為本機情境所設計。它標示了 20 MB 檔案上限與明確的像素邊界防護,這是因為實作必須將解碼後的影像控制在瀏覽器的 canvas 記憶體預算內,並不是因為它會把資料轉發到任何地方。沒有帳號、不用註冊、沒有 API token,也沒有任何與該影像綁定的使用紀錄。當分頁關閉時,工作中的 canvas 就消失了;原始檔案仍然存放在您磁碟中原來的位置。若想深入了解在瀏覽器內的完整流程,請參考在瀏覽器中取得影像平均色彩的指南。
瀏覽器如何在沒有伺服器的情況下解碼並取樣影像
這項工具使用每個瀏覽器都已內建的標準影像載入介面。當您挑選檔案時,瀏覽器會從磁碟讀取位元組,執行其原生解碼器(可辨識 PNG、JPEG、WebP、GIF、BMP 與 AVIF),並產生一張解碼後的點陣圖。解碼後的點陣圖會以受控的尺寸繪製到一個離螢幕的 canvas 上,接著由一段 JavaScript 呼叫向 canvas 索取其像素資料。
像素資料透過 CanvasRenderingContext2D.getImageData API 讀取,該 API 會回傳一組平坦的 8 位元 RGBA 值陣列,如 MDN 對於 getImageData 的參考文件所述。每個像素包含一個紅色位元組、一個綠色位元組、一個藍色位元組,以及一個 alpha 位元組。工具會走訪這個陣列,對每一個 alpha 不為零的像素,把紅、綠、藍三個通道乘以 alpha 值,再累加到執行中的總和。完全透明的像素不會貢獻任何值,因為其儲存的 RGB 通道不可見,而且可能含有編碼器產生的任意資料。部分透明的像素則會以其不透明度比例貢獻。走訪結束後,加權後的通道總和會除以 alpha 總和,再對每個通道取一次四捨五入到 0 至 255 之間的整數。輸出結果會以六位數小寫 HEX 字串以及十進位 RGB 的形式呈現。
這是 canvas 色彩資料的算術平均,而不是主色分群模型。兩個權重相同的紅色與藍色像素會產生紫色平均值,即使來源中並不存在紫色像素。一小塊鮮豔的點綴色可能會被大面積的中性背景稀釋。若要做最常出現的色彩、分離色票,或主體感知的萃取,改用調色盤類型的工具會是比較合適的起點。
在不上傳檔案的情況下取得影像的平均色彩
- 在瀏覽器分頁中開啟影像平均色彩尋找器。不需要登入、帳號或擴充功能。
- 從您的本機檔案系統中選擇一個大小不超過 20 MB 且受支援的影像。該工具接受 PNG、JPEG、WebP、GIF、BMP 與 AVIF。
- 等待本機解碼完成。瀏覽器會對已在記憶體中的位元組執行原生解碼;您應該會在不發生任何網路活動的情況下,看到 HEX、RGB、alpha 覆蓋率與取樣尺寸出現。
- 讀取顯示出來的 HEX 值,以及其對應的十進位 RGB 三元組。來源尺寸與分析 canvas 尺寸也會一併顯示,讓您能判斷計算使用的是否是經過降級取樣的檢視。
- 點擊 HEX 值即可複製。剪貼簿會收到一個井字號加上六個小寫十六進位數字。若瀏覽器拒絕授予剪貼簿權限,該數值仍會保持可見且可選取。
- 將複製的 HEX 貼到您的設計工具、CSS 檔案或色彩參考資料中。以肉眼在預期的設計情境中確認色票,並在視為定案前,依據您的無障礙與品牌文件再次核對。
運算實際發生在哪裡,以及輸出為何可能不同
由於資料完全不會離開您的裝置,計算會受到瀏覽器在 canvas 記憶體內所能處理內容的限制。像素數在 1,048,576 以下的影像會以解碼後的尺寸讀取;更大的影像則會按比例縮放,使分析 canvas 維持在該像素預算內。因此結果描述的是高解析度的取樣,而不是對每個來源像素逐位元組取平均,瀏覽器的內插運算也可能讓該值與離線的全解析度計算略有差異。來源與取樣尺寸都會在介面中一併顯示,讓這項近似是可見的,而不是被隱藏起來。
其他對同一檔案取平均的程式可能會因為幾個原因而回傳略為不同的數值。它們可能使用每個來源像素,而不是降級取樣的檢視;可能採用 gamma 感知或感知性數學,而不是直接的算術平均;也可能評估的是動畫格式中不同的影格,因為本工具讀取的是瀏覽器在初始解碼時所暴露的影格,而不是對每個影格取平均或依播放時間加權。瀏覽器的色彩管理、EXIF 方向處理、廣色域轉換,以及動畫行為,都會因為引擎與格式而異。記錄輸入檔案、瀏覽器、顯示的來源與取樣尺寸,以及回傳值,就能為日後的比較提供一個可重現的指紋。
下表整理了該工具文件中所列的主要技術限制,讓您能一眼判斷某個輸入是否會被接受,以及會如何被取樣。
| 限制 | 文件記載的數值 |
|---|---|
| 最大檔案大小 | 20 MB |
| 解碼後的最大邊長 | 每邊 20,000 像素 |
| 最大來源像素數 | 40,000,000 像素 |
| 取樣 canvas 預算 | 1,048,576 像素,超過時按比例縮小 |
| 支援的 MIME 類型 | PNG、JPEG、WebP、GIF、BMP、AVIF |
| 最低需求 | 非空檔案且為支援的 MIME 類型 |
工具所遵守的隱私界線,以及它不會檢視的內容
「本機處理」這項主張會因為該工具刻意不去查看的內容而更為穩固。它不會保留或檢視 EXIF 中繼資料、ICC 色彩設定檔、相機資訊,或檔案中嵌入的隱藏文字區塊。除了在本機顯示給使用者參考之外,它不會讀取檔名,也不會修改、重新編碼或匯出來源檔案。預覽色票會直接依據計算出的 HEX 繪製,因此您在色票中看到的內容,正是被複製的數值。
Canvas 像素存取是以標準的 8 位元 RGBA 資料形式要求,這正是 HTML canvas 像素操作規格對網頁所開放的格式。實作被限制在 RGBA 運算、每個通道單次四捨五入的輸出,以及一鍵複製到剪貼簿。若剪貼簿權限因瀏覽器政策而被拒絕,介面不會虛偽地宣稱成功;該數值仍會保持可見且可選取,讓您手動複製。
為了讓設計工作可重現,請記錄輸入檔案、瀏覽器、顯示的來源與取樣尺寸,以及回傳的 HEX 值。不應將單一平均值視為品牌合規、無障礙對比、印刷對色、油漆對色或感知相似性的證明。若要做文字對底色的對比,請使用能讀取特定比例的對比檢查工具;若要依特定指標比較兩個不透明的 HEX 值,請使用以公開標準為基礎的色彩差異計算工具。
動畫格式會以瀏覽器完成初始解碼時所暴露的影格進行評估,因此該值描述的是單一影格,而不是整段動畫。若您需要針對影格的細部分析,請分別對每個影格執行本工具,把每次的結果貼到您的工作筆記中,並把這個平均值視為單一取樣,而非最終的定論。