js 抓取网页图片

在JavaScript中抓取网页图片可以通过以下几种方式：

一、基础概念

1. DOM操作
   • 在浏览器环境下，网页内容以DOM（Document Object Model）树的形式存在。图片元素通常是<img>标签。可以通过JavaScript访问DOM树来获取图片相关的信息。

• 网络请求（如果需要下载图片到本地存储等情况）
  • 如果要真正获取图片数据（例如将图片保存到本地或者进行进一步的图像处理），可能涉及到发送网络请求获取图片的二进制数据。

二、相关类型及示例代码

1. 获取网页中所有可见图片的URL
   • 示例代码：
   • 示例代码：
   • 优势：简单直接，不需要额外的库支持就可以获取到页面上图片的来源地址。
   • 应用场景：比如在一个网页图片预览插件中，可以先获取所有图片URL，然后根据用户操作展示预览。

• 下载网页中的图片到本地（在浏览器环境下受同源策略限制）
  • 如果要下载图片，可以使用fetch API获取图片的二进制数据，然后创建一个Blob对象，再通过创建一个临时的<a>标签来触发下载。
  • 示例代码：
  • 示例代码：
  • 限制及原因：在浏览器中，出于安全考虑存在同源策略。如果要下载不同源（协议、域名、端口不完全相同）的图片可能会受到限制。例如，从一个https://www.example1.com页面尝试下载https://www.example2.com的图片可能会失败，除非目标服务器设置了合适的CORS（跨域资源共享）头。
  • 解决方法：
    • 如果是同源图片，可以直接按照上述方式下载。
    • 如果是不同源图片，目标服务器需要在响应头中设置Access - Control - Allow - Origin为允许访问的源（如*表示允许所有源，但这可能存在安全风险，更好的方式是指定特定源）。另外，可以使用服务器端代理，在同源的服务器端先请求目标图片，然后再将图片数据返回给前端进行下载。
• 使用第三方库（如cheerio用于Node.js环境下的网页图片抓取）
  • 在Node.js环境中，由于没有浏览器DOM，可以使用cheerio来解析HTML并获取图片URL。
  • 示例代码：
  • 示例代码：
  • 优势：方便在服务器端进行网页图片URL的获取，不受浏览器同源策略限制。
  • 应用场景：例如构建一个网络爬虫，用于收集特定网站图片资源的链接以便后续分析或者存储。