Git Product home page Git Product logo

jigsaw's Introduction

jigsaw

canvas滑动验证码

用法:

  1. 引入jigsaw.min.js

jigsaw.init({
  el: document.getElementById('container'),
  width: 310, // 可选, 默认310
  height: 155, // 可选, 默认155
  onSuccess: function () { ... },
  onFail: function () { ... },
  onRefresh: function () { ... }
})

Tips:

.

  1. 图片从 https://picsum.photos/ 随机获取,然后用canvas裁剪生成滑块.

  2. 支持移动端和IE浏览器(IE10+).

  3. 纯前端验证不能保证安全性,本项目仅供学习交流.

jigsaw's People

Contributors

yeild avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jigsaw's Issues

如何使用position:fixed样式

您好,我的项目在使用captcha时,需要让它悬浮到上面,不影响下面的HTML标记,所以需要用到positon:fixed属性,如何实现?

疑问

canvas IE9就已经支持了,为什么这个要IE10以上?哪里不兼容?

问题请教

怎么把图片获取源修改为本地图片,因为请求线上图片的耗时太长了。麻烦您了

想导出重新刷新图片功能,return里面应该怎么写?

导出重新刷新图片功能,想直接调用jigsaw.reset_pic实现图片刷新,文件里面的return应该怎么写呀?

代码:
export default {
init: function(opts) {
return new Jigsaw(opts).init();
},
reset_pic: function() {
// 下面这个return应该怎么写呀?
return *****;
}
};

先谢谢作者大大啦~

请教一个问题,我现在把你的工程改了下,现在发现了一些问题

加入了发请求的部分,但是目前只能在pc端使用了,我用模拟器或者手机打开,也可以看到图,也可以滑动,但是在移动端或者模拟器就无法发送数据了,发送的都是空,而且也不报错,但是pc端却正常,这是啥情况?
请看我部署的地址:http://www.zoux.xin:8085/api/static/

样式问题

你好,我想问下,我通过把jigsaw.js文件以及同文件夹内的jigsaw.css两个文件一起copy到自己项目中,并且在js文件内修改导出方式
// window.jigsaw = {
// init: function (opts) {
// return new Jigsaw(opts).init()
// }
// };
let ptOption = {
init: function (opts) {
return new Jigsaw(opts).init()
}
};
export default ptOption;
引用方式是在vue页面中import jigsaw.js文件然后在mounted中 jigsaw.init一样的配置方式后。发现在自己项目中的jigraw__xxxx--ccc的样式全部变成undefined。样式全部不生效。这个该怎么调整。我看你像是在webpack中配置。我感觉不能按你这原样的webpack配置,不然整个项目都挂了。
我想问:1,我该怎么调整这样加载能正常对应载入,2,这样式能改成不通过webpack这样配置吗,直接在js中对应的配置引入啥的

如何在vue项目中使用呢?

1、我尝试在vue里面使用,可是失败了……所以想知道如何才能在vue里面调用使用??能否做成vue的组件呢?
2、demo是否可以添加一个没封装的,使用jigsaw.js文件调用的例子?

先谢谢作者啦,这个滑动验证码做的真棒!

Add a license to the project?

I would like to incorporate your Captcha in a modified form in another project. Unfortunately, your Captcha does not have a license file, which means that I'm unable to use it. Would you be willing to add a license to your project? You did great work and it would be fantastic if other projects could use it too :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.