javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript获取页面img

使用JavaScript实现获取页面上所有的img并保存本地

作者：Struggle_zhu

这篇文章主要为大家详细介绍了如何使用JavaScript实现获取页面上所有的img并保存到本地,文中的示例代码讲解详细,有需要的小伙伴可以了解下

浏览器的 JavaScript 环境中受限于安全和隐私原因，不允许直接指定下载文件夹或访问本地文件系统。因此，无法通过纯 JavaScript 在浏览器控制台中实现下载图片到指定文件夹的功能。

然而，您可以使用 Web API 提供的文件系统访问 API 进行一定程度的操作，但需要用户手动确认和操作。以下是一个在支持文件系统访问 API 的浏览器（如 Chrome）中使用的示例脚本：

(async () => {
  // 获取所有图像元素
  const images = document.querySelectorAll("img");

  // 文件系统访问 API：请求用户选择下载文件夹
  const dirHandle = await window.showDirectoryPicker();

  for (let [index, img] of images.entries()) {
    try {
      const url = img.src;
      const response = await fetch(url);
      const blob = await response.blob();

      // 获取图片的 MIME 类型并确定文件扩展名
      const contentType = blob.type;
      let extension = contentType.split("/")[1]; // 从 MIME 类型中提取文件扩展名

      // 特别处理 SVG 图片格式
      if (contentType === "image/svg+xml") {
        extension = "svg";
      }

      const fileName = `${index + 1}.${extension}`;

      // 创建并写入文件
      const fileHandle = await dirHandle.getFileHandle(fileName, {
        create: true,
      });
      const writable = await fileHandle.createWritable();
      await writable.write(blob);
      await writable.close();

      console.log(`Downloaded: ${fileName}`);
    } catch (error) {
      console.error(`Failed to download image ${index + 1}:`, error);
    }
  }
})();

此脚本的工作方式如下：

请注意，此方法仅在支持文件系统访问 API 的浏览器（如 Chrome）中可用，并且用户需要手动确认并选择下载文件夹。

要在浏览器控制台中执行此脚本，请按照以下步骤操作：

执行脚本时，浏览器会弹出文件夹选择对话框，用户选择文件夹后，脚本会自动将所有图片下载并保存到该文件夹中。

知识补充

除了上文的内容，小编还为大家整理了使用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);

到此这篇关于使用JavaScript实现获取页面上所有的img并保存本地的文章就介绍到这了,更多相关JavaScript获取页面img内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文