写在前面

最近有个兼职需要手动下载网页图片，两分/张，这劳动力也太廉价了，为了节省时间，应该开动脑筋，于是写了个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学习记录】快速下载网页所有图片相关推荐

JavaScript学习记录01快速入门、基本语法、严格检查模式
文章目录 JavaScript学习记录01快速入门.基本语法.严格检查模式 1.1什么是JavaScript 1.2认识JavaScript框架 1.3快速入门 1.4基本语法入门 1.5数据类型简介 ...
下载网页所有图片的最简单的方法
下载网页所有图片的最简单的方法作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs Firefox浏览器提供了一种下载网页上所有图片的方法,操作非常简单.只需 ...
一款Github工具包-快速下载网页上的视频
导读:今天给大家推荐一款优秀的Github工具包,可以让您快速下载网页上的视频. You-get 项目主页:https://github.com/soimort/you-get/wiki/中文说明#i ...
下载网页所有图片-免费一键下载网页所有图片
下载网页所有图片,今天给大家分享一款免费图片批量下载软件,支持任意格式的图片批量下载,只需要输入关键词或批量导入网页链接即可批量下载图片.每个人都可以拥有各种高清图源.支持批量图片压缩/放大/添加水印 ...
一键下载网页所有图片一键下载网页所有图片
一键下载网页所有图片 https://imagecyborg.com/
JavaScript爬虫：定时下载网页表格内容并储存为txt文件
JavaScript爬虫:定时下载网页表格内容并储存为txt文件 function getData(tableBodyID) {let tBody = document.getElementById( ...
一键下载网页所有图片-免费批量网页图片下载软件
一键下载网页所有图片,今天给大家分享一款免费批量下载网页上的图片软件,支持任意格式的图片批量下载,只需要输入关键词或批量导入网页链接即可下载图片.批量下载任意网页上的图片,每个人都可以拥有各种高清图源 ...
nvm 下载node 下载不下来_一键下载网页所有图片，把美丽存下来
1 总有一些图片你想保存小周浏览了某个网页发现上面的有很多很漂亮的图片,于是想保存下来,开始一波疯狂操作:右键-->图片另存为....保存了50张图片后,手酸得不行了.只好求助于小南:我酸了, ...
一键下载网页所有图片，把美丽存下来
1 总有一些图片你想保存小周浏览了某个网页发现上面的有很多很漂亮的图片,于是想保存下来,开始一波疯狂操作:右键-->图片另存为....保存了50张图片后,手酸得不行了.只好求助于小南:我酸了, ...

【JavaScript学习记录】快速下载网页所有图片

写在前面

开始

演示效果

【JavaScript学习记录】快速下载网页所有图片相关推荐

最新文章

热门文章