实现图片滑动验证码js插件+后台（完整版）

之前一直比较忙，最近也看到之前发的很多人问，现在我就提取出来发个简化完整版的。

我后端采用python+flask+redis，简易实现图片验证功能，如需复杂验证，请记录鼠标拖动轨迹，后端实现分析，具体有兴趣的朋友可以试试。

js插件重要代码

/**
 * Created by lgy on 2017/10/21.
 * 图片验证码
 */
(function ($) {
    $.fn.imgcode = function (options) {
        //初始化参数
        var defaults = {
            frontimg:"",
            backimg:"",
            refreshImg:"",
            getsuccess:"",
            getfail:"",
            maskclose:true,
            callback:"",  //回调函数
            refreshcallback:""
        };
        var opts = $.extend(defaults, options);
        return this.each(function () {
            var $this = $(this);//获取当前对象
            var html = '<div class="code-k-div">' +
                '<div class="code_bg"></div>' +
                '<div class="code-con">' +
                '<div class="code-img">' +
                '<div class="code-img-con">' +
                '<div class="code-mask"><img class="code-front-img" src="'+opts.frontimg+'"></div>' +
                '<img class="code-back-img" src="'+opts.backimg+'"></div>' +
                '<div class="code-push"><i class="icon-login-bg icon-w-25 icon-push">刷新</i><span class="code-tip"></span></div>' +
                '</div>' +
                '<div class="code-btn">' +
                '<div class="code-btn-img code-btn-m"></div>' +
                '<span class="code-span">按住滑块，拖动完成上方拼图</span>' +
                '</div></div></div>';
            $this.html(html);

            //定义拖动参数
            var $divMove = $(this).find(".code-btn-img"); //拖动按钮
            var $divWrap = $(this).find(".code-btn");//鼠标可拖拽区域
            var mX = 0, mY = 0;//定义鼠标X轴Y轴
            var dX = 0, dY = 0;//定义滑动区域左、上位置
            var isDown = false;//mousedown标记
            if(document.attachEvent) {//ie的事件监听，拖拽div时禁止选中内容，firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none;
                $divMove[0].attachEvent('onselectstart', function() {
                    return false;
                });
            }
            //按钮拖动事件
            $divMove.unbind('mousedown').on({
                mousedown: function (e) {
                    //清除提示信息
                    $this.find(".code-tip").html("");
                    var event = e || window.event;
                    mX = event.pageX;
                    dX = $divWrap.offset().left;
                    dY = $divWrap.offset().top;
                    isDown = true;//鼠标拖拽启
                    $(this).addClass("active");
                    //修改按钮阴影
                    $divMove.css({"box-shadow":"0 0 8px #666"});
                }
            });
            //点击背景关闭
            if(opts.maskclose){
                $this.find(".code_bg").unbind('click').click(function(){
                    $this.html("");
                })
            }
            //刷新code码
            $this.find(".icon-push").unbind('click').click(function(){
                opts.refreshcallback();
            });
            //鼠标点击松手事件
            $divMove.unbind('mouseup').mouseup(function (e) {
                var lastX = $this.find(".code-mask").offset().left - dX - 1;
                isDown = false;//鼠标拖拽启
                $divMove.removeClass("active");
                //还原按钮阴影
                $divMove.css({"box-shadow":"0 0 3px #ccc"});
                returncode(lastX);
            });
            //滑动事件
            $divWrap.mousemove(function (event) {
                var event = event || window.event;
                var x = event.pageX;//鼠标滑动时的X轴
                if (isDown) {
                    if(x>(dX+30) && x<dX+$(this).width()-20){
                        $divMove.css({"left": (x - dX - 20) + "px"});//div动态位置赋值
                        $this.find(".code-mask").css({"left": (x - dX-30) + "px"});
                    }
                }
            });
            //返回坐标系
            function returncode(xpos){
                opts.callback({xpos:xpos});
            }
            //验证数据
            function checkcode(code){
                var iscur=true;
                //模拟ajax
                setTimeout(function(){
                    if(iscur){
                        checkcoderesult(1,"验证通过");
                        $this.find(".code-k-div").remove();
                        opts.callback({code:1000,msg:"验证通过",msgcode:"23dfdf123"});
                    }else{
                        $divMove.addClass("error");
                        checkcoderesult(0,"验证不通过");
                        opts.callback({code:1001,msg:"验证不通过"});
                        setTimeout(function() {
                            $divMove.removeClass("error");
                            $this.find(".code-mask").animate({"left":"0px"},200);
                            $divMove.animate({"left": "10px"},200);
                        },300);
                    }
                },500)
            }
            //刷新图标
            opts.refreshImg=function(data){
                console.log(data)
                $this.find(".code-img-con .code-front-img").attr("src",data.frontImg);
                $this.find(".code-img-con .code-back-img").attr("src",data.backGoundImg);
            }
            //验证成功
            opts.getsuccess=function(){
                checkcoderesult(1,"验证通过");
                setTimeout(function() {
                    $this.find(".code-k-div").remove();
                },800);

            }
            //验证失败
            opts.getfail=function(txt){
                $divMove.addClass("error");
                checkcoderesult(0,txt);
                setTimeout(function() {
                    $divMove.removeClass("error");
                    $this.find(".code-mask").animate({"left":"0px"},200);
                    $divMove.animate({"left": "10px"},200);
                },400);
            }
            //验证结果
            function checkcoderesult(i,txt){
                if(i==0){
                    $this.find(".code-tip").addClass("code-tip-red");
                }else{
                    $this.find(".code-tip").addClass("code-tip-green");
                }
                $this.find(".code-tip").html(txt);
            }
        })
    }
})(jQuery);

python实现接口重要代码

rHost='127.0.0.1', rPort=6379, rDb=1, rPasswd='123456' 这里是配置redis的地方。

#!/usr/bin/env python
# -*- coding:utf-8 -*-

from PIL import Image, ImageFilter
import random
import glob
# from matplotlib.pyplot import imsave
import base64
from io import BytesIO
import redis,os

backgroundPaton = os.getcwd()+"/app/codeimg/*.[pP][nN][gG]"
maskPaton = os.getcwd()+"/app/codeimgMask/*[0-9]-[bB].[pP][nN][gG]"
yMargin = 2
kSuffix = "_captchaCode"

class captcha:
    def __init__(self, rHost='127.0.0.1', rPort=6379, rDb=1, rPasswd='123456'):
        self.host = rHost
        self.port = rPort
        self.db = rDb
        self.passwd = rPasswd
        # self.r = rds

    def getRedis(self):
        pool = redis.ConnectionPool(host=self.host, port=self.port, db=self.db, password=self.passwd)
        return redis.StrictRedis(connection_pool=pool)
        # return redis.Redis(host=self.host, port=self.port,db=self.db,password=self.passwd)

    def getCode(self, did):
        if (len(did) < 32):
            return 0, 0

        bImgFile = random.choice(glob.glob(backgroundPaton))  # 随机取底图文件
        bBorderFile = random.choice(glob.glob(maskPaton))  # 随机取底图蒙层文件
        # print(bBorderFile)
        fBorderPaton = bBorderFile[:(len(bBorderFile) - 5)] + "[wW].[pP][nN][gG]"  #
        fBorderFile = random.choice(glob.glob(fBorderPaton))  # 上层图蒙层文件

        # print(fBorderFile)
        bImg = Image.open(bImgFile)  # 底图
        bBorder = Image.open(bBorderFile)  # 底图蒙层
        fBorder = Image.open(fBorderFile)  # 上层图蒙层

        xPos = random.randint(bBorder.size[0], bImg.size[0] - bBorder.size[0])  # 取图x坐标
        yPos = random.randint(yMargin, bImg.size[1] - bBorder.size[1] - yMargin)  # 取图y坐标
        pos = (xPos, yPos)
        reg = pos + (xPos + bBorder.size[0], yPos + bBorder.size[1])  # 取图矩形区域

        cImg = bImg.crop(reg)  # 底图中取矩形图
        bMask = fBorder.convert('RGBA')  # 蒙层边界
        fChip = Image.composite(cImg, bMask, mask=fBorder)  # 取出图片合成外层边框
        fImg = Image.new("RGBA", bImg.size)
        fImg.paste(fChip, (0, yPos))
        #fImg.save("front.png")
        fImgBuf = BytesIO()
        fImg.save(fImgBuf, format="png")

        bMask = bBorder.convert('RGBA')  # 蒙层边界
        bImg.paste(bBorder, pos, mask=bMask)  # 叠加蒙层
        #bImg.save("back.png")
        bImgBuf = BytesIO()
        bImg.save(bImgBuf, format="png")

        rds = self.getRedis()
        rds.set(did + kSuffix, xPos, ex=60)
        self.fImgStream = 'data:image/png;base64,'+base64.b64encode(fImgBuf.getbuffer()).decode()
        self.bImgStream = 'data:image/png;base64,'+base64.b64encode(bImgBuf.getbuffer()).decode()
        # return self.fImgStream,self.bImgStream
        return {"code":200,"frontImg": self.fImgStream, "backGoundImg": self.bImgStream}

    #获取通过码状态
    def getCodeState(self,did):
        rdsKeyResult = did + "_captchaResult"
        rds = self.getRedis()
        xValue=False
        try:
            xValue = rds.get(rdsKeyResult)
            xValue=bool(xValue)
            rds.delete(rdsKeyResult)
        except:
            print("获取失败")
        return xValue

    def chkCode(self, did, xPos, off=2):  # 1-验证成功;2-验证失败;3-验证码过期;4-验证次数超过3次,off-误差值
        rdsKey = did + kSuffix
        rdsChkKey = did + "_captchaCnt"
        rdsKeyResult = did + "_captchaResult"
        rds = self.getRedis()
        try:
            xValue = rds.get(rdsKey)
            xPosRDS = int(xValue)
        except:
            rds.delete(rdsKey)
            rds.delete(rdsChkKey)
            return 3
        rdsChkCount = rds.incr(rdsChkKey)
        if (rdsChkCount > 3):
            rds.delete(rdsKey)
            rds.delete(rdsChkKey)
            return 4
        if (abs(xPosRDS - xPos) <= off):
            rds.delete(rdsKey)
            rds.delete(rdsChkKey)
            rds.set(rdsKeyResult, True, ex=30)
            return 1
        else:
            return 2

    # 生成手机号验证码
    def setSmsCode(self, did):
        rdsKeyResult = did + "_captchaMobile"
        rds = self.getRedis()
        randomnum=random.randint(10000,999999)
        try:
            rds.set(rdsKeyResult, randomnum, ex=120)
            result = {"code": 200, "smscode": randomnum}
        except:
            result = {"code": 203, "smscode":0}
        return result

    # 检测短信验证码
    def chkSmsCode(self, did,smscode):
        rdsKeyResult = did + "_captchaMobile"
        rds = self.getRedis()
        xValue = False
        try:
            xall = rds.get(rdsKeyResult)
            xall = int(xall)
            if(int(smscode)==xall):
                rds.delete(rdsKeyResult)
                xValue=True
        except:
            print("验证失败")
        return xValue

if __name__=='__main__':
    myCaptcha = captcha()
    print(myCaptcha.getCode('abcdefghijklmnopqrstuvwxdefghi3d'))
    #print(myCaptcha.chkCode('abcdefghijklmnopqrstuvwxdefghi3d', 182))

下载地址: https://download.csdn.net/download/jylonger/10771662

实例展示: http://www.xiuler.com        （可输入32位字符测试，例：OtgsFq6d4mv7sEox4b2wBTdRtIBCSug8）