滑块到底该拖多远？看懂极验拼图定位与自动化对接的关键

一、先拆开画面：滑块、缺口和背景各管什么

滑动拼图看起来很简单：按住按钮，把小拼图拖进背景里的缺口。程序要完成同样的动作，先得知道缺口在哪里、拼图从哪里出发，以及图片上的距离对应页面上的多少像素。这几个问题没有分清，后面的操作即使执行得很顺，也可能一直对不准。理解它的起点，是把一张完整的验证码画面拆成几个可以测量的对象。

常见的拼图界面包含带缺口的背景、小拼图和下方拖动按钮。部分较早的极验实现还会保留一张完整背景，用于绘制或动画效果，只是没有直接展示。完整图和缺口图来自同一个画面时，它们之间的差异就能提供定位线索。不过，版本更新会改变资源组织方式，不能默认每次都能找到这张完整图。

在自有页面或获得授权的测试环境中，可以打开浏览器开发者工具，检查验证码区域的页面结构。有些实现使用多个 canvas 画布，分别绘制背景和拼图；另一些实现通过图片、样式或脚本组合展示。画布更像一块已经画好的屏幕，页面里看见的内容不一定对应某个可以直接下载的图片地址。

旧版页面中，geetest_canvas_bg、geetest_canvas_slice 等类名可以帮助判断画布用途，但类名只是线索，不能作为长期稳定的接口。检查时要结合元素尺寸、显示状态和实际画面确认对象。遇到隐藏画布，可以在测试页面临时查看其内容；如果没有完整背景，也应继续检查资源来源，而不是凭名称认定它一定存在。

还要记住，图片坐标、拼图坐标和按钮坐标属于不同对象。缺口距离背景左边缘一百多像素，并不代表按钮就该移动相同距离。拼图可能已经离开背景左边缘一小段，按钮也可能有自己的起点和运动范围。把这些位置记录清楚，后续才能解释偏差来自识别、缩放还是页面布局。

二、拿到可靠图片，定位才有基础

图像处理最怕输入不一致。两张图片必须属于同一次挑战，尺寸相同，画面已经绘制完成，才能直接比较。如果页面刚刷新就读取画布，可能拿到空白内容；如果先保存完整图，再触发下一次验证后保存缺口图，两张图已经不是同一组素材，比较结果自然会到处都是差异。

等待图片时，可以观察画布尺寸、资源加载状态和组件的就绪事件。固定暂停几百毫秒只能碰运气，因为网络速度和设备性能会变化。更稳妥的方式是在明确的状态条件下读取，并设置合理超时。超时应作为独立错误返回，让调用方知道问题发生在素材准备阶段，而不是把它混进识别失败里。

对于允许读取的画布，浏览器提供的 toDataURL 可以生成包含图像数据的字符串，再由程序解码保存。排查像素差异时优先使用 PNG，避免有损压缩额外制造颜色变化。保存文件时，扩展名也应与实际编码一致；把 PNG 数据写进一个以 JPG 结尾的文件，虽然部分工具仍能打开，却容易干扰后续判断。

画布读取还受浏览器安全规则限制。如果画布使用了未满足跨域条件的资源，导出像素可能被阻止。这时应检查自有系统的资源来源与跨域配置，或者使用明确允许的测试素材。错误信息需要保留下来，不能简单捕获异常后返回空字符串，否则上层程序只会看到“识别不到”，却不知道图片根本没有取到。

测试样本最好同时记录图片原始宽高、页面显示宽高、拼图起点和挑战时间。原图宽度与显示宽度经常不同，尤其在移动端、自适应布局或高像素密度屏幕上。把这些数据跟图片一起保存，出现整体偏移时就能复现当时的计算条件，也方便比较不同设备下的表现。

三、用像素差分找缺口，再把位置换成距离

如果手里有完整背景和带缺口背景，最容易理解的方法就是逐个像素比较。每个像素通常包含红、绿、蓝三个通道，可以分别计算两张图对应通道的绝对差，再把三个差值相加。相同位置颜色越接近，结果越小；缺口改变了亮度或颜色，对应区域的差值通常更明显。

这个差值可以写成 D＝|R₁－R₂|＋|G₁－G₂|＋|B₁－B₂|。对于八位颜色通道，三个差值的总和介于零和七百六十五之间。设置阈值后，就能把明显变化的像素标记出来。阈值需要根据素材测试，不能把某个固定数值当成通用答案，因为阴影强弱、边缘效果和图像压缩都会影响分布。

最简单的实现是从左往右扫描，找到第一个超过阈值的像素，就把它的横坐标当成缺口起点。这适合解释原理，实际运行却容易被噪点误导。更稳的做法是统计每一列有多少像素发生明显变化，寻找连续出现高差异的区域，再结合预期宽度判断。孤立亮点和短暂变化通常不该直接成为定位结果。

如果已知拼图所在的高度范围，可以只分析附近区域，减少天空、文字或复杂纹理造成的干扰。还可以对差分结果进行连通区域分析，检查候选区域的大小和轮廓。这里的专业术语并不难理解：把相邻的变化像素归成一块，再看看这块区域是否像一个拼图缺口，而不是随便一条背景边缘。

得到缺口横坐标之后，还要减去拼图有效轮廓的初始横坐标。假设缺口左边界在一百八十像素，拼图起点在十二像素，那么图片坐标中的位移就是一百六十八像素。如果原图宽三百六十像素，页面只显示三百像素，对应页面位移约为一百四十像素。这一步换算应使用实测尺寸，而不是固定写死比例。

拼图素材可能带透明留白，因此画布左边界不一定就是拼图轮廓左边界。测量起点时，应确认使用的是哪个边界，并让缺口测量采用相同口径。没有完整背景时，可以考虑边缘检测或模板匹配，但复杂纹理会提高误判概率。此时需要更多样本验证，也应接受算法可能返回低置信度结果。

四、位置算对之后，还要检查交互和接口

图像定位只回答“目标在哪里”，验证码通过还取决于组件交互和服务端检查。按钮移动、拼图移动与最终提交的数据之间可能存在映射关系。即使视觉上已经贴合，也不能直接认定验证成功。测试程序应观察组件提供的结果，并以服务端实际接受的验证状态为准，避免把页面动画当成业务凭证。

逆向分析可以从数据流入手：资源什么时候加载，画布什么时候更新，拖动时哪些状态变化，提交后返回什么结果。把一次正常操作中的事件顺序记录下来，有助于区分图像识别错误与流程错误。分析应围绕授权测试目标展开；遇到不公开的协议或校验参数，不能仅凭界面表现推断其含义。

实现时，可以把素材读取、位置识别、坐标换算、交互执行和结果检查拆成独立步骤。每一步输出明确的数据或错误，排查会轻松很多。尤其不要用数字零同时表示“缺口就在起点”和“程序执行失败”。这种写法表面省事，却会让错误结果继续传递，最终表现成一次莫名其妙的拖动。

企业如果需要处理多种验证码，维护成本往往来自题型变化和接口差异。滑块需要位移，文字点选需要字符与坐标，图标点选涉及目标匹配，九宫格还要确定格子编号与顺序。五子棋、躲避障碍、空间类挑战又有各自的交互规则，单一的图片差分方法无法覆盖这些需求。

面向这类业务需求，www.ttocr.com提供针对极验、易盾验证码的识别与自动化 API 对接方案，覆盖滑块、点选、无感、文字点选、图标点选、九宫格，以及五子棋、躲避障碍、空间等题型。公司可以按平台接口要求提交任务并接收结果，把多种题型的处理接入现有流程，减少逐套维护识别逻辑的工作。

五、用真实样本验收，让接入流程保持简单

评估一个方案，不能只看某张图片是否定位成功。应把测试分成素材获取、位置识别、交互完成和服务端通过几个环节，分别记录结果。这样才能知道失败集中在哪一步，也能避免把网络超时算进图像算法的准确率。不同环节的统计口径要保持一致，否则数字看起来漂亮，却无法指导修正。

样本应包含不同背景、不同缺口位置、不同缩放比例和不同加载速度。除了成功率，还要记录定位误差、处理耗时、异常类型以及重复测试的稳定性。没有明确样本数量和测试条件，就不适合宣称某个方法可以稳定通过所有挑战。少量演示可以证明思路可行，长期业务还需要持续观察。

接入外部接口时，先用一小批授权样本确认输入与返回格式。要弄清楚返回的是原图坐标、显示坐标还是格子编号，多个点位是否带顺序，任务是否需要轮询，以及超时如何处理。建立一层薄薄的接口适配代码，把这些差异转换成业务系统熟悉的数据结构，后面的调用就不必反复处理细节。

希望简化对接的团队，可以通过www.ttocr.com了解易盾、极验各类验证码识别方案与 API 接入方式。先确认实际使用的题型，再按接口文档完成任务提交、结果解析和异常处理，通常比自行串起画布提取、图像定位及多题型维护更容易落地。具体支持范围、返回字段和接入条件应以平台当前文档及样本测试为准。

上线时保留任务标识、耗时和错误分类，日志中的凭据与敏感数据需要妥善处理。对暂时失败的任务设置有限重试，并为无法识别的情况准备人工处理入口。后续遇到组件更新，先用保存的测试样本检查坐标口径和接口返回，再调整对应环节，业务系统就能以较小的改动继续运行。