若要套用模糊效果,請將 JPG、PNG 或 WebP 影像上傳到 Blur Image 工具,選擇要柔化整張圖片或單一矩形區域,設定模糊半徑,然後下載產生的全解析度 PNG ——全程無需將檔案上傳到伺服器。模糊效果本身是一種像素運算,會在選定半徑內將每個像素與其相鄰像素取平均值,因此較小的半徑會產生溫和的柔化效果,而較大的半徑則會產生用於背景與風格化疊加層的厚重霧感。由於此工具會先將原始圖片繪製到一個獨立的離屏畫布上(使用影像的原始像素尺寸),再套用濾鏡,因此匯出的 PNG 會保持與來源檔案相同的寬度與高度,而非您在頁面上看到的較小預覽圖。矩形模式則在此基礎上加入精確的像素座標定位,X、Y、寬度與高度都以原始影像的座標系統輸入,使所選區域可重複且精準。

how to use blur effect
how to use blur effect

模糊效果的適用情境

模糊效果是最簡單的影像編輯調整之一,因為它完全作用於像素上,不需要遮罩、圖層或色彩修正。當您想要突顯圖片中的某個部分、遮蓋小區域,或是為版面配置準備素材(避免原始影像與文字或其他圖形競爭注意力)時,它特別有用。

  • 照片背景。柔化人像後方的所有內容,使主體更為清晰。
  • 截圖與教學。在分享前隱藏擷取畫面上的帳號、電子郵件地址或使用者名稱。
  • 簡報與投影片素材。淡化作為文字背景的庫存照片,讓標題保持清晰易讀。
  • 草稿圖形與原型。在 mockup 中暗示動態或氛圍,而無需定稿。
  • 封面圖與縮圖。減少標題或頭條後方的視覺雜訊。

全影像模糊 vs. 矩形模糊

開始之前,請先決定要柔化整張圖片還是僅柔化某個矩形區域。兩種模式共用相同的半徑控制項與相同的匯出流程,但定位方式截然不同,且各自在下載後有不同的檢查項目。

面向全影像模糊矩形模糊
柔化範圍影像中的每個像素僅限選定矩形內的像素
需設定的控制項模糊半徑以原始影像像素為單位的 X、Y、寬度與高度,加上模糊半徑
邊界處的行為不適用 —— 整個畫面都會被模糊矩形會被裁剪至影像範圍內;模糊核仍可在邊緣附近混合少數相鄰像素
區域外的像素全部都會被柔化從來源原樣繪製,僅在矩形邊界附近有柔和混合
最適用於均勻的背景柔化、氛圍影像、草稿視覺針對性的編輯,例如人臉、車牌、簽名或單一文字欄位
座標系統不需要原始影像像素,(0, 0) 位於左上角

矩形模式將 X 與 Y 視為區域的左上角,單位與來源影像所標示的顯示尺寸相同的像素單位。若矩形超出底部或右側邊緣,工具會將其裁剪至可用的影像區域內,而非擴展畫布或執行失敗。例如在 1920 × 1080 的來源影像上,置中的 600 × 400 區域位於 X = (1920 − 600) / 2 = 660、Y = (1080 − 400) / 2 = 340。

如何為影像套用模糊效果

  1. 開啟 Blur Image 工具,並從您的裝置中選擇 JPG、PNG 或 WebP 檔案。在進行下一步之前,請先確認檔案選擇器下方顯示的像素尺寸,因為您稍後輸入的所有座標都會依據這些數值。
  2. 選擇模式。選擇全影像模糊以均勻柔化整張圖片,或切換至矩形模式並以影像本身的像素輸入 X、Y、寬度與高度。若不確定從何開始,顯示的尺寸會告訴您可用的最大寬度與高度。
  3. 設定模糊半徑。較小的半徑會產生保留大部分細節的細微柔化;較大的半徑則會產生厚重、夢幻般的模糊。對於局部編輯,請保守設定,以便在第一次結果看起來過於銳利時,能以更強的半徑重新渲染。
  4. 選擇 Blur image 動作並檢查預覽。頁面上的預覽可能比來源小,以便瀏覽器有效率地渲染,因此預覽僅供版面配置與大致外觀參考。
  5. 查看預覽旁的輸出尺寸。這些尺寸會與原始影像的原始像素寬度與高度一致,因為匯出是繪製到一個獨立的完整解析度畫布上,而非縮小的預覽圖。
  6. 下載 PNG。在系統檢視器中以 100% 縮放開啟下載的檔案,確認矩形位置、半徑強度與輸出尺寸。若有任何問題,請調整座標或半徑後重新生成 —— 每次生成都會取代先前的下載物件。

瀏覽器內部在套用模糊時發生了什麼

上述每個步驟都在當前分頁中本機執行。瀏覽器會先驗證檔案是否為 JPEG、PNG 或 WebP,然後在繪製任何內容之前檢查檔案大小與解碼像素預算。這就是為何超過 25 MB 或超過 40 megapixels 的輸入會被拒絕並顯示特定訊息:一個小的壓縮檔案仍可能解碼成非常大的影像,而畫布所需的記憶體與解碼大小成正比,與磁碟大小無關。

檔案通過驗證後,共用的繪製計畫會將模糊半徑與矩形裁剪至來源影像原始像素座標中的安全範圍,然後為頁面上的預覽衍生出另一個成比例的計畫。渲染時會先將未變動的來源像素繪製到預覽畫布上。在矩形模式下,繪製接著會裁剪至裁剪後的矩形,並透過該裁剪範圍執行經濾鏡的繪製,使矩形外的像素保持原始狀態。Canvas API 的 filter 屬性才是實際在繪製時執行模糊的機制,這是 MDN CanvasRenderingContext2D.filter 參考文件中記載的標準瀏覽器機制。

對於下載,工具不會重複使用小型預覽畫布。它會在來源影像的原始寬度與高度上建立一個獨立的離屏畫布,在該處繪製原始像素,以完整解析度套用相同的模糊,並透過畫布的 toBlob 方法產生 PNG。這種分離機制正是防止低解析度匯出的關鍵 —— 900 像素的預覽絕不會在無聲無息中成為最終檔案。

檔案限制與下載前需檢查的事項

兩個硬性限制控管整個工作流程。第一個是檔案的磁碟大小:超過 25 MB 的檔案會在解碼開始前遭到拒絕。第二個是解碼後的像素數:超過 40 megapixels 的影像即使檔案本身很小也會遭到拒絕,因為瀏覽器所需的記憶體與未壓縮的影像大小成正比。這些訊息會在任何模糊產生之前出現,因此超過限制的檔案不會產生部分或截斷的輸出。

  • 確認來源尺寸。顯示的像素寬度與高度是矩形模式所使用的單位。若它們與您預期的不同,您可能看到的是原始像素大小,而非其他檢視器中顯示的顯示大小。
  • 先檢查預覽,再檢查匯出。頁面上的預覽僅供檢查用途,不作為匯出依據。請務必以 100% 縮放開啟下載的 PNG,以確認矩形、半徑與輸出尺寸。
  • 查看邊界。由於模糊核會取樣相鄰像素,矩形的邊緣並非硬邊切割。放置在邊界兩個像素內的人臉仍可能輕微滲透到模糊區域。若您希望在過渡區域有更多周圍內容,可以增加矩形大小或半徑。
  • 自由重新渲染。每次新生成都會取代先前的下載物件。更換檔案或離開頁面會釋放暫存物件 URL,因此您的分頁中不會累積任何內容。
  • 保留原始檔案。一個值得信賴的工作模式是上傳檔案副本,產生模糊後的 PNG,然後以全尺寸並排比較兩者。

模糊效果並不等同於遮蔽

模糊是一種視覺效果,並非移除。模糊後的像素仍存在於 PNG 中,只是與相鄰像素取平均值。在許多情況下這已經足夠 —— 隨意的觀看者不會注意到被柔化的人臉 —— 但底層資訊通常仍可還原,特別是從高解析度匯出的檔案中,原始像素可能被重建、銳化,或被知道該看什麼的人直接讀取。車牌、帳號、地址、簽名與文字欄位也適用同樣情況。

當目標是呈現、設計或一般性的隱私需求時,請使用 Blur Image 工具。若目標是永久隱藏某段資訊 —— 例如用於已發佈的文件、法律揭露或受規範的資料集 —— 請在專為遮蔽設計的工作流程中覆蓋或移除來源像素,並驗證匯出的檔案、其中繼資料、任何隱藏圖層與周圍內容。本工具刻意不聲稱能匿名化、去識別化或永久刪除內容;它只會精確執行您所要求的像素運算,不多也不少。

將模糊與其他本機影像編輯搭配使用

模糊後的 PNG 一旦存到磁碟,同樣以隱私優先的方式即可延伸至後續編輯。您可以無需重新上傳即可調整結果大小、裁剪以聚焦於模糊區域、將其轉換為較小的格式以利分享,或擷取調色盤以符合品牌風格。每個步驟都在瀏覽器中完成,因此檔案無需離開您的裝置即可進行第二次調整,且原始檔案在整個工作流程中都會在您的機器上保持不變。

延伸閱讀:如何為 PNG 檔案加上背景(保持相同尺寸)。

延伸閱讀:如何在 Photoshop 中為 PNG 加上背景。