如何使用Catalyst Smartbrowz截取可公开访问网页的截图？

以下是具体的实现流程，涵盖从配置到嵌入的全环节：

1. 准备Catalyst项目与Smartbrowz权限 #

登录Catalyst控制台，创建新的Catalyst项目（或使用已有项目），确保已启用Smartbrowz服务模块（该服务默认对Catalyst用户开放，按需启用即可）。

2. 创建网页截图任务 #

• 进入项目的Smartbrowz模块，点击「新建截图任务」
• 填写核心参数：
  • 目标URL：输入你要截图的公开网页地址
  • 截图配置：设置尺寸（比如1200×800适配网页预览）、勾选「全屏截图」选项（如需捕获整个页面）、设置延迟加载时间（2-5秒，适配动态渲染的页面内容）
  • 存储设置：选择将截图保存到Catalyst的File Store中，方便后续获取公开访问链接

3. 获取截图的公开链接 #

• 手动触发任务执行，等待任务完成后，在任务列表中找到对应截图记录，进入详情页复制公开访问URL（需确保File Store中的文件权限设为公开，否则外部网页无法加载）
• 若需动态生成截图（比如根据用户输入实时生成），可调用Catalyst Smartbrowz的API，示例curl命令：

  curl -X POST "https://api.catalyst.zoho.com/v1/smartbrowz/screenshot" \
       -H "Authorization: Zoho-oauthtoken YOUR_AUTH_TOKEN" \
       -d "url=https://your-target-page.com&width=1200&height=800&delay=3"
  

  接口返回结果中会包含截图文件的访问链接，直接取用即可。

4. 嵌入截图到你的网页并添加跳转 #

将截图作为可点击的预览图嵌入，使用HTML代码示例如下：

<a href="https://your-target-page.com" target="_blank" rel="noopener noreferrer">
  <img src="https://your-catalyst-screenshot-url.png" 
       alt="目标网页预览" 
       style="max-width: 100%; border: 1px solid #e5e7eb; border-radius: 6px; cursor: pointer;">
</a>

可按需添加CSS hover效果优化交互：

a:hover img {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

注意事项 #

• 确认目标网页无访问限制：必须是完全公开可访问的页面，不能有登录验证、IP白名单等限制，否则Smartbrowz无法正常抓取
• 动态页面适配：对于依赖JS渲染的页面，务必设置足够的延迟时间，确保页面内容加载完成后再执行截图
• 截图更新：若目标网页内容频繁变动，可设置定时截图任务，自动更新预览图，避免展示过期内容

内容的提问来源于stack exchange，提问作者Raghu