前端动态生成随机图形验证码

图形验证码示例图

<template><view class="dis-flex"><view style="margin-top: 8px;">验证码：</view><input:enableNative="false"style="width:100px;height:30px;border-bottom:1px solid #000;"v-model="verCode"name="verCode"id="verCode"><view @tap="refresh()" class="canvas-img-code">/*注： 这里 是支付宝小程序，用的是id，其他平台是用canvas-id='' */<canvas :style="{width:width+'px',height:height+'px'}" id="imgcanvas" @error="canvasIdErrorCallback"></canvas></view></view>
</template><script>data() {return {verCode: '', // 验证码,width: 120,height: 45,}},onShow() {const that = this;setTimeout(() => {that.init();}, 1000);},methods: {// 初始化验证码init() {console.log('start');const context = uni.createCanvasContext('imgcanvas', this);const w = this.width;const h = this.height;context.setFillStyle('white');context.setLineWidth(5);context.fillRect(0, 0, w, h);const pool = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'I', 'M', 'N', 'O', 'P', 'Q', 'R', 'S','T', 'U', 'V', 'W', 'S', 'Y', 'Z', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];let str = '';for (let i = 0; i < 4; i++) {const c = pool[this.rn(0, pool.length - 1)];const deg = this.rn(-30, 30);context.setFontSize(18);context.setTextBaseline('top');context.setFillStyle(this.rc(80, 150));context.save();context.translate(30 * i + 15, parseInt(h / 1.5));context.rotate(deg * Math.PI / 180);context.fillText(c, -15 + 5, -15);context.restore();str += c;}console.log(str);uni.setStorage({key: 'imgcode',data: str,});for (let i = 0; i < 40; i++) {context.beginPath();context.arc(this.rn(0, w), this.rn(0, h), 1, 0, 2 * Math.PI);context.closePath();context.setFillStyle(this.rc(150, 200));context.fill();}context.draw();console.log('end');},rc(min, max) {const r = this.rn(min, max);const g = this.rn(min, max);const b = this.rn(min, max);return `rgb(${r},${g},${b})`;},rn(max, min) {return parseInt(Math.random() * (max - min)) + min;},refresh() {this.init();},canvasIdErrorCallback(e) {console.error(e.detail.errMsg);},}
</script>

前端动态生成随机图形验证码相关推荐

uniapp实现动态生成随机图形验证码
<template><gui-page><view slot="gBody"><view class="content" ...
html5 前端动态加载后端,Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）...
vue+element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 elementui官网引导关键配置 template中,form和form-item的写法和绑定 data里的 ...
在JSP中动态生成随机验证码，登录时后台校验验证码，以及如何避免同一个验证码被重复提交爆破密码...
只需几步就可以生成动态随机的验证码,最终效果如下图: 一前台显示页面login.jsp 其中验证码显示的是一张图片,链接指向的是生成验证码的servlet,同时点击图片后触发changeImg()这 ...
js前端动态生成变量及python后端动态生成变量接收
前端代码: let sbmt = function(data){layui.use('layer', function() {var layer = layui.layer;$.ajax({url: ...
前端——动态生成表格
案例分析因为表格数据是不断更新的,我们需要js 动态生成. 这里我们模拟数据,自己定义好数据. 数据我们采取对象形式存储. 所有的数据都是放到tbody里面的行里面. 因为行很多,我们需要循环创建多 ...
vue项目中生成随机图形验证码
我们在表单验证的时候添加一个图形验证码首先在components文件夹中新建一个VerificationCode.vue文件,输入以下代码 <template><span clas ...
python随机画圆_python生成随机图形验证码详解
#导入random模块 import random #导入Image,ImageDraw,ImageFont模块 from PIL import Image,ImageDraw,ImageFont # ...
前端动态生成横向树形表格
一.问题遇到项目需求是横向展示树形数据,之前写的时候element的官方有加载树形数据的表格组件,项目其他地方有用表格组件的写的demo,但是涉及到行合并的逻辑判断,一时没搞清楚,就用原生画了表格. ...
前端动态生成数组/获取数组对象中的最值
Array.from Array.from({ length: 20 }, (v, k) => k) 获取数组对象中的最大值/最小值方法一 Math的静态方法max/min结合ES6的扩展运算 ...

前端动态生成随机图形验证码

前端动态生成随机图形验证码相关推荐

最新文章

热门文章