寫(xiě)在前面

最近有個(gè)兼職需要手動(dòng)下載網(wǎng)頁(yè)圖片，兩分/張，這勞動(dòng)力也太廉價(jià)了，為了節(jié)省時(shí)間，應(yīng)該開(kāi)動(dòng)腦筋，于是寫(xiě)了個(gè)js，但是我太菜了只能寫(xiě)個(gè)半自動(dòng)化的……

開(kāi)始

1.首先準(zhǔn)備一個(gè)網(wǎng)頁(yè)，就用某瓣舉例。

開(kāi)發(fā)者模式下能看見(jiàn)很多img標(biāo)簽。發(fā)現(xiàn)我們想要的圖片都在這個(gè)div里，可以自己加個(gè)標(biāo)識(shí)用的id。

2.獲取這個(gè)div中的所有img。

var imgList = document.querySelectorAll("#myflag img")

3. 編寫(xiě)一個(gè)下載圖片的函數(shù)

這部分我抄的o(╥﹏╥)o?流年隨風(fēng)——js 根據(jù)url 下載圖片

function downloadIamge(imgsrc, name){//下載圖片地址和圖片名let image = new Image();// 解決跨域 Canvas 污染問(wèn)題image.setAttribute("crossOrigin", "anonymous");image.onload = function() {let canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;let context = canvas.getContext("2d");context.drawImage(image, 0, 0, image.width, image.height);let url = canvas.toDataURL("image/png"); //得到圖片的base64編碼數(shù)據(jù)let a = document.createElement("a"); // 生成一個(gè)a元素let event = new MouseEvent("click"); // 創(chuàng)建一個(gè)單擊事件a.download = name || "photo"; // 設(shè)置圖片名稱(chēng)a.href = url; // 將生成的URL設(shè)置為a.href屬性a.dispatchEvent(event); // 觸發(fā)a的單擊事件}image.src = imgsrc; }

?4.調(diào)用函數(shù)

將圖片的alt屬性作為保存的圖片名。

for(var i = 0 ;i < imgList.length;i++){downloadIamge(imgList[i].src,imgList[i].alt) }

?演示效果

?

【注意】如果想更改圖片存儲(chǔ)路徑，我選擇在瀏覽器里設(shè)置下默認(rèn)下載路徑（所以說(shuō)是半自動(dòng)）。

如果圖片太多了建議寫(xiě)個(gè)延時(shí)函數(shù)，不然要卡死了。

總結(jié)

以上是生活随笔為你收集整理的【JavaScript学习记录】快速下载网页所有图片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。