uniapp 使用canvas自定义图片验证码组件

最新推荐文章于 2024-08-12 11:16:16 发布

需要点灵感

最新推荐文章于 2024-08-12 11:16:16 发布

阅读量847

点赞数 1

分类专栏： uniapp 文章标签： vue uni-app canvas

本文链接：https://blog.csdn.net/weixin_45622053/article/details/117448231

版权

本文介绍了如何在uni-app中创建一个使用canvas绘制的自定义图片验证码组件。组件代码位于compontents/graphValidateCode/graphValidateCode.vue，页面引用并展示前端生成的字符串验证码，与用户输入进行比对验证。

摘要由CSDN通过智能技术生成

组件 compontents/graphValidateCode/graphValidateCode.vue文件

<template>
	<view :key="key"><canvas :style="{ width: width + 'px', height: height + 'px' }" canvas-id="imgcanvas" @click="refresh()" @error="canvasIdErrorCallback"></canvas></view>
</template>

<script>
export default {
   
	data() {
   
		return {
   
			width: 90,
			height: 40,
			key:0
		};
	},
	props: {
   
	    //接收页面传来的参数
		verCode:{
   
			type:String,
			default:''
		}
	},
	//监听参数变化，页面点击刷新时重新绘制canvas,否则会出现字符串已重新生成，页面显示还是上一次canvas的情况。
	watch: {
   
	    verCode: {
   
	      handler(newValue, oldValue) {
   
	        this.init();
	      },
	      deep: true
	    }
	},
	
	
	mounted(){
   
		this.init();
	},
    methods: {
   
		
		init:function(){
   
			
		    // 初始化验证码
		    var context = uni.createCanvasContext('imgcanvas', this);
			var	w = this.width;
			var	h = this.height;
		
			context.setFillStyle('#f2dccf');
			context.setLineWidth(5);
			
			context.fillRect(