uniapp登录页面加入图片验证码记录

效果图

参考文章（侵删）

https://www.jb51.net/article/210830.htm

该文章是在vue内实现图片验证码，和uniapp有一丢丢不一样，不过大佬写的很好，效果也很棒。

代码如下

<template><div class="s-canvas"><canvas canvas-id="myCanvas" :style="{ width: '100px', height: '38px' }"></canvas></div>
</template>
<script>
export default {name: 'SIdentify',props: {identifyCode: {type: String,default: '1234'},fontSizeMin: {type: Number,default: 28},fontSizeMax: {type: Number,default: 40},backgroundColorMin: {type: Number,default: 180},backgroundColorMax: {type: Number,default: 240},colorMin: {type: Number,default: 50},colorMax: {type: Number,default: 160},lineColorMin: {type: Number,default: 40},lineColorMax: {type: Number,default: 180},dotColorMin: {type: Number,default: 0},dotColorMax: {type: Number,default: 255},contentWidth: {type: Number,default: 100},contentHeight: {type: Number,default: 40}},methods: {// 生成一个随机数randomNum (min, max) {return Math.floor(Math.random() * (max - min) + min)},// 生成一个随机的颜色randomColor (min, max) {var r = this.randomNum(min, max)var g = this.randomNum(min, max)var b = this.randomNum(min, max)return 'rgb(' + r + ',' + g + ',' + b + ')'},drawPic () {var ctx = uni.createCanvasContext('myCanvas', this); // 主要是这里ctx.textBaseline = 'bottom'let color = this.randomColor(this.backgroundColorMin,this.backgroundColorMax)ctx.setFillStyle(color)ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)// 绘制文字for (let i = 0; i < this.identifyCode.length; i++) {this.drawText(ctx, this.identifyCode[i], i)}this.drawLine(ctx)this.drawDot(ctx)ctx.draw() // 以及这里，没有这个的话uniapp上绘制不出来},drawText (ctx, txt, i) {ctx.setFillStyle(this.randomColor(this.colorMin, this.colorMax))ctx.font =this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'var x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))var y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)var deg = this.randomNum(-30, 30)// 修改坐标原点和旋转角度ctx.translate(x, y)ctx.rotate(deg * Math.PI / 270)ctx.fillText(txt, 0, 0)// 恢复坐标原点和旋转角度ctx.rotate(-deg * Math.PI / 270)ctx.translate(-x, -y)},drawLine (ctx) {// 绘制干扰线for (let i = 0; i < 2; i++) {ctx.strokeStyle = this.randomColor(this.lineColorMin,this.lineColorMax)ctx.beginPath()ctx.moveTo(this.randomNum(0, this.contentWidth),this.randomNum(0, this.contentHeight))ctx.lineTo(this.randomNum(0, this.contentWidth),this.randomNum(0, this.contentHeight))ctx.stroke()}},drawDot (ctx) {// 绘制干扰点for (let i = 0; i < 20; i++) {ctx.fillStyle = this.randomColor(0, 255)ctx.beginPath()ctx.arc(this.randomNum(0, this.contentWidth),this.randomNum(0, this.contentHeight),1,0,2 * Math.PI)ctx.fill()}}},watch: {identifyCode () {this.drawPic()}},
}
</script>
<style lang='less' scoped>
.s-canvas {height: 76rpx;width: 200rpx;
}</style>

此文章主要是作为记录，代码内容源于链接文章，需要请点击跳转参考

uniapp登录页面加入图片验证码相关推荐

【原创】基于phpGrace+uniApp开发之：5.登录界面增加图片验证码
1.目的: 采用phpGrace中的图片验证码,在用户名+密码登录时使用图片验证码进行验证. 2.文档地址: 图片验证码的文档地址:http://www.phpgrace.com/tools/info ...
python 登陆网站图片验证,用python登录带弱图片验证码的网站
上一篇介绍了使用python模拟登陆网站,但是登陆的网站都是直接输入账号及密码进行登陆,现在很多网站为了加强用户安全性和提高反爬虫机制都会有包括字符.图片.手机验证等等各式各样的验证码.图片验证码就是 ...
vue实现登录时的图片验证码（纯前端）
提示:这里只将我成功运行出来的案例放在这里供大家参考一.图片验证码经过我一天的查询,<vue实现登录时的图片验证码>,这篇博客效果比较好,代码基本没有什么问题的.效果如下,点击图片即可 ...
修改WordPress登录页面LOGO图片（WP站长必看）
修改WordPress登录页面LOGO图片(站长必看) 在这个互联网发达的时代,相信有很多人都有了自己的一个属于自己的小博客空间吧. 不管是业余爱好.还是互联网企业上班族.相信最多的应该是软件技术专业 ...
PHP登录带图片,PHP登录注册完整图片验证码实现
通过上一篇 PHP gd简单画图学习后.这篇将继续探索实现PHP图片验证码的实现.效果图如下为什么需要验证码? 验证码设计.验证码一使用于用户注册和登录.主要是防止机器批量注册用户或机器频繁测试登录 ...
登录页面自动刷新验证码，并校验输入验证码和后台生成的验证码是否一致
登录jsp页面 <%@ page language="java" contentType="text/html; charset=UTF-8"pageEn ...
WEB登录页面加入简单验证码
1.0 找了几张数字图片,在登录页面做了简单的验证码,如下图: 2.0 验证码正确,登录系统,否则返回登录页面 3.0 index.jsp: <%@ page language="ja ...
node+vue前后端分离实现登录时使用图片验证码
记录一下前端使用验证码登录的过程后端用的是node.js,关键模块是svg-captcha 前端使用的是vue2 最后的登录界面如下: 后端代码先上代码,然后解释 const svgCaptcha ...
系统登录页面短信验证码方式登录实现
近期公司有个需求,要求使用短信验证码登录,取代原来的图片验证码方式,在此记录一下我的实现方法,希望对你有所帮助公司需求:目前只有账号和验证码方式验证登录,按照公司网络安全统一部署,要求所有公网系统都 ...

uniapp登录页面加入图片验证码

uniapp登录页面加入图片验证码记录

效果图

参考文章（侵删）

代码如下

uniapp登录页面加入图片验证码相关推荐

最新文章

热门文章

uniapp登录页面加入图片验证码

uniapp登录页面加入图片验证码记录

效果图

参考文章 （侵删）

代码如下

uniapp登录页面加入图片验证码相关推荐

最新文章

热门文章

参考文章（侵删）