一個(gè)精準(zhǔn)網(wǎng)頁截取的小技巧

然大家使用QQ，微信等工具可以非常方便的進(jìn)行截圖，但是卻存在邊緣無法精確截取的問題，還有要截取的超出當(dāng)前屏幕時(shí)就更加不方便了。

現(xiàn)在電腦瀏覽器已經(jīng)有很多種可供大家選擇，今天講一個(gè)用Firefox瀏覽器進(jìn)行精確截圖的一個(gè)小技巧。

下面講一個(gè)用firefox(火狐)瀏覽器進(jìn)行精確截圖的方法，首先先自行下載安裝完成firefox后，在菜單欄，工具->附加組件里，下載firebug插件(一個(gè)用于web開發(fā)調(diào)試的很好用的插件)。

安裝完成firebug后,按F12打開該插件：

瀏覽器底部出現(xiàn)該firebug窗口

鼠標(biāo)移到html代碼查看器區(qū)域，確定要截取的區(qū)域后，單擊確定該區(qū)域后，右鍵點(diǎn)擊彈出節(jié)點(diǎn)截圖菜單，單擊該菜單即可保存為圖片。

節(jié)點(diǎn)截圖

找到工具->下載就可以看到保存后的圖片了。

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

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

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

鼠標(biāo)右鍵圖片另存為

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

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

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

Google Chrome瀏覽器打開開發(fā)者模式Setting選項(xiàng)

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

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

瀏覽器禁用javascript

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

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

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

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

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

通過開發(fā)者模式查找圖片資源

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

圖片隱藏在背景圖中

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

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

高通官網(wǎng)logo可通過縮放獲取適合的大小

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

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

圖片助手插件，一鍵提取網(wǎng)頁圖片

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

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

agic Copy：輕松一點(diǎn)，精準(zhǔn)摳圖，讓創(chuàng)意無限放大！ - 精選真開源，釋放新價(jià)值。

概覽

Magic Copy（AI智能摳圖插件）是一個(gè)創(chuàng)新型的瀏覽器擴(kuò)展工具，其獨(dú)特之處在于能夠無縫集成于用戶的網(wǎng)頁環(huán)境之中，從而實(shí)現(xiàn)便捷高效的在線摳圖功能，極大地滿足了用戶對(duì)圖像處理、特別是摳圖需求方面的個(gè)性化訴求。相較于傳統(tǒng)復(fù)雜的圖像編輯軟件，Magic Copy憑借其直觀易用的設(shè)計(jì)理念，使得摳圖操作變得更加輕便流暢。

該插件的核心技術(shù)依托于Meta公司的Segment Anything AI模型，這一先進(jìn)的深度學(xué)習(xí)模型賦予了摳圖全新的內(nèi)涵和可能性。它運(yùn)用前沿的人工智能算法，能夠識(shí)別并智能分離出圖像中的前景主體。

一旦AI模型成功提取出前景對(duì)象，Magic Copy將自動(dòng)將其復(fù)制至系統(tǒng)剪貼板，用戶可立即在任何支持圖片粘貼的應(yīng)用程序中進(jìn)行后續(xù)編輯或合成，大大簡(jiǎn)化了摳圖工作流程，提升了工作效率。這一革新性功能不僅降低了圖像處理的專業(yè)門檻，也讓廣大用戶能夠隨時(shí)隨地享受高效智能化的摳圖體驗(yàn)，無疑為圖像創(chuàng)意設(shè)計(jì)領(lǐng)域帶來了全新的活力與便利。

截至發(fā)稿概況如下：

軟件地址：https://github.com/kevmo314/magic-copy
軟件協(xié)議：MIT
編程語言：

語言	占比
TypeScript	89.2%
JavaScript	5.5%
Shell	3.7%
Other	1.6%

收藏?cái)?shù)量：2.3K

主要功能

Magic Copy的使用非常簡(jiǎn)單。

下載安裝包

從Github上releases下載最新的 magic-copy.zip：https://github.com/kevmo314/magic-copy/releases。

瀏覽器安裝

解壓縮后，在Chrome的網(wǎng)址輸入框中輸入chrome://extensions/，以啟用“開發(fā)者模式”，然后單擊“加載解壓”。

一鍵摳圖

安裝完成后，右鍵網(wǎng)頁中的任意一張圖片，選擇Magic Copy。加載完成后，選擇需要摳出的部分，點(diǎn)擊右上角的Copy就可以把摳圖結(jié)果存入剪切板。

直接進(jìn)入摳圖界面，直接用鼠標(biāo)左鍵點(diǎn)選，比如下圖中的這個(gè)少女，點(diǎn)擊后，工具會(huì)自動(dòng)選取到整個(gè)少女的全身。

右上角可以選擇復(fù)制（copy）（圖片會(huì)復(fù)制到剪貼板），下載 - 圖片會(huì)直接下載到本地。

點(diǎn)擊左上方“預(yù)覽”可以直接查看摳圖效果

遐想

麻雀雖小五臟俱全，作為輕量的瀏覽器插件，Magic Copy能夠?qū)崿F(xiàn)如此強(qiáng)大的圖像摳圖效果的確不易，這很大程度都依靠了AI的力量。這樣的效率能夠幫助用戶迅速地?cái)U(kuò)展一大批高質(zhì)量素材。

但即便如此，因?yàn)轶w量的關(guān)系，Magic Copy也是存在著不足的：在面對(duì)擁有著復(fù)雜背景的圖片時(shí)，智能摳圖的效果其實(shí)并不讓人滿意。如下圖，兩手臂之間的花朵也在去背景的范圍內(nèi)，而摳圖擴(kuò)充功能又并未提供去除范圍之類的功能，只能在Undo恢復(fù)至上一步。因此，Magic Copy實(shí)際上并不太適合用在背景復(fù)雜的圖片上面。

而像面對(duì)著簡(jiǎn)單背景的圖片時(shí)，就完全沒有問題，即便頭發(fā)有很多邊邊角角，但是去背景的范圍還是辨識(shí)得不錯(cuò)的。

各位在使用Magic Copy的過程中是否遇到了有趣的問題？熱烈歡迎各位在評(píng)論區(qū)分享交流心得與見解！！！

聲明：本文為辣碼甄源原創(chuàng)，轉(zhuǎn)載請(qǐng)標(biāo)注"辣碼甄源原創(chuàng)首發(fā)"并附帶原文鏈接。

在線咨詢

上一篇：前端-css-屬性-滾動(dòng)條（scrollbar）樣式
下一篇：JS 遇到需要正則匹配來修改img標(biāo)簽

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商