aShot扩展开发指南如何快速实现自定义ShootingStrategy与CutStrategy【免费下载链接】ashotWebDriver Screenshot utility. Take screenshots, crop, prettify, compare项目地址: https://gitcode.com/gh_mirrors/as/ashotaShot 是一款开源的 WebDriver 截图工具帮助你在不同平台桌面浏览器、iOS 模拟器、Android 模拟器上完成页面截图、元素裁剪、图像美化与截图对比。本文是一份面向新手的 aShot 扩展开发指南带你动手实现自定义 ShootingStrategy截图策略与 CutStrategy裁剪策略只需实现少量接口方法就能让 aShot 适配你的私有浏览器内核、移动容器或特殊页面。一、先搞懂 aShot 截图的三步流程aShot 截取任意 WebElement 的图片只靠三步截取整页或视口截图—— 由ShootingStrategy负责获取元素的尺寸与位置—— 由CoordsProvider负责从原图上裁剪出目标区域—— 由ImageCropper负责。理解这条流水线是扩展的前提你想改变怎么拍就扩展 ShootingStrategy想改变裁掉什么就实现 CutStrategy。核心入口是 AShot.java它把策略、坐标提供器、裁剪器组合起来new AShot() .shootingStrategy(myStrategy) // 替换为你自定义的策略 .takeScreenshot(webDriver, element);二、如何理解 ShootingStrategy 策略模式接口策略接口定义在 ShootingStrategy.java只有 3 个方法方法职责getScreenshot(WebDriver)拍整页/视口截图getScreenshot(WebDriver, SetCoords)按坐标集合拍最小必需区域prepareCoords(SetCoords)把页面坐标换算成截图坐标 第三个方法最容易被忽略只要你的策略改变了图像内容比如滚动拼接、裁剪就必须同步修正坐标否则后续裁剪和对比会错位。项目自带了SimpleShootingStrategySimpleShootingStrategy.java作为最简实现——直接调用 WebDriver 的TakesScreenshot取图坐标原样返回。三、动手实现自定义 ShootingStrategy装饰器写法aShot 内置的策略视口滚动拼接、旋转、DPR 缩放全部基于装饰器模式抽象基类 ShootingDecorator.java 持有一个内部策略子类只写额外做的事其余逻辑委托给内部策略。最快上手继承 ShootingDecorator以最复杂的内置实现 ViewportPastingDecorator.java滚动拼接全页截图为模板自定义一个新策略只需 4 步public class MyShootingStrategy extends ShootingDecorator { public MyShootingStrategy(ShootingStrategy inner) { super(inner); // 传入被装饰的内层策略 } Override public BufferedImage getScreenshot(WebDriver wd) { BufferedImage shot getShootingStrategy().getScreenshot(wd); // 在这里加入你的处理马赛克、水印、缩放…… return process(shot); } // 若图像尺寸没变可不重写默认坐标不变 }再把它挂到 aShot 上即可生效new AShot() .shootingStrategy(new MyShootingStrategy(ShootingStrategies.simple())) .takeScreenshot(driver, element);参考现成装饰器的最佳实践滚动拼接全页ViewportPastingDecorator.java —— 注意它在finally里恢复滚动位置并实现了prepareCoords偏移坐标裁剪页头页脚CuttingDecorator.javaiPad 横屏旋转RotatingDecorator.java移动端粘性元素处理HandlingSickyElementsViewportPastingDecorator.java对应测试可参考 ViewportPastingShootingStrategyTest.java。四、实现 CutStrategy从固定裁剪到动态裁剪CutStrategy接口cutter/CutStrategy.java定义裁掉多少4 个方法全部接收WebDrivergetHeaderHeight(driver)/getFooterHeight(driver)页头、页脚高度必须实现getLeftBarWidth(driver)/getRightBarWidth(driver)左右栏宽度默认 0可重写aShot 提供两个现成范式正好对应静态与动态两种场景固定裁剪—— FixedCutStrategy.java构造时传入常量像素值直接返回。适合浏览器容器头/尾高度固定的场景。动态裁剪—— VariableCutStrategy.javaiOS 8 Safari 的地址栏会收缩65px → 41px它通过 JS 执行window.innerHeight探测当前视口高度再在 min/max 之间二选一。自定义 CutStrategy 最小示例public class MyCutStrategy implements CutStrategy { Override public int getHeaderHeight(WebDriver driver) { // 例如通过 JS 读取容器地址栏实际高度 return ((Number) ((JavascriptExecutor) driver) .executeScript(return document.getElementById(bar).offsetHeight;)) .intValue(); } Override public int getFooterHeight(WebDriver driver) { return 0; // 无页脚 } }挂到策略链上参考 CuttingDecoratorTest.java 的写法ShootingStrategy strategy ShootingStrategies.cutting(ShootingStrategies.simple(), new MyCutStrategy()); new AShot().shootingStrategy(strategy).takeScreenshot(driver);五、组装策略链用 ShootingStrategies 组合拳所有内置工厂方法集中在 ShootingStrategies.java它们的组合方式本身就是一张策略链配方表// 缩放(2x) → 裁剪页头页脚 → 滚动拼接全页 ShootingStrategy strategy ShootingStrategies.viewportRetina(500, new MyCutStrategy(), 2F); // 或手动叠装饰器顺序即执行顺序 CutStrategy cutting new VariableCutStrategy(41, 65, 1250); ShootingStrategy rotating new RotatingDecorator(cutting, ShootingStrategies.simple()); ShootingStrategy pasting new ViewportPastingDecorator(rotating).withScrollTimeout(300); 装饰器顺序很重要先scaling再cutting裁剪的像素值才与缩放后的图像匹配反过来则会切错位置。六、写好扩展的 3 条避坑清单实现SerializableShootingStrategy与CutStrategy都继承Serializable自定义策略里不要放不可序列化的字段如打开的流、线程。坐标换算必须成对出现只要你在getScreenshot里改变了图像裁剪、缩放、拼接、旋转就要重写prepareCoordsCoords.java 是坐标的载体这是截图切错元素这类 Bug 的头号来源。保持策略无状态ViewportPastingDecorator会用shootingArea缓存本次拍摄区域若你的策略会被复用到多次截图注意状态污染。七、验证你的扩展跑一个测试项目里每个装饰器都有对应测试可以直接模仿。例如 CdpShootingStrategyTest.java 演示了基于 Chrome DevTools Protocol 的 CDP 截图策略实现CdpShootingStrategy.java——一个不走 WebDriver 截图 API的完整自定义 ShootingStrategy 范例非常适合作为进阶阅读。./mvnw test -DtestCuttingDecoratorTest写在最后aShot 的扩展点设计非常克制一个三方法的策略接口、一个四方法的裁剪接口、一层装饰器骨架就把怎么拍与裁什么彻底解耦。无论是适配自研移动容器、给截图加水印还是处理动态地址栏你只需要沿着ShootingStrategies→ 装饰器 →CutStrategy这条线动手几十行代码即可完成接入。动手写第一个自定义策略吧你的浏览器环境值得一个量身定制的截图流水线 【免费下载链接】ashotWebDriver Screenshot utility. Take screenshots, crop, prettify, compare项目地址: https://gitcode.com/gh_mirrors/as/ashot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 aShot扩展开发指南：如何快速实现自定义ShootingStrategy与CutStrategy
aShot扩展开发指南如何快速实现自定义ShootingStrategy与CutStrategy【免费下载链接】ashotWebDriver Screenshot utility. Take screenshots, crop, prettify, compare项目地址: https://gitcode.com/gh_mirrors/as/ashotaShot 是一款开源的 WebDriver 截图工具帮助你在不同平台桌面浏览器、iOS 模拟器、Android 模拟器上完成页面截图、元素裁剪、图像美化与截图对比。本文是一份面向新手的 aShot 扩展开发指南带你动手实现自定义 ShootingStrategy截图策略与 CutStrategy裁剪策略只需实现少量接口方法就能让 aShot 适配你的私有浏览器内核、移动容器或特殊页面。一、先搞懂 aShot 截图的三步流程aShot 截取任意 WebElement 的图片只靠三步截取整页或视口截图—— 由ShootingStrategy负责获取元素的尺寸与位置—— 由CoordsProvider负责从原图上裁剪出目标区域—— 由ImageCropper负责。理解这条流水线是扩展的前提你想改变怎么拍就扩展 ShootingStrategy想改变裁掉什么就实现 CutStrategy。核心入口是 AShot.java它把策略、坐标提供器、裁剪器组合起来new AShot() .shootingStrategy(myStrategy) // 替换为你自定义的策略 .takeScreenshot(webDriver, element);二、如何理解 ShootingStrategy 策略模式接口策略接口定义在 ShootingStrategy.java只有 3 个方法方法职责getScreenshot(WebDriver)拍整页/视口截图getScreenshot(WebDriver, SetCoords)按坐标集合拍最小必需区域prepareCoords(SetCoords)把页面坐标换算成截图坐标 第三个方法最容易被忽略只要你的策略改变了图像内容比如滚动拼接、裁剪就必须同步修正坐标否则后续裁剪和对比会错位。项目自带了SimpleShootingStrategySimpleShootingStrategy.java作为最简实现——直接调用 WebDriver 的TakesScreenshot取图坐标原样返回。三、动手实现自定义 ShootingStrategy装饰器写法aShot 内置的策略视口滚动拼接、旋转、DPR 缩放全部基于装饰器模式抽象基类 ShootingDecorator.java 持有一个内部策略子类只写额外做的事其余逻辑委托给内部策略。最快上手继承 ShootingDecorator以最复杂的内置实现 ViewportPastingDecorator.java滚动拼接全页截图为模板自定义一个新策略只需 4 步public class MyShootingStrategy extends ShootingDecorator { public MyShootingStrategy(ShootingStrategy inner) { super(inner); // 传入被装饰的内层策略 } Override public BufferedImage getScreenshot(WebDriver wd) { BufferedImage shot getShootingStrategy().getScreenshot(wd); // 在这里加入你的处理马赛克、水印、缩放…… return process(shot); } // 若图像尺寸没变可不重写默认坐标不变 }再把它挂到 aShot 上即可生效new AShot() .shootingStrategy(new MyShootingStrategy(ShootingStrategies.simple())) .takeScreenshot(driver, element);参考现成装饰器的最佳实践滚动拼接全页ViewportPastingDecorator.java —— 注意它在finally里恢复滚动位置并实现了prepareCoords偏移坐标裁剪页头页脚CuttingDecorator.javaiPad 横屏旋转RotatingDecorator.java移动端粘性元素处理HandlingSickyElementsViewportPastingDecorator.java对应测试可参考 ViewportPastingShootingStrategyTest.java。四、实现 CutStrategy从固定裁剪到动态裁剪CutStrategy接口cutter/CutStrategy.java定义裁掉多少4 个方法全部接收WebDrivergetHeaderHeight(driver)/getFooterHeight(driver)页头、页脚高度必须实现getLeftBarWidth(driver)/getRightBarWidth(driver)左右栏宽度默认 0可重写aShot 提供两个现成范式正好对应静态与动态两种场景固定裁剪—— FixedCutStrategy.java构造时传入常量像素值直接返回。适合浏览器容器头/尾高度固定的场景。动态裁剪—— VariableCutStrategy.javaiOS 8 Safari 的地址栏会收缩65px → 41px它通过 JS 执行window.innerHeight探测当前视口高度再在 min/max 之间二选一。自定义 CutStrategy 最小示例public class MyCutStrategy implements CutStrategy { Override public int getHeaderHeight(WebDriver driver) { // 例如通过 JS 读取容器地址栏实际高度 return ((Number) ((JavascriptExecutor) driver) .executeScript(return document.getElementById(bar).offsetHeight;)) .intValue(); } Override public int getFooterHeight(WebDriver driver) { return 0; // 无页脚 } }挂到策略链上参考 CuttingDecoratorTest.java 的写法ShootingStrategy strategy ShootingStrategies.cutting(ShootingStrategies.simple(), new MyCutStrategy()); new AShot().shootingStrategy(strategy).takeScreenshot(driver);五、组装策略链用 ShootingStrategies 组合拳所有内置工厂方法集中在 ShootingStrategies.java它们的组合方式本身就是一张策略链配方表// 缩放(2x) → 裁剪页头页脚 → 滚动拼接全页 ShootingStrategy strategy ShootingStrategies.viewportRetina(500, new MyCutStrategy(), 2F); // 或手动叠装饰器顺序即执行顺序 CutStrategy cutting new VariableCutStrategy(41, 65, 1250); ShootingStrategy rotating new RotatingDecorator(cutting, ShootingStrategies.simple()); ShootingStrategy pasting new ViewportPastingDecorator(rotating).withScrollTimeout(300); 装饰器顺序很重要先scaling再cutting裁剪的像素值才与缩放后的图像匹配反过来则会切错位置。六、写好扩展的 3 条避坑清单实现SerializableShootingStrategy与CutStrategy都继承Serializable自定义策略里不要放不可序列化的字段如打开的流、线程。坐标换算必须成对出现只要你在getScreenshot里改变了图像裁剪、缩放、拼接、旋转就要重写prepareCoordsCoords.java 是坐标的载体这是截图切错元素这类 Bug 的头号来源。保持策略无状态ViewportPastingDecorator会用shootingArea缓存本次拍摄区域若你的策略会被复用到多次截图注意状态污染。七、验证你的扩展跑一个测试项目里每个装饰器都有对应测试可以直接模仿。例如 CdpShootingStrategyTest.java 演示了基于 Chrome DevTools Protocol 的 CDP 截图策略实现CdpShootingStrategy.java——一个不走 WebDriver 截图 API的完整自定义 ShootingStrategy 范例非常适合作为进阶阅读。./mvnw test -DtestCuttingDecoratorTest写在最后aShot 的扩展点设计非常克制一个三方法的策略接口、一个四方法的裁剪接口、一层装饰器骨架就把怎么拍与裁什么彻底解耦。无论是适配自研移动容器、给截图加水印还是处理动态地址栏你只需要沿着ShootingStrategies→ 装饰器 →CutStrategy这条线动手几十行代码即可完成接入。动手写第一个自定义策略吧你的浏览器环境值得一个量身定制的截图流水线 【免费下载链接】ashotWebDriver Screenshot utility. Take screenshots, crop, prettify, compare项目地址: https://gitcode.com/gh_mirrors/as/ashot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考