小组件2.图片验证码

最新推荐文章于 2022-07-20 11:50:27 发布
最新推荐文章于 2022-07-20 11:50:27 发布
阅读量214 收藏
点赞数 1
分类专栏： js vue入门学习 组件 文章标签： js vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42677616/article/details/105747054
版权
vue入门学习 同时被 3 个专栏收录
5 篇文章 0 订阅
订阅专栏
js
2 篇文章 0 订阅
订阅专栏
组件
2 篇文章 0 订阅
订阅专栏

效果图如下：
在这里插入图片描述

第一种：html+js canvas图片验证码

代码如下：

<!DOCTYPE html>
<html>
<!-- head -->

<head>
    <title>图片登录验证</title>
</head>

<body>
    <input type="text" value="" placeholder="请输入验证码（区分大小写）" style="height:43px;position: relative; top:-15px; font-size:20px;" id="text">
    <canvas id="canvas" width="100" height="43" onclick="dj()" style="border: 1px solid #ccc;
        border-radius: 5px;"></canvas>
    <button class="btn" onclick="sublim()">提交</button>
</body>
<script>
    var show_num = [];
    draw(show_num);

    function dj() {
        draw(show_num);
    }

    function sublim() {
        var val = document.getElementById("text").value;
        var num = show_num.join("");
        if (val == '') {
            alert('请输入验证码！');
        } else if (val == num) {
            alert('提交成功！');
            document.getElementById(".input-val").val('');
            draw(show_num);

        } else {
            alert('验证码错误！\n你输入的是:  ' + val + "\n正确的是:  " + num + '\n请重新输入！');
            document.getElementById("text").value = '';
            draw(show_num);
        }



    }

    function draw(show_num) {
        var canvas_width = document.getElementById('canvas').clientWidth;
        var canvas_height = document.getElementById('canvas').clientHeight;
        var canvas = document.getElementById("canvas"); //获取到canvas的对象，演员
        var context = canvas.getContext("2d"); //获取到canvas画图的环境，演员表演的舞台
        canvas.width = canvas_width;
        canvas.height = canvas_height;
        var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";
        var aCode = sCode.split(",");
        var aLength = aCode.length; //获取到数组的长度

        for (var i = 0; i <= 3; i++) {
            var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
            var deg = Math.random() * 30 * Math.PI / 180; //产生0~30之间的随机弧度
            var txt = aCode[j]; //得到随机的一个内容
            show_num[i] = txt;
            var x = 10 + i * 20; //文字在canvas上的x坐标
            var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
            context.font = "bold 23px 微软雅黑";

            context.translate(x, y);
            context.rotate(deg);

            context.fillStyle = randomColor();
            context.fillText(txt, 0, 0);

            context.rotate(-deg);
            context.translate(-x, -y);
        }
        for (var i = 0; i <= 5; i++) { //验证码上显示线条
            context.strokeStyle = randomColor();
            context.beginPath();
            context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.stroke();
        }
        for (var i = 0; i <= 30; i++) { //验证码上显示小点
            context.strokeStyle = randomColor();
            context.beginPath();
            var x = Math.random() * canvas_width;
            var y = Math.random() * canvas_height;
            context.moveTo(x, y);
            context.lineTo(x + 1, y + 1);
            context.stroke();
        }
    }

    function randomColor() { //得到随机的颜色值
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
    }
</script>
</html>

第二种：vue中实现 canvas图片验证码

代码如下：

<template>
  <div class="check-text">
    <div class="check-v">
      <el-input class="check-input" placeholder="请输入验证码" v-model="checkValue"></el-input>
      <canvas id="canvas" @click="dj"></canvas>
    </div>
    <div class="check-b">
      <el-button type="primary" class="btn" @click="sublim">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "check-text",
  data() {
    return {
      checkValue: "",
      show_num: []
    };
  },
  mounted() {
    this.draw(this.show_num);
  },
  methods: {
    //得到随机的颜色值
    randomColor() {
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      return "rgb(" + r + "," + g + "," + b + ")";
    },
    // 加载验证码canvas
    draw(show_num) {
      var canvas_width = document.getElementById("canvas").clientWidth;
      var canvas_height = document.getElementById("canvas").clientHeight;
      var canvas = document.getElementById("canvas"); //获取到canvas的对象，演员
      var context = canvas.getContext("2d"); //获取到canvas画图的环境，演员表演的舞台
      canvas.width = canvas_width;
      canvas.height = canvas_height;
      var sCode =
        "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";
      var aCode = sCode.split(",");
      var aLength = aCode.length; //获取到数组的长度

      for (var i = 0; i <= 3; i++) {
        var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
        var deg = (Math.random() * 30 * Math.PI) / 180; //产生0~30之间的随机弧度
        var txt = aCode[j]; //得到随机的一个内容
        show_num[i] = txt;
        var x = 10 + i * 20; //文字在canvas上的x坐标
        var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
        context.font = "bold 23px 微软雅黑";

        context.translate(x, y);
        context.rotate(deg);

        context.fillStyle = this.randomColor();
        context.fillText(txt, 0, 0);

        context.rotate(-deg);
        context.translate(-x, -y);
      }
      for (var i = 0; i <= 5; i++) {
        //验证码上显示线条
        context.strokeStyle = this.randomColor();
        context.beginPath();
        context.moveTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.lineTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.stroke();
      }
      for (var i = 0; i <= 30; i++) {
        //验证码上显示小点
        context.strokeStyle = this.randomColor();
        context.beginPath();
        var x = Math.random() * canvas_width;
        var y = Math.random() * canvas_height;
        context.moveTo(x, y);
        context.lineTo(x + 1, y + 1);
        context.stroke();
      }
    },
    // 点击验证
    sublim() {
      let $this = this;
      let num = $this.show_num.join("");
      if ($this.checkValue == "") {
        $this.$message({
          message: "请输入验证码！",
          type:'error'
        });
      } else if ($this.checkValue == num) {
        $this.$message({
          message: "提交成功！",
          type:'success'
        });
        $this.$this.checkValue = ''
        $this.draw($this.show_num);
      } else {
        $this.$message({
          message: '验证码错误，请输入正确的验证码！',
          type:'error'
        });
        $this.checkValue = ''
        $this.draw($this.show_num);
      }
    },
    // 点击验证码刷新
    dj() {
      this.draw(this.show_num);
    }
  },
  watch: {}
};
</script>
<style lang='scss' scoped>
.check-text {
  width: 300px;
  height: 100px;
  border: 1px solid #333;
  .check-v {
    width: 300px;
    height: 40px;
    .check-input {
      width: 180px;
      height: 40px;
      float: left;
    }
    #canvas {
      width: 100px;
      height: 40px;
      float: right;
      border:1px solid #333;
    }
  }
  .check-b {
    width: 300px;
    height: 60px;
    padding-top: 20px;
    .btn {
      width: 300px;
    }
  }
}
</style>
梦里的紫苏
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uipath - 自动登录 - 含验证码
bobo5582191的专栏
05-08 9190
现在之前 ----最近在完成一项类似爬虫的工作: 通过UIpath从指定网站中获取结构化数据, 特性一: 多地区多账号—由于全国不同的地区, 用户名和密码不一样, 需要通过多个用户名和密码登录爬取数据. 特性二: 数据每日更新—定期的从网站中爬取最新的数据 难点: 网站限制登录需要输入验证码(12306的变态验证码不包含在内) 为了方便自动获取数据–实现自动登录 -----------------...
UiPath调用百度ocr接口识别验证码(算术验证码)登录
最新发布
weixin_44184479的博客
06-12 972
uipath有自带的“获取OCR文本”文本识别活动，但是存在识别精度较差的情况，无法识别较为复杂的图片验证码，无法满足项目使用，使用百度ocr文字识别（高精度版），识别准确率高,能够适应各种复杂的验证码样式。
Vue 验证码组件
Lovely Ruby 的手账
04-06 1602
从项目上摘过来的 <template> <div> <canvas style="border: 1px solid #ccc" :id="id" :style="'width:' + width + ';height:' + height" ></canvas> </div> </template> <script> export default { nam
UiPath调用超级鹰识别验证码
qq_40229594的博客
06-28 5306
UiPath调用超级鹰识别验证码 没有超级鹰账号的下面是注册连接 https://www.chaojiying.com/user/reg/ 注册完进入用户中心，生成自己的软件id 超级鹰开发文档 接下来上代码 创建变量存放图片路径 将图片转为流 得到base64编码 发送http post请求，这个活动在UiPath.Web.Activities包下 设置请求路径，参数 每个参数的意思自己看超级鹰的开发文档，不多说了 通过正则提取需要的信息 最终得到验证码 完整流程 ...
uipath 验证码_UiPath如何调用百度OCR
weixin_29014237的博客
01-30 2128
百度OCR的介绍百度OCR提供了多种场景下精准图像文字识别技术服务, 精准识别超99%, 并且可以免费试用. 详情大家可以去百度智能云官网了解, 地址是https://cloud.baidu.com/product/ocr_others/?_=1575858782543二、百度OCR在UiPath中的使用在使用百度OCR之前, 我们需要先在百度注册一个账号, 然后在此地址登录https://log...
滑动验证码破解思路
redis数据库安装及启用
01-29 3850
解决思路 目前这种验证码的通用解决思路如下： 获取验证码图片，包含原图以及有缺口的图 算出缺口的位置，以及滑块要滑动的距离 通过算法模拟人工移动轨迹 通过selenium模拟操作 二、逻辑实现 1.获取验证码图片 注意：我们需要获取两张图片，第一张是完整背景图，第二张是有缺口的背景图（图片基本上是通过请求下载下来的）。 （1）经过分析发现当鼠标位于按钮是上时显示完整背景图。 （2）当鼠标点击滑动按钮不松，显示有缺口的背景图 （3）使用selenium有个方法可以对元素进行截图，先找到图片所在的html元
UIPath中Vba调用Shell
行走的IT
04-15 3109
UIPath 添加 Excel Application Scope 寻找一个excel作为vba的运行环境 添加Invoke VBA 填写执行的vba脚本以及方法名 编写VBA脚本 first.vba Public Sub test() Dim retval MsgBox ("加载excel环境执行vba。。。") retval = Shell("C:\workspace...
react的滑动图片验证码组件的示例代码
12-03
业务需求，需要在系统登陆的时候，使用“滑动图片验证码”，来验证操作的不是机器人。 效果图 使用方式 在一般的页面组件引用即可。onReload这个函数一般是用来请求后台图片的。 class App extends Component { ...
html图片验证码组件
01-30
HTML图片验证码组件是一种用于网络安全的身份验证机制，它通过在网页上显示一幅随机生成的图片，其中包含一组可读的字符，然后要求用户输入所见字符来确认他们不是自动化程序。这种技术广泛应用于防止机器人和自动...
asp无组件生成验证码 GIF图片格式
10-28
标题中的“asp无组件生成验证码 GIF图片格式”表明本文将探讨如何使用ASP技术，不需要任何组件的情况下生成一个GIF格式的验证码图片。这种验证码通常用于网站的安全验证，可以有效防止恶意注册、自动登录或自动化的...
VUE实现图片验证码功能
10-16
接下来，我们将通过Vue的组件化思想来实现图片验证码功能。在Vue项目中，可以通过创建一个组件来封装图片验证码的所有功能。在这个组件中，我们使用`<template>`、`<script>`和`<style>`三个部分来分别编写HTML模板...
Uipath的页面SaveAS
Alvin_CC的博客
12-31 1136
Uipath 的UI Explorere绝对是个好东西，开发时解决了我好多抓取不到模块的问题。 Uipath有几个使用要点分享一下： 1.想得到页面的标签的值，用get text ,indicate screen不准确的话，用UI Explorere取值属性 2.页面控件record出来的模块不能连贯使用的话，放在attach browser里面试试，Activities.BrowserSc...
UiPath从入门到精通视频教程（全）免积分！！！
SummerYc11的博客
09-26 3374
链接：https://pan.baidu.com/s/1qLb8PsKTBqn7HADxobJ5uQ 提取码：u43j UiPath技术交流群：465630324
Uipath实现简单的滑块拖动验证
Chansyia的博客
01-15 5110
本篇文章主要介绍使用【Click】Activities这一个活动来实现拖动滑块的验证，为拖动滑块验证提供了一种思路。但只能应用于滑块从头滑到尾，不支持拼图的滑块验证。 说白了，这篇文章更像是介绍【Click】这个Activities中，"click_down"和"click_up"属性的使用。"click_down"指得相当于按住鼠标的左/右键，"click_up"相当于把按住的鼠标左/右松开。最终通过控制鼠标的初末位置来实现拖动。下面就以一个例子来展示一下： 1.首先使用"Click"在网页中标选出滑
淘宝api数据接口
weixin_49929204的博客
03-01 803
免费试用 { “item”: { “num_iid”: “520813250866”, “title”: “三刃木折叠刀创意迷你钥匙扣钥匙刀军刀随身多功能锋利开箱小刀”, “desc_short”: “”, “price”: “24.9”, “orginal_price”: “25.80”, “nick”: “欢乐购客栈”, “num”: “200”, “pic_url”: “//img.alicdn.com/imgextra/i4/2596264565/O1CN01mbmuAB1jaogMUWhv8_!
【5分钟教你】3种实现验证码功能-数字短信验证码-图形验证码-滑动验证码
04-30 5652
【5分钟教你】3种实现验证码功能-数字短信验证码-图形验证码-滑动验证码 摘要：我们在做一些后台系统的登录验证的时候。难免会用到验证码功能，来辅助进行验证，提高安全性，在我们日常生活中，验证方式无处不在，最多的是短信验证码的方式，通过点击发送验证码，然后手机接收短信，填写验证码才能登陆成功，但是也有一些其他验证码功能也在使用，所以，我就想着来集中记录一下，希望对大家有所帮助… 一.数字短信验证码 思路： a. 两个文本框+一个获取验证码按钮，文本框用来输入手机号和获取到的验证码，按钮负责点击和记
Uniapp实现旋转滑块验证码(兼容App+H5+PC)
weixin_56749645的博客
07-20 4159
Uniapp实现旋转滑块验证码(兼容Android+IOS+H5+PC)
Python高效实现滑块验证码自动操纵
CDA数据分析师
02-17 5135
CDA数据分析师 出品作者：CDALevel Ⅰ 持证人岗位：数据分析师 行业：大数据 众所周知，规范性的网络爬虫可以帮助Decision-maker在低成本下获得想要的信息，不仅如此，做科研、写论文、包括现在的大学生都可以利用该技术获得相应的数据。在数据为王的时代，网络爬虫是每个coder都需要必备的技能。然而，随着爬虫事业的发展，网站也开始部署了一些反爬虫措施，最典型的莫过于12306等网站。其中，验证码是常用的表单登录反爬虫措施。coder在编写程序爬虫的时候或多或少都会遇到验证码的人机判别。当然，验
vue2图片验证码登录
07-28
总结起来，Vue2图片验证码登录的实现步骤包括引入图片验证码组件、在前端页面中使用该组件、将用户输入的验证码和其他登录信息提交给后端、后端验证验证码的正确性、进行登录验证、返回登录结果给前端。希望这些步骤...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值