案例 5：网页截图工具

场景描述

对指定网页进行截图，支持全页面和元素截图

工具配置

插件信息

• 插件名称：网页截图
• 插件备注：对网页进行高质量截图

工具配置

• 工具名称：capture_screenshot
• 工具介绍：对指定URL进行截图
• 工具参数：
  • url (字符串): 目标网页URL
  • element (字符串): 可选，特定元素选择器

完整代码

/**
 * 网页截图工具
 *
 * 使用方式：
 * 1. 此工具需要截图指定网页，需要动态打开页面
 * 2. 通过参数 url 指定目标页面，element 指定特定元素（可选）
 * 3. 参数：url（目标网页URL）、element（特定元素选择器）
 */
class Tool extends OPENUGC_API_V2 {
  constructor(args) {
    super(args);  // 必须调用 super(args) 才能使用 this.args
    this.targetUrl = args.url;
    this.selector = args.element;
  }

  async run() {
    // 需要截图指定网页，必须使用 OpenUrl 打开页面
    const page = await this.OpenUrl({
      url: this.targetUrl,
      runAt: 'document-end',
      showLog: false
    });

    try {
      const result = await page.execute(`
        // 等待页面完全加载
        await new Promise(resolve => setTimeout(resolve, 1000));

        let captureArea;
        if ('${this.selector}') {
          captureArea = document.querySelector('${this.selector}');
          if (!captureArea) {
            throw new Error('未找到指定元素');
          }
        }

        // 使用 html2canvas 库进行截图
        if (typeof html2canvas === 'undefined') {
          const script = document.createElement('script');
          script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js';
          document.head.appendChild(script);
          await new Promise(resolve => {
            script.onload = resolve;
          });
        }

        const canvas = await html2canvas(captureArea || document.body, {
          useCORS: true,
          allowTaint: true,
          scale: 2  // 高清截图
        });

        const dataUrl = canvas.toDataURL('image/png');
        const base64 = dataUrl.replace(/^data:image\\/(png|jpg);base64,/, '');

        return {
          width: canvas.width,
          height: canvas.height,
          data: base64,
          format: 'png'
        };
      `);

      return {
        success: true,
        url: this.targetUrl,
        element: this.selector || 'full-page',
        screenshot: result,
        timestamp: new Date().toISOString()
      };
    } finally {
      page.close();
    }
  }
}

📌 使用说明

此工具需要截图指定网页，必须使用 OpenUrl() 动态打开页面。适合场景：

• 动态截图任意网页
• 批量截图任务
• 网页监控和存档

相关链接

• 案例 4：表单自动填写工具 - 学习表单操作
• 案例 1：热搜数据抓取工具 - 学习数据抓取
• 基础使用 - 了解插件开发基础