目录摘要1. 引言 - 截图功能的价值1.1 截图应用场景1.2 截图功能概览1.3 支持的输出格式2. 基本截图操作2.1 全页面截图2.2 指定格式2.3 设置质量2.4 设置尺寸3. 截图参数详解3.1 参数列表3.2 区域截图3.3 返回值4. 实战案例一报告截图4.1 场景描述4.2 实现代码5. 实战案例二网页存档5.1 场景描述5.2 实现代码6. 实战案例三错误记录6.1 场景描述6.2 实现代码7. 批量截图7.1 多页面截图7.2 定时截图8. 图像处理8.1 调整尺寸8.2 添加水印9. 截图存储9.1 本地存储9.2 云存储10. 最佳实践10.1 截图优化10.2 常见问题11. 总结11.1 核心要点11.2 下一步参考资料摘要本文详细介绍 OpenClaw Canvas 的截图功能。从基本截图、全页面捕获、元素截图到图像处理全面解析如何通过 Canvas 实现灵活的页面捕获。通过实际案例演示报告生成、内容存档、错误记录等场景帮助开发者掌握 Canvas 截图的实际应用。1. 引言 - 截图功能的价值1.1 截图应用场景场景说明示例报告生成生成可视化报告数据报告截图内容存档保存页面内容网页快照错误记录记录错误状态Bug截图分享展示分享界面内容成果展示自动化测试测试结果验证UI测试截图1.2 截图功能概览snapshot截图类型全页面截图可视区域截图元素截图PNG/JPG返回图像数据1.3 支持的输出格式格式说明适用场景PNG无损压缩需要高质量JPG/JPEG有损压缩文件较小2. 基本截图操作2.1 全页面截图screenshotcanvas(actionsnapshot,outputFormatpng)2.2 指定格式# PNG格式screenshotcanvas(actionsnapshot,outputFormatpng)# JPG格式screenshotcanvas(actionsnapshot,outputFormatjpg)2.3 设置质量screenshotcanvas(actionsnapshot,outputFormatjpg,quality80# 1-100)2.4 设置尺寸screenshotcanvas(actionsnapshot,width1920,height1080)3. 截图参数详解3.1 参数列表参数类型说明outputFormatstring输出格式png/jpgqualitynumber质量1-100仅JPGwidthnumber截图宽度heightnumber截图高度xnumber起始X坐标ynumber起始Y坐标3.2 区域截图# 截取指定区域screenshotcanvas(actionsnapshot,x100,y100,width800,height600)3.3 返回值截图返回的是图像数据可以直接保存或处理。# 返回格式示例{type:image,format:png,data:base64编码的图像数据}4. 实战案例一报告截图4.1 场景描述生成数据报告并截图保存。4.2 实现代码defgenerate_report_screenshot(report_data):生成报告截图# 1. 创建报告界面htmlf !DOCTYPE html html head style body {{ font-family: Arial, sans-serif; padding: 40px; background: white; }} .report {{ max-width: 800px; margin: 0 auto; }} h1 {{ color: #333; border-bottom: 3px solid #667eea; padding-bottom: 10px; }} .stats {{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 30px 0; }} .stat-card {{ background: #f8f9fa; padding: 20px; border-radius: 8px; text-align: center; }} .stat-value {{ font-size: 2em; font-weight: bold; color: #667eea; }} .chart {{ background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 20px 0; }} /style /head body div classreport h1 数据报告/h1 p生成时间:{datetime.now().strftime(%Y-%m-%d %H:%M:%S)}/p div classstats div classstat-card div classstat-value{report_data[total]}/div div总数/div /div div classstat-card div classstat-value{report_data[success]}/div div成功/div /div div classstat-card div classstat-value{report_data[rate]}%/div div成功率/div /div /div div classchart h3趋势图/h3 p图表内容.../p /div /div /body /html # 2. 展示报告canvas(actionpresent,htmlhtml)# 3. 等待渲染time.sleep(1)# 4. 截图screenshotcanvas(actionsnapshot,outputFormatpng)returnscreenshot5. 实战案例二网页存档5.1 场景描述保存网页快照用于存档。5.2 实现代码defarchive_webpage(url):存档网页# 1. 加载网页canvas(actionnavigate,urlurl)# 2. 等待加载time.sleep(3)# 3. 截图screenshotcanvas(actionsnapshot,outputFormatpng,width1920,height1080)# 4. 保存filenamefarchive_{datetime.now().strftime(%Y%m%d_%H%M%S)}.pngsave_screenshot(screenshot,filename)returnfilenamedefsave_screenshot(screenshot,filename):保存截图# 根据返回格式保存# 可能是base64或直接是文件数据withopen(filename,wb)asf:f.write(screenshot[data])6. 实战案例三错误记录6.1 场景描述捕获错误状态用于调试。6.2 实现代码defcapture_error_state(error_info):捕获错误状态# 1. 创建错误报告界面htmlf !DOCTYPE html html head style body {{ font-family: monospace; padding: 20px; background: #1a1a2e; color: #eee; }} .error-box {{ background: #16213e; padding: 20px; border-radius: 8px; border-left: 4px solid #e74c3c; }} .error-title {{ color: #e74c3c; font-size: 1.5em; margin-bottom: 10px; }} .error-time {{ color: #888; margin-bottom: 20px; }} .error-message {{ background: #0f0f23; padding: 15px; border-radius: 4px; white-space: pre-wrap; }} /style /head body div classerror-box div classerror-title❌ 错误报告/div div classerror-time{datetime.now().isoformat()}/div div classerror-message{error_info[message]}/div /div /body /html # 2. 展示错误canvas(actionpresent,htmlhtml)# 3. 截图screenshotcanvas(actionsnapshot,outputFormatpng)returnscreenshot7. 批量截图7.1 多页面截图defbatch_screenshot(urls):批量截图多个页面screenshots[]forurlinurls:try:# 加载页面canvas(actionnavigate,urlurl)time.sleep(2)# 截图screenshotcanvas(actionsnapshot,outputFormatpng)screenshots.append({url:url,screenshot:screenshot,status:success})exceptExceptionase:screenshots.append({url:url,error:str(e),status:failed})returnscreenshots7.2 定时截图defscheduled_screenshot(url,interval_minutes5,count12):定时截图screenshots[]foriinrange(count):canvas(actionnavigate,urlurl)time.sleep(2)screenshotcanvas(actionsnapshot,outputFormatpng)screenshots.append({time:datetime.now().isoformat(),screenshot:screenshot})ificount-1:time.sleep(interval_minutes*60)returnscreenshots8. 图像处理8.1 调整尺寸defresize_screenshot(screenshot,max_width800):调整截图尺寸# 使用PIL处理图像fromPILimportImageimportioimportbase64# 解码图像ifisinstance(screenshot,dict):img_database64.b64decode(screenshot[data])else:img_datascreenshot imgImage.open(io.BytesIO(img_data))# 调整尺寸ifimg.widthmax_width:ratiomax_width/img.width new_heightint(img.height*ratio)imgimg.resize((max_width,new_height))# 返回处理后的图像outputio.BytesIO()img.save(output,formatPNG)returnoutput.getvalue()8.2 添加水印defadd_watermark(screenshot,watermark_text):添加水印fromPILimportImage,ImageDraw,ImageFontimportio imgImage.open(io.BytesIO(screenshot))drawImageDraw.Draw(img)# 添加水印文字draw.text((10,10),watermark_text,fill(128,128,128,128))outputio.BytesIO()img.save(output,formatPNG)returnoutput.getvalue()9. 截图存储9.1 本地存储defsave_to_local(screenshot,filename):保存到本地withopen(filename,wb)asf:ifisinstance(screenshot,dict):importbase64 f.write(base64.b64decode(screenshot[data]))else:f.write(screenshot)9.2 云存储defupload_to_cloud(screenshot,filename):上传到云存储# 使用uploader技能# 或直接调用云存储APIpass10. 最佳实践10.1 截图优化优化项说明等待渲染确保内容加载完成合适尺寸根据用途选择尺寸格式选择PNG质量高JPG文件小压缩优化适当压缩减少文件大小10.2 常见问题问题解决方案截图空白增加等待时间内容不完整使用全页面截图图像模糊提高分辨率文件过大使用JPG格式11. 总结11.1 核心要点要点说明snapshot截图操作outputFormat输出格式width/height截图尺寸等待渲染确保内容加载11.2 下一步第55篇OpenClaw Canvas A2UI交互式界面开发第56篇OpenClaw Nodes设备配对与管理参考资料OpenClaw 官方文档PIL 图像处理Canvas API
OpenClaw Canvas 截图：页面捕获与保存
目录摘要1. 引言 - 截图功能的价值1.1 截图应用场景1.2 截图功能概览1.3 支持的输出格式2. 基本截图操作2.1 全页面截图2.2 指定格式2.3 设置质量2.4 设置尺寸3. 截图参数详解3.1 参数列表3.2 区域截图3.3 返回值4. 实战案例一报告截图4.1 场景描述4.2 实现代码5. 实战案例二网页存档5.1 场景描述5.2 实现代码6. 实战案例三错误记录6.1 场景描述6.2 实现代码7. 批量截图7.1 多页面截图7.2 定时截图8. 图像处理8.1 调整尺寸8.2 添加水印9. 截图存储9.1 本地存储9.2 云存储10. 最佳实践10.1 截图优化10.2 常见问题11. 总结11.1 核心要点11.2 下一步参考资料摘要本文详细介绍 OpenClaw Canvas 的截图功能。从基本截图、全页面捕获、元素截图到图像处理全面解析如何通过 Canvas 实现灵活的页面捕获。通过实际案例演示报告生成、内容存档、错误记录等场景帮助开发者掌握 Canvas 截图的实际应用。1. 引言 - 截图功能的价值1.1 截图应用场景场景说明示例报告生成生成可视化报告数据报告截图内容存档保存页面内容网页快照错误记录记录错误状态Bug截图分享展示分享界面内容成果展示自动化测试测试结果验证UI测试截图1.2 截图功能概览snapshot截图类型全页面截图可视区域截图元素截图PNG/JPG返回图像数据1.3 支持的输出格式格式说明适用场景PNG无损压缩需要高质量JPG/JPEG有损压缩文件较小2. 基本截图操作2.1 全页面截图screenshotcanvas(actionsnapshot,outputFormatpng)2.2 指定格式# PNG格式screenshotcanvas(actionsnapshot,outputFormatpng)# JPG格式screenshotcanvas(actionsnapshot,outputFormatjpg)2.3 设置质量screenshotcanvas(actionsnapshot,outputFormatjpg,quality80# 1-100)2.4 设置尺寸screenshotcanvas(actionsnapshot,width1920,height1080)3. 截图参数详解3.1 参数列表参数类型说明outputFormatstring输出格式png/jpgqualitynumber质量1-100仅JPGwidthnumber截图宽度heightnumber截图高度xnumber起始X坐标ynumber起始Y坐标3.2 区域截图# 截取指定区域screenshotcanvas(actionsnapshot,x100,y100,width800,height600)3.3 返回值截图返回的是图像数据可以直接保存或处理。# 返回格式示例{type:image,format:png,data:base64编码的图像数据}4. 实战案例一报告截图4.1 场景描述生成数据报告并截图保存。4.2 实现代码defgenerate_report_screenshot(report_data):生成报告截图# 1. 创建报告界面htmlf !DOCTYPE html html head style body {{ font-family: Arial, sans-serif; padding: 40px; background: white; }} .report {{ max-width: 800px; margin: 0 auto; }} h1 {{ color: #333; border-bottom: 3px solid #667eea; padding-bottom: 10px; }} .stats {{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 30px 0; }} .stat-card {{ background: #f8f9fa; padding: 20px; border-radius: 8px; text-align: center; }} .stat-value {{ font-size: 2em; font-weight: bold; color: #667eea; }} .chart {{ background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 20px 0; }} /style /head body div classreport h1 数据报告/h1 p生成时间:{datetime.now().strftime(%Y-%m-%d %H:%M:%S)}/p div classstats div classstat-card div classstat-value{report_data[total]}/div div总数/div /div div classstat-card div classstat-value{report_data[success]}/div div成功/div /div div classstat-card div classstat-value{report_data[rate]}%/div div成功率/div /div /div div classchart h3趋势图/h3 p图表内容.../p /div /div /body /html # 2. 展示报告canvas(actionpresent,htmlhtml)# 3. 等待渲染time.sleep(1)# 4. 截图screenshotcanvas(actionsnapshot,outputFormatpng)returnscreenshot5. 实战案例二网页存档5.1 场景描述保存网页快照用于存档。5.2 实现代码defarchive_webpage(url):存档网页# 1. 加载网页canvas(actionnavigate,urlurl)# 2. 等待加载time.sleep(3)# 3. 截图screenshotcanvas(actionsnapshot,outputFormatpng,width1920,height1080)# 4. 保存filenamefarchive_{datetime.now().strftime(%Y%m%d_%H%M%S)}.pngsave_screenshot(screenshot,filename)returnfilenamedefsave_screenshot(screenshot,filename):保存截图# 根据返回格式保存# 可能是base64或直接是文件数据withopen(filename,wb)asf:f.write(screenshot[data])6. 实战案例三错误记录6.1 场景描述捕获错误状态用于调试。6.2 实现代码defcapture_error_state(error_info):捕获错误状态# 1. 创建错误报告界面htmlf !DOCTYPE html html head style body {{ font-family: monospace; padding: 20px; background: #1a1a2e; color: #eee; }} .error-box {{ background: #16213e; padding: 20px; border-radius: 8px; border-left: 4px solid #e74c3c; }} .error-title {{ color: #e74c3c; font-size: 1.5em; margin-bottom: 10px; }} .error-time {{ color: #888; margin-bottom: 20px; }} .error-message {{ background: #0f0f23; padding: 15px; border-radius: 4px; white-space: pre-wrap; }} /style /head body div classerror-box div classerror-title❌ 错误报告/div div classerror-time{datetime.now().isoformat()}/div div classerror-message{error_info[message]}/div /div /body /html # 2. 展示错误canvas(actionpresent,htmlhtml)# 3. 截图screenshotcanvas(actionsnapshot,outputFormatpng)returnscreenshot7. 批量截图7.1 多页面截图defbatch_screenshot(urls):批量截图多个页面screenshots[]forurlinurls:try:# 加载页面canvas(actionnavigate,urlurl)time.sleep(2)# 截图screenshotcanvas(actionsnapshot,outputFormatpng)screenshots.append({url:url,screenshot:screenshot,status:success})exceptExceptionase:screenshots.append({url:url,error:str(e),status:failed})returnscreenshots7.2 定时截图defscheduled_screenshot(url,interval_minutes5,count12):定时截图screenshots[]foriinrange(count):canvas(actionnavigate,urlurl)time.sleep(2)screenshotcanvas(actionsnapshot,outputFormatpng)screenshots.append({time:datetime.now().isoformat(),screenshot:screenshot})ificount-1:time.sleep(interval_minutes*60)returnscreenshots8. 图像处理8.1 调整尺寸defresize_screenshot(screenshot,max_width800):调整截图尺寸# 使用PIL处理图像fromPILimportImageimportioimportbase64# 解码图像ifisinstance(screenshot,dict):img_database64.b64decode(screenshot[data])else:img_datascreenshot imgImage.open(io.BytesIO(img_data))# 调整尺寸ifimg.widthmax_width:ratiomax_width/img.width new_heightint(img.height*ratio)imgimg.resize((max_width,new_height))# 返回处理后的图像outputio.BytesIO()img.save(output,formatPNG)returnoutput.getvalue()8.2 添加水印defadd_watermark(screenshot,watermark_text):添加水印fromPILimportImage,ImageDraw,ImageFontimportio imgImage.open(io.BytesIO(screenshot))drawImageDraw.Draw(img)# 添加水印文字draw.text((10,10),watermark_text,fill(128,128,128,128))outputio.BytesIO()img.save(output,formatPNG)returnoutput.getvalue()9. 截图存储9.1 本地存储defsave_to_local(screenshot,filename):保存到本地withopen(filename,wb)asf:ifisinstance(screenshot,dict):importbase64 f.write(base64.b64decode(screenshot[data]))else:f.write(screenshot)9.2 云存储defupload_to_cloud(screenshot,filename):上传到云存储# 使用uploader技能# 或直接调用云存储APIpass10. 最佳实践10.1 截图优化优化项说明等待渲染确保内容加载完成合适尺寸根据用途选择尺寸格式选择PNG质量高JPG文件小压缩优化适当压缩减少文件大小10.2 常见问题问题解决方案截图空白增加等待时间内容不完整使用全页面截图图像模糊提高分辨率文件过大使用JPG格式11. 总结11.1 核心要点要点说明snapshot截图操作outputFormat输出格式width/height截图尺寸等待渲染确保内容加载11.2 下一步第55篇OpenClaw Canvas A2UI交互式界面开发第56篇OpenClaw Nodes设备配对与管理参考资料OpenClaw 官方文档PIL 图像处理Canvas API
