微信小程序图形验证码

 
  < 
  canvas 
  class= 
  'canvas' 
  style= 
  "width:{{cvs.width}};height:{{cvs.height}};" 
  canvas-id= 
  "canvas" 
  bindtap= 
  'onReady'></ 
  canvas 
  > 
 

 
  定义类的时候最好定义成canvas类，便于可以进行css样式调节 
 

字母和数字的组合（4个）

 
  let Mcaptcha = 
  require( 
  '../../utils/mcaptcha.js'); 
 

    onReady: 
   function () { 
  
   var that = 
   this; 
  
   var num = that.getRanNum(); 
  
   // console.log(num) 
  
   this.setData({ 
  
    num: num 
  
    }) 
  
   new Mcaptcha({ 
  
    el: 
   'canvas', 
  
    width: 
   80,//对图形的宽高进行控制 
  
    height: 
   30, 
  
    code: num 
  
    }); 
  
    }, 
  
    getRanNum: 
   function () { 
  
   var chars = 
   'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; 
  
   var pwd = 
   ''; 
  
   for ( 
   var i = 
   0; i < 
   4; i++) { 
  
   if (Math.random() < 
   48) { 
  
    pwd += chars.charAt(Math.random() * 
   48 - 
   1); 
  
    } 
  
    } 
  
   return pwd; 
  
    },

//mcaptcha.js

 
   module.exports = 
   class Mcaptcha { 
  
   constructor(options) { 
  
   this.options = options; 
  
   this.fontSize = options.height * 
   3 / 
   4; 
  
   this.init(); 
  
   this.refresh( 
   this.options.code); 
  
    } 
  
    init() { 
  
   this.ctx = wx.createCanvasContext( 
   this.options.el); 
  
   this.ctx.setTextBaseline( 
   "middle"); 
  
   this.ctx.setFillStyle( 
   this.randomColor( 
   180, 
   240)); 
  
   this.ctx.fillRect( 
   0, 
   0, 
   this.options.width, 
   this.options.height); 
  
    } 
  
    refresh(code) { 
  
   let arr = (code + 
   '').split( 
   ''); 
  
   if (arr.length === 
   0) { 
  
    arr = [ 
   'e', 
   'r', 
   'r', 
   'o', 
   'r']; 
  
    }; 
  
   let offsetLeft = 
   this.options.width * 
   0.6 / (arr.length - 
   1); 
  
   let marginLeft = 
   this.options.width * 
   0.2; 
  
    arr.forEach((item, index) => { 
  
   this.ctx.setFillStyle( 
   this.randomColor( 
   0, 
   180)); 
  
   let size = 
   this.randomNum( 
   24, 
   this.fontSize); 
  
   this.ctx.setFontSize(size); 
  
   let dis = offsetLeft * index + marginLeft - size * 
   0.3; 
  
   let deg = 
   this.randomNum(- 
   30, 
   30); 
  
   this.ctx.translate(dis, 
   this.options.height * 
   0.5); 
  
   this.ctx.rotate(deg * Math.PI / 
   180); 
  
   this.ctx.fillText(item, 
   0, 
   0); 
  
   this.ctx.rotate(-deg * Math.PI / 
   180); 
  
   this.ctx.translate(-dis, - 
   this.options.height * 
   0.5); 
  
    }) 
  
   this.ctx.draw(); 
  
    } 
  
    randomNum(min, max) { 
  
   return Math.floor(Math.random() * (max - min) + min); 
  
    } 
  
    randomColor(min, max) { 
  
   let r = 
   this.randomNum(min, max); 
  
   let g = 
   this.randomNum(min, max); 
  
   let b = 
   this.randomNum(min, max); 
  
   return 
   "rgb(" + r + 
   "," + g + 
   "," + b + 
   ")"; 
  
    } 
  
    }

微信小程序图形验证码

猜你喜欢