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


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 相关文章推荐
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
JS中confirm,alert,prompt函数使用区别分析
Apr 01 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
AngularJS教程之MVC体系结构详解
Aug 16 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
countUp.js实现数字滚动效果
Oct 18 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
详解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
模拟flock实现文件锁定
2007/02/14 PHP
优化使用mysql存储session的php代码
2008/01/10 PHP
逐步提升php框架的性能
2008/01/10 PHP
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
Javascript 函数对象的多重身份
2009/06/28 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
浅析javascript中function 的 length 属性
2014/05/27 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
jQuery蓝色风格滑动导航栏代码分享
2015/08/19 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
基于python代码批量处理图片resize
2020/06/04 Python
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
武汉英思工程科技有限公司&ndash;ORACLE面试测试题目
2012/04/30 面试题
学校采购员岗位职责
2014/01/02 职场文书
公司员工检讨书
2014/02/08 职场文书
阳光体育活动方案
2014/02/16 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
优秀教师单行材料
2014/12/16 职场文书
毕业设计论文评语
2014/12/31 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
自荐信范文
2019/05/20 职场文书