绘制微信小程序验证码功能的实例代码


Posted in Javascript onJanuary 05, 2021

1.在 utils 文件中新建 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('');
  let width = this.options.width;
  let height = this.options.height;
  let ctx = this.ctx;
  if (arr.length === 0) {
   arr = ['e', 'r', 'r','o','r'];
  };
  let offsetLeft = width * 0.6 / (arr.length - 1);
  let marginLeft = width * 0.2;
  arr.forEach((item, index) => {
   ctx.setFillStyle(this.randomColor(0, 180));
   let size = this.randomNum(24, this.fontSize);
   ctx.setFontSize(size);
   let dis = offsetLeft * index + marginLeft - size * 0.3;
   let deg = this.randomNum(-30, 30);
   ctx.translate(dis, height*0.5);
   ctx.rotate(deg * Math.PI / 180);
   ctx.fillText(item, 0, 0);
   ctx.rotate(-deg * Math.PI / 180);
   ctx.translate(-dis, -height * 0.5);
  })
  //绘制干扰线
  for (var i = 0; i < 2; i++) {
	  ctx.strokeStyle = this.randomColor(40, 180);
	  ctx.beginPath();
	  ctx.moveTo(this.randomNum(0, width), this.randomNum(0, height));
	  ctx.lineTo(this.randomNum(20, width), this.randomNum(2, height));
	  ctx.stroke();
  }
  //绘制干扰点
  for (var i = 0; i < 30; i++) {
	  ctx.fillStyle = this.randomColor(0, 255);
	  ctx.beginPath();
	  ctx.arc(this.randomNum(0, width), this.randomNum(0, height), 1, 0, 2 * Math.PI);
	  ctx.fill();
	 }
  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 + ")";
 }
}

2.在需要验证码的js文件中引入

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

res.data 是要传到mcaptcha.js 中的 code 值,也就是验证码,可以随意写为如:“ho55”,“a2sd” 等等。我这里是从后台传过来的数据,(前人写的代码,不好改动,只在前端加上干扰线和彩图)。

new Mcaptcha({
  el: 'canvas',
  width: 100,
  height: 30,
  code: res.data
});

wxml 文件, bindtap="getImgYZM"new Mcaptcha 的方法名,再次点击可以换验证码图片。

<view bindtap="getImgYZM" class="yzm">
  <canvas style="width:{{cvs.width}};height:{{cvs.height}};" canvas-id="canvas"></canvas>
</view>

如果是在前端设置随机数,可以在data:{} 里面写

data: {
   str:"0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,I,J,K,L,M,N,P,Q,R,S,T,U,V,W,X,Y,Z",
   randStr:""
 }
//获取随机数
var res = "";
for(var i = 0; i < str.length ; i ++) {
  var id = Math.ceil(Math.random()*35);
  res += chars[id];
}
return res;

这一步可不看,以下是后端C#语言产生随机数返给前端的代码:

using JobClass;
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Web;
using System.Web.SessionState;

namespace WebSite.pcode
{
  /// <summary>
  /// getcode 的摘要说明
  /// </summary>
  public class getcode : IHttpHandler, IRequiresSessionState
  {
    public void ProcessRequest(HttpContext context)
    {
      context.Response.ContentType = "text/plain";
      string str = "0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,I,J,K,L,M,N,P,Q,R,S,T,U,V,W,X,Y,Z";
      string randStr = "";
      //生成随机数 Random
      Random randobj = new Random();
      string[] arr = str.Split(',');
      for (int i = 0; i < 4; i++)
      {
        randStr += arr[randobj.Next(arr.Length)];
      }
      context.Response.Write(randStr);
      return;
    }
    public bool IsReusable
    {
      get
      {
        return false;
      }
    }
  }
}

到此这篇关于绘制微信小程序验证码功能的实例代码的文章就介绍到这了,更多相关微信小程序验证码内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Jquery中children与find之间的区别详细解析
Nov 29 Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
JavaScript中的时间处理小结
Feb 24 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
vue下history模式刷新后404错误解决方法
Aug 18 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
vue下载excel的实现代码后台用post方法
May 10 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 Javascript
Element Carousel 走马灯的具体实现
Jul 26 Javascript
详解JavaScript中分解数字的三种方法
Jan 05 #Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 #Vue.js
mapboxgl实现带箭头轨迹线的代码
Jan 04 #Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 #Vue.js
vue3弹出层V3Popup实例详解
Jan 04 #Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 #Vue.js
three.js显示中文字体与tween应用详析
Jan 04 #Javascript
You might like
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
js实现验证码功能
2020/07/24 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
Python访问MySQL封装的常用类实例
2014/11/11 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
两道JAVA笔试题
2016/09/14 面试题
JAVA招聘远程笔试题
2015/07/23 面试题
行政总经理岗位职责
2013/12/05 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
家长给老师的感谢信
2015/01/20 职场文书
世界环境日活动总结
2015/02/11 职场文书
雾霾停课通知
2015/04/24 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
上班迟到检讨书
2015/05/06 职场文书
团干部培训班心得体会
2016/01/06 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers