Nodejs 用node在服务端抓取页面图片时候，碰到用javascript生成的图片怎么抓取？欢迎各位大牛吐槽
Nodejs 用node在服务端抓取页面图片时候，碰到用javascript生成的图片怎么抓取？欢迎各位大牛吐槽
例如上图为淘宝首页的banner,该图片为javascript动态加载 初始代码为：
<div id="J_Slide">
<ol class="ks-switchable-content">
<li id="J_DirectPromo_48" class="J_DirectPr" data-resid="48"></li>
<li><a style="display:none!important" id="tanx-a-mm_"></a></li>
</ol>
</div>生成之后就有图片了，我在前端用jquery是能获取到加载后的图片的，但在服务端只能获取到一部分图片，类似上种动态生成的图片就抓取不到了，有什么解决办法么
当使用 Node.js 在服务端抓取网页时，如果网页中的图片是通过 JavaScript 动态生成的，直接使用传统的 HTTP 请求库（如 request 或 axios）可能无法抓取这些图片。这是因为这些库不会执行 JavaScript 代码，因此无法看到页面加载完成后生成的图片。
为了解决这个问题，可以使用一个能够执行 JavaScript 的工具，例如 Puppeteer。Puppeteer 是一个 Node 库，它提供了一组高级 API 来通过 DevTools 协议控制 Chrome 或 Chromium。以下是一个使用 Puppeteer 抓取包含动态生成图片的网页的示例代码：
const puppeteer = require('puppeteer');
async function scrapeImages() {
// 启动浏览器实例
const browser = await puppeteer.launch();
// 打开一个新的页面
const page = await browser.newPage();
// 导航到目标网页
await page.goto('https://www.taobao.com');
// 等待页面加载完成，确保所有资源都已加载
await page.waitForTimeout(5000); // 等待5秒，确保所有JavaScript执行完毕
// 获取页面中所有的图片元素
const imgElements = await page.$$eval('img', imgs => imgs.map(img => img.src));
console.log('抓取到的图片链接:', imgElements);
// 关闭浏览器
await browser.close();
}
scrapeImages().catch(console.error);解释：
- 启动浏览器：使用
puppeteer.launch()启动一个无头浏览器实例。 - 打开新页面：使用
browser.newPage()创建一个新的页面对象。 - 导航到目标网页：使用
page.goto(url)导航到目标网页。 - 等待页面加载：使用
page.waitForTimeout(5000)确保页面上的所有资源都已加载完成。这一步可以根据实际情况调整等待时间。 - 获取图片元素：使用
page.$$eval获取页面中的所有<img>元素，并提取它们的src属性。 - 关闭浏览器：最后关闭浏览器实例以释放资源。
通过这种方式，你可以抓取那些通过 JavaScript 动态生成的图片。请注意，实际应用中可能需要根据具体网站的结构和加载逻辑调整等待时间和选择器。
plantomjs上层还有个封装, 叫casperjs,也不错. 它们都是基于QTWEBKIT的,headless的,相当于一个无需输出界面的浏览器, 自然可以处理这些js加载图片.
在服务端使用Node.js抓取通过JavaScript动态生成的图片时，通常需要模拟浏览器环境，因为这类图片依赖于JavaScript执行。常见的解决方案包括使用Puppeteer或Selenium等工具来渲染页面并抓取内容。
示例代码（使用Puppeteer）
const puppeteer = require('puppeteer');
async function fetchDynamicImages(url) {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// 导航到目标网页
await page.goto(url, { waitUntil: 'networkidle2' });
// 等待特定元素出现
await page.waitForSelector('#J_Slide .ks-switchable-content img');
// 获取所有图片链接
const images = await page.evaluate(() => {
return Array.from(document.querySelectorAll('#J_Slide .ks-switchable-content img'))
.map(img => img.src);
});
console.log(images);
await browser.close();
}
// 使用示例
fetchDynamicImages('https://www.taobao.com/');解释
- Puppeteer 是一个Node库，它提供了一组高级API来通过DevTools协议控制Chrome或Chromium。
browser.launch()启动一个新的浏览器实例。page.goto(url)导航到指定的URL，并等待页面加载完成。page.waitForSelector(selector)等待某个DOM元素出现在页面中。page.evaluate()在浏览器上下文中执行代码，允许我们访问DOM并提取信息。- 最后，关闭浏览器实例以释放资源。
这种方法可以有效地抓取那些依赖于JavaScript生成的图片，而不需要手动处理复杂的DOM交互逻辑。
