前端生成图形验证码

  • A+
所属分类:CSS|Html
广告也精彩

首先上运行效果图:
前端生成图形验证码
下面是代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
  6. <title>生成图片验证码</title>
  7. <script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
  8. <style>
  9. #verify {
  10. height: 34px;
  11. vertical-align: top;
  12. font-size: 16px;
  13. }
  14. #code_img {
  15. width: 100px;
  16. height: 40px;
  17. cursor: pointer;
  18. vertical-align: top;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. 点击图片重新生成验证码
  24. <p>
  25. <input type="text" class="topAlign" id="verify" name="verify" required>
  26. <canvas width="100" height="40" id="verifyCanvas"></canvas>
  27. <img id="code_img">
  28. </p>
  29. <button id="submit" type="submit">提交</button>
  30. </body>
  31. <script>
  32. var nums = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K',
  33. 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
  34. 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',
  35. 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x',
  36. 'y', 'z'
  37. ];
  38. var colors = []
  39. drawCode();
  40. // 绘制验证码
  41. function drawCode() {
  42. var canvas = document.getElementById("verifyCanvas"); //获取HTML端画布
  43. var context = canvas.getContext("2d"); //获取画布2D上下文
  44. context.fillStyle = "cornflowerblue"; //画布填充色
  45. context.fillRect(0, 0, canvas.width, canvas.height);
  46. // 创建渐变
  47. var gradient = context.createLinearGradient(0, 0, canvas.width, 0);
  48. gradient.addColorStop("0", "magenta");
  49. gradient.addColorStop("0.5", "blue");
  50. gradient.addColorStop("1.0", "red");
  51. //清空画布
  52. context.fillStyle = gradient; //设置字体颜色
  53. context.font = "25px Arial"; //设置字体
  54. var rand = new Array();
  55. var x = new Array();
  56. var y = new Array();
  57. for (var i = 0; i < 4; i++) {
  58. rand[i] = nums[Math.floor(Math.random() * nums.length)]
  59. x[i] = i * 16 + 10;
  60. y[i] = Math.random() * 20 + 20;
  61. context.fillText(rand[i], x[i], y[i]);
  62. }
  63. // console.log(rand);
  64. //画3条随机线
  65. for (var i = 0; i < 3; i++) {
  66. drawline(canvas, context);
  67. }
  68. // 画30个随机点
  69. for (var i = 0; i < 30; i++) {
  70. drawDot(canvas, context);
  71. }
  72. convertCanvasToImage(canvas)
  73. // 点击提交进行验证
  74. $("#submit").click((e) => {
  75. var newRand=rand.join('').toUpperCase();
  76. //下面就是判断是否== 的代码,无需解释
  77. var oValue = $('#verify').val().toUpperCase();
  78. console.log(oValue)
  79. if (oValue == 0) {
  80. console.log('请输入验证码');
  81. } else if (oValue != newRand) {
  82. console.log('验证码不正确,请重新输入');
  83. oValue = '';
  84. } else {
  85. window.open('http://www.baidu.com', '_self');
  86. }
  87. })
  88. }
  89. // 随机线
  90. function drawline(canvas, context) {
  91. context.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); //随机线的起点x坐标是画布x坐标0位置,y坐标是画布高度的随机数
  92. context.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); //随机线的终点x坐标是画布宽度,y坐标是画布高度的随机数
  93. context.lineWidth = 0.5; //随机线宽
  94. context.strokeStyle = 'rgba(50,50,50,0.3)'; //随机线描边属性
  95. context.stroke(); //描边,即起点描到终点
  96. }
  97. // 随机点(所谓画点其实就是画1px像素的线,方法不再赘述)
  98. function drawDot(canvas, context) {
  99. var px = Math.floor(Math.random() * canvas.width);
  100. var py = Math.floor(Math.random() * canvas.height);
  101. context.moveTo(px, py);
  102. context.lineTo(px + 1, py + 1);
  103. context.lineWidth = 0.2;
  104. context.stroke();
  105. }
  106. // 绘制图片
  107. function convertCanvasToImage(canvas) {
  108. document.getElementById("verifyCanvas").style.display = "none";
  109. var image = document.getElementById("code_img");
  110. image.src = canvas.toDataURL("image/png");
  111. return image;
  112. }
  113. // 点击图片刷新
  114. document.getElementById('code_img').onclick = function () {
  115. $('#verifyCanvas').remove();
  116. $('#verify').after('<canvas width="100" height="40" id="verifyCanvas"></canvas>')
  117. drawCode();
  118. }
  119. </script>
  120. </html>
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
广告也精彩

发表评论

您必须登录才能发表评论!