canvas实现图片验证码
npm install zyz-slider-verify
// or
yarn add zyz-slider-verify
import { ZyzSliderVerify } from "zyz-slider-verify";
// 在dom渲染完成后执行
const verify = new ZyzSliderVerify(ele, img);
// 同时组件卸载要调用清除事件、资源等
verify.destroy();
这里以React为例:
function Demo() {
useEffect(() => {
const ele = document.querySelector('#container');
if(ele) {
const verify = new ZyzSliderVerify(ele, img);
return () => verify.destroy();
}
})
return (
<div id="container">
</div>
);
}
export default Demo;
ZyzSliderVerify(ele, img, option)
- ele - 挂载节点,可以是id、class或者是dom节点。
- img - 图片src,使用该图片作为验证码背景。
- option
- width - 图片宽度,默认400
- height - 图片高度,默认300
- refresh - 刷新函数,默认空函数
- onSuccess - 滑动校验成功后的回调函数,默认空函数
- onFail - 滑动校验失败后的回调函数,默认空函数