把圖片裁成圓,聽起來該是一步就完的事。麻煩出在四個角上。圓嵌在一個方里,圓以外的那四個角總得變成某種東西。它們要是變成白色,你的圓就帶著一個白方塊,一旦放到任何非白色的東西上就露出來。它們要是變成透明,圓就能幹淨地浮在任何背景上。這個差別,完全取決於檔案格式。

為什麼必須是 PNG

把圖片裁成圓形並帶透明背景(PNG) — visual 1
為什麼必須是 PNG

JPEG 存不了透明。JPEG 裡的每一個畫素都是不透明的,所以一張"圓形"JPEG 其實是一個方形,四角填著白色(或別的顏色)。它只有貼在配色一致的背景上才看著是圓的,放到深色頁面或彩色卡片上就穿幫。

PNG 支援 alpha 通道——每個畫素可以完全可見、完全不可見,或介於兩者之間。正是這個,才讓圓以外的四角能真正是空的。所以一張透明背景的圓形裁切,永遠是 PNG。要是某個工具給了你一張 JPEG 還說它透明,那不可能——格式就不允許。

怎麼做出來

把圖片裁成圓形並帶透明背景(PNG) — visual 2
怎麼做出來

放進一張圖,選圓形,匯出時選透明背景。它內部會從圖片正中間取出最大的正方形,再按全解析度在上面套一個圓形遮罩,所以匯出的邊緣是利落的,而不是從一張小預覽圖放大來的。四個角出來就是透明的,這張 PNG 可以直接放到任何背景上。

你也不只能做整個圓。圓角可調的圓角方形對應那些想要柔和圓角的 app 圖示和卡片縮圖,普通正方形則給你一個乾淨居中、不加遮罩的裁切。三種匯出方式一樣,形狀以外的區域都是透明的。

關於邊緣質量的一個細節

有一點值得知道:遮罩是在圖片的全解析度上套的,不是套在縮小的預覽圖上。這讓圓邊保持利落,不發鋸齒也不發虛。你要是在別處裁過圓、注意到邊緣有階梯狀的毛刺,那多半就是對一張小預覽圖套遮罩再放大的結果。按原尺寸來做,就能避開這個問題。

老實說的限制

裁切是居中的——它取圖片正中間的那個方,沒有可以挪動取景框的手柄。主體已經居中時這很理想,沒居中時就有點彆扭。你想要的部分要是偏在一邊,先用一個基礎裁剪工具把圖裁到它那兒,再對結果做圓形裁切。它也是一次處理一張,所以它是為單張乾淨的裁切準備的,不是為一批五十張。

圖片留在你的裝置上

整件事都在你的瀏覽器裡跑。你的圖片在本地解碼、取方、遮罩、編碼成 PNG——不上傳、不用註冊、沒有伺服器收到過這個檔案。頁面載入一次,之後離線也能用。選一張圖,裁成圓,匯出透明 PNG,它放到哪兒都能幹淨地待著。