寫在前面

最近有個兼職需要手動下載網頁圖片，兩分/張，這勞動力也太廉價了，為了節省時間，應該開動腦筋，于是寫了個js，但是我太菜了只能寫個半自動化的……

開始

1.首先準備一個網頁，就用某瓣舉例。

開發者模式下能看見很多img標簽。發現我們想要的圖片都在這個div里，可以自己加個標識用的id。

2.獲取這個div中的所有img。

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

3. 編寫一個下載圖片的函數

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

function downloadIamge(imgsrc, name){//下載圖片地址和圖片名let image = new Image();// 解決跨域 Canvas 污染問題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編碼數據let a = document.createElement("a"); // 生成一個a元素let event = new MouseEvent("click"); // 創建一個單擊事件a.download = name || "photo"; // 設置圖片名稱a.href = url; // 將生成的URL設置為a.href屬性a.dispatchEvent(event); // 觸發a的單擊事件}image.src = imgsrc; }

?4.調用函數

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

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

?演示效果

?

【注意】如果想更改圖片存儲路徑，我選擇在瀏覽器里設置下默認下載路徑（所以說是半自動）。

如果圖片太多了建議寫個延時函數，不然要卡死了。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。