最近想做一個海報，為了更加方便快速實現我的需求，我讓 AI 直接幫我用 html 做了一下排版。排版倒是做好了，但是我需要的是一張圖片，現在就需要將 html 頁面轉換成一張圖片，且最好不能失真。
一般的做法是直接用微信截圖工具直接截圖，但是，現在這個頁面比較長，微信截圖工具目前還不支持滾動截圖，因此，這個方案就不采納。
還有一種方案就是自己用 python 寫一段代碼進行轉換一下。這種方案對于批量操作還比較適合?；蛘呔褪强梢哉乙粋€瀏覽器插件來解決這個問題。但是，現在我只需要臨時處理一下，我就不想折騰了。
那么，有沒有可能瀏覽器會自帶這個功能呢？
于是，我趕緊搜了一下，發(fā)現還真有！
要是真沒有的話，估計我還是得老老實實的找插件或者寫代碼了。
我發(fā)現有兩種非常實用的長截圖的方式：
完整頁面長截圖
這種方式就會將整個頁面全部截圖成圖片。
- 我們先打開瀏覽器的調試臺界面。
打開方式可以通過依次點擊 Chrome 瀏覽器右上角的那三個豎點 -> 更多工具 -> 開發(fā)者工具 進行打開。
你也可以通過快捷鍵的方式打開：
- Windows 用戶：直接按一下
F12鍵即可 - Mac 用戶：
?Command + ?Option + I
- 通過自帶工具截圖
隨后，我們通過快捷鍵：
- Windows 用戶：
Ctrl + Shift + P - Mac 用戶：
?Command + ?Shift + P
然后直接輸入命令 full 通過上下鍵選中 Capture full size screenshot 然后直接敲回車，Chrome 就會自動將整個網頁內容保存到本地。
部分網頁節(jié)點截圖
有時候，我們并不需要將整個網頁截圖下來，很有可能，我們只需要截取網頁中的某一個 div 中的內容就可以了。那么，怎么操作呢？
同樣，我們還是先打開瀏覽器的調試臺，然后，我們再點擊這里的嗅探元素按鈕，去選擇想要的部分。
打開嗅探元素也可以通過快捷鍵：
- Windows 用戶：
Ctrl + Shift + C - Mac 用戶：
?Command + ?Shift + C
當你點擊了嗅探元素按鈕之后，你將鼠標移動到頁面上，你會發(fā)現頁面會有選中的效果，并且當你將控制臺上切換到 Elements 時，也會有對應的元素被選中。
比如，在這里我選中了 class 為 header 的 div
當你選中了元素之后，隨后，我們通過快捷鍵：
- Windows 用戶：
Ctrl + Shift + P - Mac 用戶：
?Command + ?Shift + P
然后我們輸入 node 然后去選中 Capture node screenshot 直接敲回車，這樣，一張完美的選區(qū)截圖就產生了。
選區(qū)截圖如下所示：
這種方式完全是由渲染引擎直接輸出，比普通擴展速度更快，分辨率也更高。還是相當不錯的。
怎么樣？是不是又 get 到了一個新技能？
