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

1.最常見(jiàn)的直接右鍵保存

以百度首頁(yè)為例，在Logo圖上點(diǎn)擊：①鼠標(biāo)右鍵-②圖片另存為-③選擇存儲(chǔ)地址保存

2.當(dāng)點(diǎn)擊右鍵無(wú)效或沒(méi)有另存為時(shí)

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

在當(dāng)前頁(yè)面按下F12打開(kāi)開(kāi)發(fā)者工具，點(diǎn)擊右上角的三個(gè)小點(diǎn)，然后點(diǎn)開(kāi)Settings，如下圖：

找到Disable JavaScript并打鉤，這樣可以關(guān)閉網(wǎng)頁(yè)的javascript從而解除右鍵的限制，此時(shí)就像方法1一樣，可以在圖片上單擊右鍵保存圖片了。

注意：保存完圖片后記得取消打鉤，否則網(wǎng)站部分功能可能會(huì)出現(xiàn)無(wú)法使用的情況。

驚喜拓展：此方法同時(shí)可以解決無(wú)法復(fù)制網(wǎng)頁(yè)文本、無(wú)法使用Ctrl+V粘貼數(shù)據(jù)到網(wǎng)頁(yè)輸入框的問(wèn)題，如：無(wú)法復(fù)制百度文庫(kù)文檔內(nèi)容的問(wèn)題。

3.有些圖像為背景圖或圖像上有浮層時(shí)，無(wú)法使用上述兩個(gè)方法保存時(shí)

以華為官網(wǎng)為例，右鍵并沒(méi)有圖片另存為的選項(xiàng)：

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

有的圖片會(huì)被我們可愛(ài)的程序員放到背景圖中，如下圖，此時(shí)可以在Style中看到該圖片的鏈接

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

以高通官網(wǎng)的logo為例，按住Ctrl+鼠標(biāo)滾輪可縮放網(wǎng)頁(yè)，從而縮放圖片，截圖即可。

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

以華為官網(wǎng)為例，點(diǎn)擊插件，提取本頁(yè)圖片，即可提取當(dāng)前頁(yè)面中的所有圖片，選擇自己需要的就好，也可以批量一鍵保存所有，具體使用請(qǐng)自行探索。

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

們經(jīng)常會(huì)遇到這樣的一個(gè)問(wèn)題。

設(shè)計(jì)出了很牛逼的設(shè)計(jì)稿，客戶確認(rèn)了，前端靜態(tài)制作也出來(lái)，還原設(shè)計(jì)稿95%以上，客戶也確認(rèn)了。

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

完全和設(shè)計(jì)稿兩碼事？圖片不好看，到處都跑位。

客戶就罵過(guò)來(lái)了，你們是否也遇到這樣的事情？因?yàn)榭蛻舻墓緵](méi)有設(shè)計(jì)師啊，哈哈，這個(gè)問(wèn)題可能遇到的不少。

其實(shí)大家都會(huì)說(shuō)，這歸根到底都是客戶沒(méi)有處理圖片的問(wèn)題所造成的。然后大家都推來(lái)推去。

那么，前端制作工程師是否有辦法解決這樣的問(wèn)題，其實(shí)是可以的。如果因圖片問(wèn)題導(dǎo)致布局變了，解決了這個(gè)問(wèn)題就只剩下圖片的美觀性，那這個(gè)就可以跟客戶說(shuō)你要請(qǐng)個(gè)設(shè)計(jì)師幫你處理圖片啊。這樣不就解決問(wèn)題了嗎？

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

舉個(gè)栗子：

這個(gè)列表是不是很整齊，看起來(lái)比較舒服，雖然圖片有那么點(diǎn)點(diǎn)的變形，但不影響閱讀。

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

那么就以這個(gè)來(lái)說(shuō)說(shuō)解決方式。

大家都知道圖片有一種特性，就是當(dāng)圖片的寬度改變時(shí)，高度也會(huì)隨著等比例在改變。

例如：一張寬高都為100px的圖片，如果把寬度調(diào)至200px，那么高度是不是也會(huì)隨之變成200px；沒(méi)錯(cuò)的，就是利用這個(gè)特性來(lái)解決布局亂的情況。

這里就拿上一次說(shuō)到的 “圖文列表 純css布局” 那次說(shuō)的布局來(lái)說(shuō)說(shuō)，因?yàn)槎际亲龊茫蜕厦婺莻€(gè)圖類(lèi)似。偷偷懶。如果沒(méi)看過(guò)那篇，搜一下 “圖文列表 純css布局”，就可以找到了。（如需下載源碼，請(qǐng)關(guān)注微信公眾號(hào)：JS學(xué)吧）

效果是這樣的：

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

用PS打開(kāi)文件，用裁剪工具把圖片完整的裁下來(lái)，如下圖

裁完成，再點(diǎn)擊菜單欄目 “圖像 > 圖像大小” 或 按著 Alt鍵，再點(diǎn)兩次 I 鍵。可以調(diào)出 “圖像大小” 彈窗。

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

我們先調(diào)成10px，確定后，再把圖層的 “小眼睛” 關(guān)掉，另存為一個(gè) png24 的透明圖片，記得哦！！一定是要png24的。名字自己定啦！！

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

<a href=""><img src="rect.png" alt="" width="100%"></a>然后刷新看看效果，是不是發(fā)現(xiàn)原來(lái)的圖片不見(jiàn)的，變成空白的，但是原來(lái)的布局結(jié)構(gòu)沒(méi)有改變。其實(shí)要的就是這樣的效果。

然后我們?cè)?img 的外層再包個(gè)div，就拿這個(gè)div來(lái)放圖片。順便加個(gè)背景色看看效果。

<a href="">

<div style="background: #000;">

<img src="rect.png" alt="" width="100%">

</div>

</a>

看，占位圖片的效果出來(lái)了。外層div的寬度和高度都被img撐開(kāi)了。是不是達(dá)到了想要的效果。

關(guān)鍵的時(shí)候來(lái)了。就是處理圖片。我們要把產(chǎn)品圖片做為背景的形式輸出即可以。把圖片的路徑寫(xiě)在div上面的就解決了。再加上css3新屬性就可以了。

HTML如下：

<a href="">

<div class="cover-img" style="background-image: url(pic001.jpg);">

<img src="rect.png" alt="" width="100%">

</div>

</a>

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

.cover-img {

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

注意、注意、注意，中要的事說(shuō)三遍。重點(diǎn)就在于 css3 的新屬性 background-size: cove；

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

是不是不明白，那就對(duì)了，挺不好理解。最好還是用實(shí)際效果來(lái)看看。

最終出來(lái)的效果就是和最開(kāi)始的那張圖片一樣的，只是看不出來(lái)而已。

那么我們就來(lái)玩真的。直接上網(wǎng)整一張大圖的路徑放進(jìn)去看看就知道了。

上某某網(wǎng)站找特大尺寸的圖片來(lái)，例如下面這張：尺寸是2533x1583，夠大了，也不是正方形哦！！我們一開(kāi)始說(shuō)的都是正方形，現(xiàn)在弄個(gè)不是正方形的圖片來(lái)試試效果。

HTML如下：

<a href="">

<div class="cover-img" style="background-image: url(pic002.jpg);">

<img src="rect.png" alt="" width="100%">

</div>

</a>

更改url里的路徑即可

出來(lái)的效果如下：

是不是自動(dòng)調(diào)整了。

我們?cè)贀Q一張高形狀的圖片。二哈圖：尺寸是2448x3264

HTML：如下

<a href="">

<div class="cover-img" style="background-image: url(pic003.jpg);">

<img src="rect.png" alt="" width="100%">

</div>

</a>

最終效果：

怎么樣，效果還可以吧！！不知道你們看出了什么了沒(méi)有。

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

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

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

例如不支持IE瀏覽器，圖片顯示不全，多一個(gè)文件服務(wù)器要多請(qǐng)求一次.....等等問(wèn)題！！做圖時(shí)的內(nèi)容盡可能在正中間。

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

獲取《vue3.0大公司后臺(tái)管理系統(tǒng)開(kāi)發(fā) 正規(guī)開(kāi)發(fā)流程項(xiàng)目實(shí)踐》視頻，

請(qǐng)點(diǎn)擊下面 “了解更多” 或 請(qǐng)關(guān)注微信公眾號(hào)《手把手?jǐn)]碼前端》

者：小豪

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