[Mac] 在 Retina 螢幕抓圖時,影像長寬變大兩倍?

[Mac] 在 Retina 螢幕抓圖時,影像長寬變大兩倍?

公司換了新的 Mac Book Pro,是有搭配 Retina 螢幕的,

看起來是變清晰了沒錯,但很快的就遇到了問題:

螢幕截圖的時候,截出來的圖長寬都會變兩倍大??

 

先瞄一下 Retina 螢幕是如何運作的… 有興趣的人也可以參考一下:

How Does The Apple Retina Display Work?

Apple 認為人眼在 10~12 吋 (25~30 cm) 的距離下,

大約只能分辦出 300 PPI (pixels per inch),

因此如果在同樣大小的螢幕裡,塞入更多的像素 (pixel),

讓 PPI 超過 300 的話,一般人是看不出像素的顆粒的~

這個值與視角和觀看距離都有關係,因此同樣是 Retina 螢幕,

Mac Book Pro 13″ 只有 227 PPI,但 iPhone 是 326 PPI~

 

那這件事和我螢幕截圖後,長寬變兩倍有什麼關係呢?

在 Retina 螢幕下抓一個視窗的圖,再用 sips 看一下屬性,

注意到它的長寬各是 972×462 (原本預期是 486×231),且 DPI 是 144,

但正常的網頁圖片的 DPI 應該是 72:

testuser@localhost ~/Desktop $ sips -g all ScreenShot*.png

/Users/testuser/Desktop/ScreenShot_20170516_134036.png
  pixelWidth: 972
  pixelHeight: 462
  dpiWidth: 144.000
  dpiHeight: 144.000

 

目前個人 (可能不正確) 的理解是,

Apple 為了能在 Retina 螢幕上,以高解析度的方式呈現截圖,

因此以兩倍 DPI 的方式儲存像素 (在同樣的寬度下,原本存一個像素變成存兩個像素)

而為了在 PNG 中儲存這長寬各多一倍的像素量 ,

只好把圖片長寬都加大一倍,才有辦法容納多出來的一倍像素量。

 

Apple 在看到這種 DPI 144 的圖片時,

就會自動把多出一倍的像素量,塞到 Retina 螢幕上,

但若是一般 DPI 72 的圖片,沒有多出來的像素可以塞,

所以比較類似插點的方式 (interpolation),

因此一般的圖片在 Retina 螢幕上看起來會有點糊糊的…

(以上是個人理解,若有錯歡迎指正 ^^)

 

但因為圖都變大兩倍,顯示在網頁上會變得很怪,

因此還是希望在 Retina 螢幕上截圖時,會是原本的「正常」大小~

上網找了找,發現已經有人寫了工具 resample-dpi.sh

它可以幫忙檢查指定的圖片,如果 DPI 不是 72 的話,

就會自動調整圖片大小與 DPI,讓它回復 DPI 72 的正常大小~

 

例如當你想把桌面下所有的 PNG 檔都檢查一次的話,就這麼做:

testuser@localhost ~ $ resample-dpi.sh ~/Desktop/*.png

File ScreenShot_20170514_012107.png already 1440x900 pixels @ 72 DPI.
Resampling ScreenShot_20170516_134036.png to 486x231 pixels @ 72 DPI.

 

像原本是 DPI 144 的圖,修改之後,DPI 和圖片長寬都縮小了:

/Users/testuser/Desktop/ScreenShot_20170516_134036.png
  pixelWidth: 486
  pixelHeight: 231
  dpiWidth: 72.000
  dpiHeight: 72.000

 

像我的話則是將這支檔案整合到 Mac 的 Folder Action 裡面,

當有截圖檔出現在桌面上時,就自動執行 resample-dpi.sh 去處理圖片:

import os
import subprocess

ROOT_FOLDER = os.path.expanduser("~/Desktop")

def resample_dpi(file_path):
    subprocess.call(["/bin/sh", "/usr/local/bin/resample-dpi.sh", file_path])

for file_name in os.listdir(ROOT_FOLDER):
    if file_name.startswith("Screen Shot ") or file_name.endswith("screencapture.png") or file_name.endswith("screensave.png"):
        file_path = os.path.join(ROOT_FOLDER, file_name)
        resample_dpi(file_path)

 

不過這樣自動處理過的圖片,在 Retina 螢幕上看起來就是會稍微有點不清楚,

這似乎是沒辦法的囉…

 

參考資料:

Fixing “Retina” Image Scaling with Gyazo

(本頁面已被瀏覽過 1,177 次)

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料