如何提取網頁里的圖片？一鍵提取圖片？快速、高清

作中我們經常需要尋找各種各樣的圖片素材，有時候你找到了一張很好的圖，卻苦于無法保存到本地，最終無奈使用微信截圖截了一張，本文將教你如何快速的保存網頁上的高清圖。

1.最常見的直接右鍵保存

以百度首頁為例，在Logo圖上點擊：①鼠標右鍵-②圖片另存為-③選擇存儲地址保存

鼠標右鍵圖片另存為

2.當點擊右鍵無效或沒有另存為時

以AiforWork本站為例，在圖片上點擊右鍵任何效果，推薦使用Google Chrome瀏覽器，百分瀏覽器等谷歌內核的瀏覽器，步驟如下：

在當前頁面按下F12打開開發者工具，點擊右上角的三個小點，然后點開Settings，如下圖：

Google Chrome瀏覽器打開開發者模式Setting選項

找到Disable JavaScript并打鉤，這樣可以關閉網頁的javascript從而解除右鍵的限制，此時就像方法1一樣，可以在圖片上單擊右鍵保存圖片了。

注意：保存完圖片后記得取消打鉤，否則網站部分功能可能會出現無法使用的情況。

瀏覽器禁用javascript

驚喜拓展：此方法同時可以解決無法復制網頁文本、無法使用Ctrl+V粘貼數據到網頁輸入框的問題，如：無法復制百度文庫文檔內容的問題。

3.有些圖像為背景圖或圖像上有浮層時，無法使用上述兩個方法保存時

以華為官網為例，右鍵并沒有圖片另存為的選項：

某些情況無法郵件保存圖片

此時可在該圖片的位置，單擊鼠標右鍵，選擇檢查，即可在右側開發者工具中看到該圖片的鏈接地址，復制鏈接地址在新窗口打開或者在鏈接上單擊右鍵：open in new tab在新窗口打開即可如方法1右鍵直接保存。

通過開發者模式查找圖片資源

有的圖片會被我們可愛的程序員放到背景圖中，如下圖，此時可以在Style中看到該圖片的鏈接

圖片隱藏在背景圖中

4.矢量圖或代碼圖、一般為網站的logo，此時如果需要高清圖可以通過縮放瀏覽器到自己需要的大小截圖即可，如下圖：

以高通官網的logo為例，按住Ctrl+鼠標滾輪可縮放網頁，從而縮放圖片，截圖即可。

高通官網logo可通過縮放獲取適合的大小

5.終極方法建議常備：通過圖片助手(ImageAssistant)插件一鍵提取

以華為官網為例，點擊插件，提取本頁圖片，即可提取當前頁面中的所有圖片，選擇自己需要的就好，也可以批量一鍵保存所有，具體使用請自行探索。

圖片助手插件，一鍵提取網頁圖片

圖片助手(ImageAssistant)插件效果預覽

覺得有用就分享給你的朋友吧，記住Aifor.Work | 愛工作，效率提升，讓工作充滿樂趣。

們經常會遇到這樣的一個問題。

設計出了很牛逼的設計稿，客戶確認了，前端靜態制作也出來，還原設計稿95%以上，客戶也確認了。

那是個完美啊！！做完程序了，交給客戶了。然后客戶自己上傳了圖片了。那個悲催?。?！慘不忍睹?。?！

完全和設計稿兩碼事？圖片不好看，到處都跑位。

客戶就罵過來了，你們是否也遇到這樣的事情？因為客戶的公司沒有設計師啊，哈哈，這個問題可能遇到的不少。

其實大家都會說，這歸根到底都是客戶沒有處理圖片的問題所造成的。然后大家都推來推去。

那么，前端制作工程師是否有辦法解決這樣的問題，其實是可以的。如果因圖片問題導致布局變了，解決了這個問題就只剩下圖片的美觀性，那這個就可以跟客戶說你要請個設計師幫你處理圖片啊。這樣不就解決問題了嗎？

這種方式和微信朋友圈的九宮格圖片展示方式類似，只顯示圖片中間的內容，其他的將會被隱藏。

舉個栗子：

這個列表是不是很整齊，看起來比較舒服，雖然圖片有那么點點的變形，但不影響閱讀。

如果其中有一張圖片的尺寸稍微有一點點不一樣，肯定會出現跑位的情況。就像下面這樣。這樣客戶看到不被投訴才怪哦??！

那么就以這個來說說解決方式。

大家都知道圖片有一種特性，就是當圖片的寬度改變時，高度也會隨著等比例在改變。

例如：一張寬高都為100px的圖片，如果把寬度調至200px，那么高度是不是也會隨之變成200px；沒錯的，就是利用這個特性來解決布局亂的情況。

這里就拿上一次說到的 “圖文列表純css布局” 那次說的布局來說說，因為都是做好，和上面那個圖類似。偷偷懶。如果沒看過那篇，搜一下 “圖文列表純css布局”，就可以找到了。（如需下載源碼，請關注微信公眾號：JS學吧）

效果是這樣的：

如何切出占位圖呢？如下操作

用PS打開文件，用裁剪工具把圖片完整的裁下來，如下圖

裁完成，再點擊菜單欄目 “圖像 > 圖像大小” 或按著 Alt鍵，再點兩次 I 鍵?？梢哉{出 “圖像大小” 彈窗。

可以看到 “像素大小” 的寬度和高度都為260px，那么只要調其中一個就可以，就可以達到等比例調整。

我們先調成10px，確定后，再把圖層的 “小眼睛” 關掉，另存為一個 png24 的透明圖片，記得哦！！一定是要png24的。名字自己定啦?。?/p>

然后把 img 中的圖片路徑改為如下：

<a href=""><img src="rect.png" alt="" width="100%"></a>然后刷新看看效果，是不是發現原來的圖片不見的，變成空白的，但是原來的布局結構沒有改變。其實要的就是這樣的效果。

然后我們在 img 的外層再包個div，就拿這個div來放圖片。順便加個背景色看看效果。

</div>

</a>

看，占位圖片的效果出來了。外層div的寬度和高度都被img撐開了。是不是達到了想要的效果。

關鍵的時候來了。就是處理圖片。我們要把產品圖片做為背景的形式輸出即可以。把圖片的路徑寫在div上面的就解決了。再加上css3新屬性就可以了。

HTML如下：

</div>

</a>

用背景樣式 background-image 定入路徑。再添加一個 cover-img 的類名。然后 cover-img 的樣式如下：

.cover-img {

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

注意、注意、注意，中要的事說三遍。重點就在于 css3 的新屬性 background-size: cove；

這個屬性就是會把背景圖片，以等比例的形式保持圖像本身的寬高比例，將圖片縮放到正好完全覆蓋定義背景的區域。

是不是不明白，那就對了，挺不好理解。最好還是用實際效果來看看。

最終出來的效果就是和最開始的那張圖片一樣的，只是看不出來而已。

那么我們就來玩真的。直接上網整一張大圖的路徑放進去看看就知道了。

上某某網站找特大尺寸的圖片來，例如下面這張：尺寸是2533x1583，夠大了，也不是正方形哦！！我們一開始說的都是正方形，現在弄個不是正方形的圖片來試試效果。

HTML如下：

</div>

</a>

更改url里的路徑即可

出來的效果如下：

是不是自動調整了。

我們再換一張高形狀的圖片。二哈圖：尺寸是2448x3264

HTML：如下

</div>

</a>

最終效果：

怎么樣，效果還可以吧??！不知道你們看出了什么了沒有。

第一張是寬形狀的圖片，是以高度填滿 div 的區域。

第二張是高形狀的圖片，是以寬度填滿 div 的區域。

全都是靠著 background-size: cover; 這個屬性解決了。但也是有不好的地方。

例如不支持IE瀏覽器，圖片顯示不全，多一個文件服務器要多請求一次.....等等問題??！做圖時的內容盡可能在正中間。

然后，不管客戶上傳什么鬼形狀的圖片，都不會產生布局變亂的情況。

獲取《vue3.0大公司后臺管理系統開發正規開發流程項目實踐》視頻，

請點擊下面 “了解更多” 或請關注微信公眾號《手把手擼碼前端》

者：小豪

鏈接：https://segmentfault.com/a/1190000023056917

在線咨詢

上一篇：好程序員HTML5培訓教程-html和css基礎知識
下一篇：html調用攝像頭

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

如何提取網頁里的圖片？一鍵提取圖片？快速、高清

1.最常見的直接右鍵保存

2.當點擊右鍵無效或沒有另存為時

在當前頁面按下F12打開開發者工具，點擊右上角的三個小點，然后點開Settings，如下圖：

找到Disable JavaScript并打鉤，這樣可以關閉網頁的javascript從而解除右鍵的限制，此時就像方法1一樣，可以在圖片上單擊右鍵保存圖片了。

3.有些圖像為背景圖或圖像上有浮層時，無法使用上述兩個方法保存時

此時可在該圖片的位置，單擊鼠標右鍵，選擇檢查，即可在右側開發者工具中看到該圖片的鏈接地址，復制鏈接地址在新窗口打開或者在鏈接上單擊右鍵：open in new tab在新窗口打開即可如方法1右鍵直接保存。

有的圖片會被我們可愛的程序員放到背景圖中，如下圖，此時可以在Style中看到該圖片的鏈接

4.矢量圖或代碼圖、一般為網站的logo，此時如果需要高清圖可以通過縮放瀏覽器到自己需要的大小截圖即可，如下圖：

以高通官網的logo為例，按住Ctrl+鼠標滾輪可縮放網頁，從而縮放圖片，截圖即可。

5.終極方法建議常備：通過圖片助手(ImageAssistant)插件一鍵提取

以華為官網為例，點擊插件，提取本頁圖片，即可提取當前頁面中的所有圖片，選擇自己需要的就好，也可以批量一鍵保存所有，具體使用請自行探索。

您的項目需求

如何提取網頁里的圖片？一鍵提取圖片？快速、高清

在當前頁面按下F12打開開發者工具，點擊右上角的三個小點，然后點開Settings，如下圖：

找到Disable JavaScript并打鉤，這樣可以關閉網頁的javascript從而解除右鍵的限制，此時就像方法1一樣，可以在圖片上單擊右鍵保存圖片了。

3.有些圖像為背景圖或圖像上有浮層時，無法使用上述兩個方法保存時

此時可在該圖片的位置，單擊鼠標右鍵，選擇檢查，即可在右側開發者工具中看到該圖片的鏈接地址，復制鏈接地址在新窗口打開或者在鏈接上單擊右鍵：open in new tab在新窗口打開即可如方法1右鍵直接保存。

有的圖片會被我們可愛的程序員放到背景圖中，如下圖，此時可以在Style中看到該圖片的鏈接

4.矢量圖或代碼圖、一般為網站的logo，此時如果需要高清圖可以通過縮放瀏覽器到自己需要的大小截圖即可，如下圖：

以高通官網的logo為例，按住Ctrl+鼠標滾輪可縮放網頁，從而縮放圖片，截圖即可。

以華為官網為例，點擊插件，提取本頁圖片，即可提取當前頁面中的所有圖片，選擇自己需要的就好，也可以批量一鍵保存所有，具體使用請自行探索。