代码拉取完成，页面将自动刷新
拖拽图形验证，简单易用, 只需要绑定按钮即可使用。 english
composer require rlofls/drag-captcha
先设置 Resources::$customBg 数组值，一定要是 png 图片， 存放的是图片路径。 eg:
//设置自定义背景
Resources::$customBg = [
__DIR__ . '/customBg/1.png',
__DIR__ . '/customBg/2.png',
__DIR__ . '/customBg/3.png',
//...
];
能够使目标不那么明显，会随机对目标进行扩展/剪切，在调用 generate() 方法时候， 传入true 值即可。 eg: $drag->generate(true);
expand:
cut
composer installphp -S 127.0.0.1:8087http://127.0.0.1:8087
参考 index.php index.html
复制 dragCaptcha.css dragCaptcha.js 到自己项目应用
参考 html
<body>
<button id="show">show</button>
</body>
<script type="module">
import {DragCaptcha} from "./dragCaptcha.js";
//设置要绑定的按钮
let btn = document.getElementById("show")
//1.设置 请求数据api 地址， 默认： /dragData
//DragCaptcha.prototype.apiDataUrl = '/dragData'
//2.设置 请求验证api 地址， 默认： /dragVerify
//DragCaptcha.prototype.apiVerifyUrl = '/dragVerify'
//3.设置语言 默认 zh：中文， en:英文
//DragCaptcha.prototype.lang = 'en'
//4.设置debug 默认 true 会打印日志
//DragCaptcha.prototype.debug = false
//5.设置验证成功 callback
DragCaptcha.prototype.cbSuccess = function(drag) {
console.log("验证通过 cid:", drag.cid)
//处理自己业务逻辑 提交表单 ...
//如果业务逻辑失败。需要重新添加点击事件, 因为在验证成功时候会取消点击事件
//console.log("业务逻辑失败，重新绑定点击事件")
//drag.addClickEventListener()
}
//6. 设置验证失败 callback
DragCaptcha.prototype.cbFail = function(drag) {
console.log("验证失败")
}
let drag = new DragCaptcha(btn);
</script>
Rlofls\DragCaptcha\Drag
generate 生成渲染数据 dst, data
verify 验证匹配结果服务器api 要求， Content-Type: application/json
/dragData---[GET]---获取验证码数据{
"status": "success" // error 表示失败
"data": {
//一次验证 事务id 用户自己生成
"cid": "drag-captcha63c0c18566074"
//以下数据由 Rlofls\DragCaptcha\Drag::generate 生成
"bgBase64": "data:image/png;base64,iV..."
"bgH": 160
"bgW": 250
"maskBase64": "data:image/png;base64,..."
"maskLeft": 114
"maskPath": "M 15.27429..."
"maskTop": 0
"maskViewBox": 15.875
"maskWH": 57
}
}
/dragVerify---[POST]---进行验证码验证{
"cid": "drag-captcha63c0c1881db17"
"mask": {
"left": 149,
"top": 76
}
}
{"status": "error"}
issuse
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。