用js脚本一键下载网页所有图片

年前这两天稍微闲一点了，琢磨了一点js脚本，功能是把当前网页页面上的所有图片一次性保存到本地，免得每次都要对图片右键保存。

测试环境：Chrome开发者模式下（启动Chrome，按F12即可）

测试网页：知乎某问题

原理很简单，用到了a标签的href及download属性和点击事件。

直接贴代码吧：

 //一个对象，存储页面图片数量和下载的数量
 var monitorObj = {
     imgTotal: 0,
     imgLoaded: 0
 }
 //创建a标签，赋予图片对象相关属性，并插入body
 var createA = function (obj) {
     var a = document.createElement("a");
     a.id = obj.id;
     a.target = "_blank";//注意：要在新页面打开
     a.href = obj.url;
     a.download = obj.url;

     document.body.appendChild(a);
 }

 //获取页面的图片
 var imgs = document.images;
 //创建每个图片对象的对应a标签
 for (var i = 0; i < imgs.length;i++){
     var obj = {
         id: "img_" + i,
         url: imgs[i].src
     }
     //过滤掉不属于这几种类型的图片
     if (["JPG", "JPEG", "PNG","GIF"].indexOf(obj.url.substr(obj.url.lastIndexOf(".")+1).toUpperCase()) < 0) {
         continue;
     }
     //这里是为了去掉知乎用户头像的图片，头像大小是50*50
     if (imgs[i].width <= 50 || imgs[i].height <= 50) {
         continue;
     }
     //统计图片数量
     monitorObj.imgTotal++;
     createA(obj);
 }
 //开始下载图片
 for (var i = 0; i < imgs.length; i++) {
     if (document.getElementById("img_" + i)) {
         //重点：触发a标签的click事件
         document.getElementById("img_" + i).click();
         monitorObj.imgLoaded++; //统计已下载的图片数量
     }
 }
 console.log("已下载："+monitorObj.imgLoaded + "/" + monitorObj.imgTotal);

把上面的代码拷贝出来，粘贴到Chrome的Console命令行，回车即可。

当然实现保存图片的方法还有很多，这里仅作娱乐。

也许你很想试一试，那么可以点这里。