網(wǎng)頁(yè)制作圖片素材保存技巧:圖片助手(ImageAssistant)
時(shí)間:2023-07-26 12:54:02 | 來(lái)源:網(wǎng)站運(yùn)營(yíng)
時(shí)間:2023-07-26 12:54:02 來(lái)源:網(wǎng)站運(yùn)營(yíng)
網(wǎng)頁(yè)制作圖片素材保存技巧:圖片助手(ImageAssistant):搜集圖片,再一張張保存圖片再命名,會(huì)給網(wǎng)頁(yè)制作帶來(lái)很不好的體驗(yàn)和效率。
所以,為了擺脫這種模式,我找到了Chrome下的一款圖片保存插件:
圖片助手(ImageAssistant)Chrome應(yīng)用商店:
https://chrome.google.com/webstore/detail/dbjbempljhcmhlfpfacalomonjpalpko下載安裝好了,就可以開(kāi)始制作網(wǎng)頁(yè)了
展示一個(gè)網(wǎng)頁(yè)的制作,用這個(gè)ImageAssistant插件輔助開(kāi)發(fā)。
這是一個(gè)簡(jiǎn)單有效的圖片素材保存替換教程。
希望可以幫到你的開(kāi)發(fā),或帶給你靈感。
第一步,打開(kāi)chrome,尋找自己需要的圖片,比如我要一張banner圖片,右鍵復(fù)制它的圖片地址。
PS:這個(gè)圖片地址是指在這個(gè)
http://www.bnu.edu.cn服務(wù)器上的地址
圖片地址:
https://www.bnu.edu.cn/images/content/2020-05/20200521085839240146.jpg
第二步,將復(fù)制的圖片地址粘貼到網(wǎng)頁(yè)的<img>標(biāo)簽Src屬性中。
重復(fù)上述兩步,讓你項(xiàng)目的所有網(wǎng)頁(yè)上<img>的src屬性全都變成所謂的外鏈為止:
圖片地址:
https://www.bnu.edu.cn/images/content/2020-05/20200521085839240146.jpg
第三步,點(diǎn)擊Chrome網(wǎng)頁(yè)插件ImageAssistant的提取本頁(yè)圖片,
所有引用的圖片都在下載列表上,點(diǎn)擊下載全部即可完成圖片保存到本地。
默認(rèn)的保存規(guī)則是,文件名是ix00000xx的,
文件位置:下載/ImageAssistant/當(dāng)前時(shí)間>網(wǎng)頁(yè)名。
圖片保存位置在項(xiàng)目文件中新建一個(gè)文件夾images,并打開(kāi)它。
新建一個(gè)Finder文件窗口,之后再將以網(wǎng)頁(yè)名命名的文件夾拖到images文件夾中。
此時(shí),若圖片已經(jīng)全部下載到本地,則項(xiàng)目中已經(jīng)存在所有需要的圖片。
第四步,更換項(xiàng)目的所有HTML文件中<img>的src屬性,首先針對(duì)所有HTML中存在一樣的地址,如Logo圖片、底部圖片。
使用IDE(集成開(kāi)發(fā)環(huán)境)的軟件替換,以Vscode為例,首頁(yè)的logo圖片文件為例。
點(diǎn)擊全部替換按鈕,即可將首頁(yè)的logo圖片地址全部替換成本地路徑。
全部替換按鈕最麻煩的是針對(duì)于不同的數(shù)據(jù)字段,先要剔除外鏈。
目前想到最好的方法是,找一個(gè)支持正則表達(dá)式的編輯器,編寫(xiě)正則表達(dá)式來(lái)將所有的http開(kāi)頭的url外鏈刪除,如此,外鏈已成功清除。
接下來(lái)就是在已經(jīng)剔除的src屬性中補(bǔ)充本地圖片地址就好,這個(gè)過(guò)程最好是分列兩個(gè)窗口,一個(gè)是網(wǎng)頁(yè)文件,一個(gè)是文件資源管理器,確保本地圖片地址正確。
這樣相比,平常的圖片搜尋是不是要麻煩一些呢