javascript canvas 生成验证码 返回bas

canvas 生成验证码

function codeCanvasImg(Code, Site){

    let Div = document.createElement('div')
    Div.innerHTML = '<canvas width="'+ Site.w +'" height="'+ Site.h +'"></canvas>'
    //document.body.appendChild(Div)
    let canvas = Div.getElementsByTagName('canvas')[0]
    //干扰线的随机x坐标值
    function lineX(){
        //坐标值在width之内
        var ranLineX = Math.floor(Math.random()*80);
        return ranLineX;
    }
    //干扰线的随机y坐标值
    function lineY(){
        //坐标值在height之内
        var ranLineY=Math.floor(Math.random()*36);
        return ranLineY;
    }
    //传入的参数表示canvas节点
    //传入参数主要是在react中方便使用，若为原生HTML，可在此方法内通过getElementById的方法直接获取节点
    function codeCanvas(codeShow){
        var cxt=codeShow.getContext('2d');
        //背景颜色
        cxt.fillStyle='#8dd5e7';
        //矩形左上角x,y坐标以及矩形宽高
        cxt.fillRect(0,0, Site.w , Site.h);
        //生成干扰线20条
        for(var j=0;j<20;j++){
            //线条的颜色
            cxt.strokeStyle='#666';
            //若省略beginPath，则每点击一次验证码会累积干扰线的条数
            cxt.beginPath(); 
            cxt.moveTo(lineX(),lineY());
            cxt.lineTo(lineX(),lineY());
            cxt.lineWidth=0.5;
            cxt.closePath();
            cxt.stroke();
        }
        //不设置的话里面的文本颜色就是和上面设置的背景色相同
        cxt.fillStyle='#fff';
        cxt.font='bold 20px Arial';
        //把生成的随机数文本填充到canvas中
        cxt.fillText(Code,16,24); 
    }
    function getBase64(file, cb){
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function (e) {
          var url = e.target.result;
          cb(url)
      }
    }
    codeCanvas(canvas)
    var image = new Image()
    image.src = canvas.toDataURL("image/png")   
    return image.src
}

USE
codeCanvasImg('4565', {w: 80, h: 36})

附带一个随机码函数

  getCode(n) {
    var all = "azxcvbnmsdfghjklqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP0123456789";
    var b = "";
    for (var i = 0; i < n; i++) {
      var index = Math.floor(Math.random() * 62);
      b += all.charAt(index);

    }
    return b;
  },

--END--