網頁收成圖片會漏掉什麼:腳本跑出來的那一層
網頁收成圖片會漏掉什麼,取決於這一頁有多少東西是靠腳本撐起來的。在頁面成圖裡,讀的是這一頁的標記,再按標記畫成一張圖。腳本在這台瀏覽器裡不執行。所以頁面打開之後才由腳本補上去的內容,收下來的圖裡沒有。
標記裡寫著的都在:標題、段落、表格、邊框、底色、字級、行距、靜態的圖片。腳本後來的動作都在圖外:輪播翻到第二張、點了才展開的留言、滾到底才補上的清單、送出後才出現的提示。這不是畫質問題,那一塊內容從來沒進過標記。
頁面成圖只收靜態內容。腳本不執行,登入後的頁面不會出現,跨網域的圖片也不會出現。
腳本不跑,頁面停在第一次畫出來的樣子
一個靠腳本切換的輪播,收下來是第一張。滾動才載入的圖,收下來是空位。按鈕點開才有的彈層,收下來根本沒有這一層。你要的那句話如果只在彈層裡,這張圖就幫不上你。
登入之後的頁面同樣不出現。要收的是登入後才看得到的內容,圖裡只會有登入框,或者一片空白。就緒圖沒有登入,也沒有用來接收圖片的帳號伺服器,它不會替你去登入任何站點。這一頁只看瀏覽器能讀到的公開標記。
跨網域的圖片會空著
頁面上的圖如果放在別的網域下,收圖時讀不到那些像素,位置就空著。同一站點下的圖正常出現。你看到一塊留白、一個裂開的圖框、或者只剩邊框,多半是這件事,不是圖片壞了。
- 腳本生成的內容:輪播第二張、點開才有的留言、滾動才補的清單。
- 登入之後的頁面:收下來只有登入框,或者空白。
- 跨網域的圖片:位置空著,只剩邊框或者留白。
網址讀不到,就把 HTML 貼進去
有些頁面在瀏覽器裡讀不到網址:還在本地沒上線的、要連內網才打得開的、臨時拼出來的片段。這時改成把 HTML 原始碼貼進去,收的還是同一套靜態標記,漏掉的也還是同一批東西。
視窗寬度最窄按 320 來理解。窄螢幕和寬螢幕是兩套排版,同一頁在兩處收下來不一樣。收之前先想清楚這張圖給誰看:給手機看,就按窄的來。
輸出三種,挑一種
可以出 JPG、PNG,也可以出包了一層像素圖的 SVG。截圖、以文字為主、還要貼進文件的,留 PNG,字邊更乾淨。要發到只認 JPG 的地方,出 JPG。那個 SVG 只是把像素包了一層外殼,不是能無限放大的向量,放大一樣會糊。
圖太大不好發,就再走一趟體積收縮。收的是剛下載下來的那一份,原來的網頁沒有被改動。
頁面成圖一次做一頁。它不接過 40 個檔案那種批次,做完一頁下載一頁。
這張圖適合拿來做什麼
把一頁排版固定下來,發給不方便打開連結的人。留一份當時的證據,防止頁面第二天改了。貼進說明文件,讓讀者不用跳出去。這些都用得上。
不適合拿它去抓一段過程:滾動動畫的中間影格、載入時的骨架畫面、滑鼠移上去才變的樣子。那些都要腳本跑起來才有,而這裡腳本不跑。
只有兩件事會碰到網路
打開頁面時,這次造訪交給 51.LA 統計,統計的是有人打開了頁面,不是圖片檔案。檔案怎麼處理寫了這條邊界:圖片不上傳到就緒圖,這裡沒有登入,也沒有註冊。
另一件是第一次去背會下載一份辨識模型到這台裝置的快取,那是另一道工序,跟收網頁無關。計算結果留在本地,下載下來的是這台裝置剛產生的新檔案。
收下來之後看三眼
- 文字有沒有被擠斷。寬螢幕排版塞進窄視窗,標題容易折成三行。
- 圖有沒有空著。空了就換一張放在同一站點的圖再來一次。
- 存下來的是新檔案,網頁和原來的圖片都還在原處。
佇列只活在這一次打開裡。重新整理或者關掉頁面,還沒下載的結果就沒了。做完一頁先把圖收走,再做下一頁。