zyz-slider-verify

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 - 滑动校验失败后的回调函数，默认空函数