微信小程序的图形验证码实现

1.wxml页面

 <canvas canvas-id="canvas" bindtap='change' style="width:90px;height: 30px;"></canvas>

2.js页面

var app = getApp();
var baseUrl = getApp().baseUrl;
var ctx;
data:{text:""
},
onLoad: function(options) {var that = this;this.drawPic(that);
},
change: function() {var that = this;this.drawPic(that);
},
mobile(e) {this.setData({mobile: e.detail.value})
},
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 + ")";
},/**绘制验证码图片**/
drawPic(that) {
ctx = wx.createCanvasContext('canvas');
/**绘制背景色**/
ctx.fillStyle = this.randomColor(180, 240); //颜色若太深可能导致看不清
ctx.fillRect(0, 0, 90, 28)
/**绘制文字**/
var arr;
var text = '';
var str = 'ABCEFGHJKLMNPQRSTWXY123456789';
for (var i = 0; i < 4; i++) {var txt = str[this.randomNum(0, str.length)];ctx.fillStyle = this.randomColor(50, 160); //随机生成字体颜色ctx.font = this.randomNum(20, 26) + 'px SimHei'; //随机生成字体大小var x = 5 + i * 20;var y = this.randomNum(20, 25);var deg = this.randomNum(-20, 20);//修改坐标原点和旋转角度ctx.translate(x, y);ctx.rotate(deg * Math.PI / 180);ctx.fillText(txt, 5, 0);text = text + txt;//恢复坐标原点和旋转角度ctx.rotate(-deg * Math.PI / 180);ctx.translate(-x, -y);
}
/**绘制干扰线**/
for (var i = 0; i < 4; i++) {ctx.strokeStyle = this.randomColor(40, 180);ctx.beginPath();ctx.moveTo(this.randomNum(0, 90), this.randomNum(0, 28));ctx.lineTo(this.randomNum(0, 90), this.randomNum(0, 28));ctx.stroke();
}
/**绘制干扰点**/
for (var i = 0; i < 20; i++) {ctx.fillStyle = this.randomColor(0, 255);ctx.beginPath();ctx.arc(this.randomNum(0, 90), this.randomNum(0, 28), 1, 0, 2 * Math.PI);ctx.fill();
}
ctx.draw(false, function() {that.setData({text: text})
});

3.效果：

微信小程序的图形验证码实现相关推荐

uniapp 微信小程序获取图形验证码解决方案
写这篇博客的初衷是,自己陷入深坑,爬了好久,前端小白,记录一下吧.. **问题:**在登录时候,需要获取图形验证码来验证登录,接口返回的是base64,直接可以用base64来显示图片,没毛病吧,我也 ...
微信小程序——有关图形验证码的所有信息
今天写一个有关图形验证码的笔记,先看效果图: 第一个问题图形验证码怎么制作出来的呢?看代码: wxml: <canvas canvas-id="canvas" bindtap ...
微信小程序 vue 滑块验证码
前提:之前写的vue版滑块验证码,可以在h5和web使用,但是在微信小程序运行就有问题.因此进行一系列的修改一.vue版滑块验证码实现地址 vue 图片拖拽验证码_周皮皮皮皮皮皮的博客-CSDN博客 ...
微信小程序之获取验证码js
在微信小程序中怎样实现获取验证码的倒计时功能捏,倒计时的原理是一样一样的,就是某些地方需要注意. 第一步:结构 <view class='get-code' wx:if="{{!isS ...
微信小程序获取手机验证码短信验证码后端功能实现解析
本文原创首发CSDN,链接 https://mp.csdn.net/console/editor/html/106041472 ,作者博客https://blog.csdn.net/qq_414641 ...
微信小程序中短信验证码登录全流程及代码
才开始学习小程序,用到短信验证码登录免费注册账号: http://sms_developer.zhenzikj.com/zhenzisms_user/register.html 完整demo下载: ...
Django搭建服务器，和微信小程序通信，验证码存入redis，用户信息存入mysql以及图片上传
写在前面:整体是实现小程序的登录和注册,并接收验证码进行校验. 一.创建项目 django-admin startproject wxTest 二.注册app,进入到wxTest目录中 python ...
微信小程序多位验证码/密码输入框
微信小程序IDE链接 developers.weixin.qq.com/s/07iQrdmZ7- 源码 github.com/richard1015- 转载于:https://juejin.im/po ...
微信小程序实现滑块验证码
老规矩,先上Demo: 思路创建2个canvas,一个当作背景,一个当作拼图. 传入3个参数,x:canvas中裁剪区域的横坐标,y:canvas中裁剪区域的纵坐标,l:拼图的边长背景图使用fi ...

微信小程序的图形验证码实现

微信小程序的图形验证码实现相关推荐

最新文章

热门文章