canvas實現驗證碼

来源:https://www.cnblogs.com/lprosper/archive/2018/08/20/9504968.html
-Advertisement-
Play Games

在通常的登錄界面我們都可以看到驗證碼,驗證碼的作用是檢測是不是人在操作,防止機器等非人操作,防止資料庫被輕而易舉的攻破。 驗證碼一般用PHP和java等後端語言編寫。 但是在前端,用canva或者SVG也可以繪製驗證碼。 繪製驗證碼不能是簡單的隨機字元串,而應該在繪製界面有一些干擾項: 如:干擾線段 ...


 

在通常的登錄界面我們都可以看到驗證碼,驗證碼的作用是檢測是不是人在操作,防止機器等非人操作,防止資料庫被輕而易舉的攻破。

 

驗證碼一般用PHP和java等後端語言編寫。

 

但是在前端,用canva或者SVG也可以繪製驗證碼。

繪製驗證碼不能是簡單的隨機字元串,而應該在繪製界面有一些干擾項:

如:干擾線段干擾圓點背景等等。

這裡的這個demo的canvas驗證碼干擾項比較簡單。

可以在圖示中看到本例中的干擾項。

 

canvas驗證碼展示效果:

點擊實現改變(重繪)驗證碼:

 

 

在控制台運行函數輸出返回值(驗證碼):

源碼

 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>canvas驗證碼</title>
  9 </head>
 10 
 11 <body>
 12     <canvas width="200" height="60" id="check" style="border:1px solid #000;">您的瀏覽器不支持canvas標簽!</canvas>
 13     <script>
 14         var ctx = document.getElementById("check").getContext("2d");
 15         var ctxW = document.getElementById("check").clientWidth;
 16         var ctxH = document.getElementById("check").clientHeight;
 17 
 18         /**
 19          * 產生一個隨機數  可設置隨機數區間
 20          * @param  {[Number]} min [隨機數區間下限]
 21          * @param  {[Number]} max [隨機數區間上限]
 22          * @return {[Number]}     [返回一個在此區間的隨機數]
 23          */
 24         function ranNum(min, max) {
 25 
 26             return Math.random() * (max - min) + min;
 27 
 28         }
 29 
 30         /**
 31          * 返回一個隨機顏色 可設置顏色區間
 32          * @param  {[Number]} min [顏色下限]
 33          * @param  {[Number]} max [顏色上限]
 34          * @return {[String]}     [隨機顏色]
 35          */
 36         function ranColor(min, max) {
 37 
 38             var r = ranNum(min, max);
 39 
 40             var g = ranNum(min, max);
 41 
 42             var b = ranNum(min, max);
 43 
 44             // return "rgb(" + r + "," + g + "," + b + ")";
 45             return `rgb(${r},${g},${b})`;
 46 
 47         }
 48 
 49         /**
 50          * 隨機字元串數組
 51          * @return {[Array]} [隨機數組]
 52          */
 53         function ranStr() {
 54 
 55             var str = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm0123456789";
 56 
 57             return str.split("").sort(function () {
 58                 return Math.random() - 0.5
 59             });
 60 
 61         }
 62 
 63         /**
 64          * 繪製文本字元串
 65          * @param  {[String]} canvasId [canvas的id]
 66          * @param  {[Number]} canvasW  [canvas的width]
 67          * @param  {[Number]} canvasH  [canvas的height]
 68          * @param  {[Number]} num      [繪製驗證碼的字數]
 69          * @param  {[Number]} fsMin    [字體大小下限]
 70          * @param  {[Number]} fsMax    [字體大小上限]
 71          * @param  {[Number]} frMin    [字體旋轉偏移下限]
 72          * @param  {[Number]} frMax    [字體旋轉偏移上限]
 73          * @param  {[Number]} min      [顏色下限]
 74          * @param  {[Number]} max      [顏色上限]
 75          * @return {[String]} [隨機字元串]
 76          */
 77         function drawText(canvasId, canvasW, canvasH, num, fsMin, fsMax, frMin, frMax, min, max) {
 78 
 79             var str = "";
 80 
 81             for (var i = 0; i < num; i++) {
 82 
 83                 var char = ranStr()[Math.floor(0, ranStr().length)];
 84 
 85                 var fs = ranNum(fsMin, fsMax);
 86 
 87                 canvasId.font = fs + "px Verdana";
 88 
 89                 canvasId.fillStyle = ranColor(min, max);
 90 
 91                 // 保存繪製的狀態
 92                 canvasId.save();
 93 
 94                 // context.translate(x,y);
 95                 // x    添加到水平坐標(x)上的值
 96                 // y    添加到垂直坐標(y)上的值
 97                 // 偏移
 98                 canvasId.translate(canvasW / num * i + canvasW / 20, 0);
 99 
100                 // 變換角度
101                 canvasId.rotate(ranNum(frMin, frMax) * Math.PI / 180);
102 
103                 // context.fillText(text,x,y,maxWidth);
104                 // text    規定在畫布上輸出的文本。
105                 // x    開始繪製文本的 x 坐標位置(相對於畫布)。
106                 // y    開始繪製文本的 y 坐標位置(相對於畫布)。
107                 // maxWidth    可選。允許的最大文本寬度,以像素計。
108                 canvasId.fillText(char, 0, (canvasH + fs) / 2.5, canvasW / num);
109 
110                 // 返回之前保存過的路徑狀態和屬性
111                 ctx.restore();
112 
113                 str += char;
114 
115             }
116 
117             // console.log(str);
118             return str;
119 
120         }
121 
122         /**
123          * 繪製背景
124          * @param  {[String]} canvasId [canvas的id]
125          * @param  {[Number]} canvasW  [canvas的width]
126          * @param  {[Number]} canvasH  [canvas的height]
127          * @param  {[Number]} min      [下限]
128          * @param  {[Number]} max      [上限]
129          */
130         function drawBg(canvasId, canvasW, canvasH, min, max) {
131 
132             // 繪製canvas背景
133             canvasId.fillStyle = ranColor(min, max);
134 
135             // 填充顏色
136             canvasId.fillRect(0, 0, canvasW, canvasH);
137 
138         }
139 
140         /**
141          * 繪製干擾 圓點
142          * @param  {[String]} canvasId [canvas的id]
143          * @param  {[Number]} canvasW  [canvas的width]
144          * @param  {[Number]} canvasH  [canvas的height]
145          * @param  {[Number]} num      [繪製的數量]
146          * @param  {[Number]} r        [圓點半徑]
147          * @param  {[Number]} min      [下限]
148          * @param  {[Number]} max      [上線]
149          */
150         function drawCircle(canvasId, canvasW, canvasH, num, r, min, max) {
151 
152             for (var i = 0; i < num; i++) {
153 
154                 // 開始繪製 (拿起筆)
155                 canvasId.beginPath();
156 
157                 // context.arc(x,y,r,sAngle,eAngle,counterclockwise); (繪製)
158                 // x    圓的中心的 x 坐標。
159                 // y    圓的中心的 y 坐標。
160                 // r    圓的半徑。
161                 // sAngle    起始角,以弧度計。(弧的圓形的三點鐘位置是 0 度)。
162                 // eAngle    結束角,以弧度計。
163                 // counterclockwise    可選。規定應該逆時針還是順時針繪圖。False = 順時針,true = 逆時針。
164                 canvasId.arc(ranNum(0, canvasW), ranNum(0, canvasH), r, 0, 2 * Math.PI);
165 
166                 // 填充顏色
167                 canvasId.fillStyle = ranColor(min, max);
168 
169                 // 填充
170                 canvasId.fill();
171 
172                 // 閉合繪製 (放開筆)
173                 canvasId.closePath();
174 
175             }
176 
177         }
178 
179         /**
180          * 繪製干擾 線段
181          * @param  {[String]} canvasId [canvas的id]
182          * @param  {[Number]} canvasW  [canvas的width]
183          * @param  {[Number]} canvasH  [canvas的height]
184          * @param  {[Number]} num      [繪製的數量]
185          * @param  {[Number]} min      [下限]
186          * @param  {[Number]} max      [上線]
187          */
188         function drawLine(canvasId, canvasW, canvasH, num, min, max) {
189 
190             for (var i = 0; i < num; i++) {
191 
192                 // 開始繪製 (拿起筆)
193                 canvasId.beginPath();
194 
195                 // 繪製開始點
196                 canvasId.moveTo(ranNum(0, canvasW), ranNum(0, canvasH));
197 
198                 // 繪製結束點
199                 canvasId.lineTo(ranNum(0, canvasW), ranNum(0, canvasH));
200 
201                 canvasId.strokeStyle = ranColor(min, max);
202 
203                 canvasId.stroke();
204 
205                 canvasId.closePath();
206 
207             }
208 
209         }
210 
211         // 繪製驗證碼
212         function drawCanvas() {
213 
214             // 清空canvas
215             ctx.clearRect(0, 0, 200, 60);
216 
217             // 繪製背景
218             drawBg(ctx, ctxW, ctxH, 200, 255);
219 
220             // 繪製干擾圓點
221             drawCircle(ctx, ctxW, ctxH, 20, 5, 200, 255);
222 
223             // 繪製干擾線段
224             drawLine(ctx, ctxW, ctxH, 20, 0, 255);
225 
226             // 繪製驗證碼
227             var str = drawText(ctx, ctxW, ctxH, 4, 10, 50, -30, 30, 0, 100);
228 
229             return str;
230 
231         }
232 
233         drawCanvas();
234 
235         document.getElementById('check').onclick = drawCanvas;
236     </script>
237 </body>
238 
239 </html>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • jQuery中常用的事件: blur:失去焦點 focus:獲取焦點 click:點擊事件 keydown:鍵盤按下的事件 keyup:鍵盤按下鬆開後的事件 mousemove:滑鼠移動事件 hover:滑鼠懸浮事件 mousedown:滑鼠按下發生的事件 mouseup:滑鼠按下鬆開發生的事件 . ...
  • 1、實現動態圖片的切換隻需要改變目標圖片的路徑 ...
  • FormData格式提交的post參數可以直接從req.body里取,而axios用request payload,req.body都是空對象。 百度一圈,全是你抄我我抄你,要麼讓你繞路用contentType+JSON.stringfy,要麼就res.on流讀取請求數據,一點都不優雅好麽。其實沒那 ...
  • 得益於 JavaScript 加入的 decorator 特性,可以使我們跟 Java/C 一樣,更加直觀自然的,做面向切麵編程。而隨著 TypeScript 的成熟,類型系統也讓我們增強了信心,面對複雜的業務邏輯,也更有底氣。 "egg controller" 是集合了一些在 Controller ...
  • 序言 這裡要講的就是一個Redux在React中的應用問題,講一講Redux,react redux,redux thunk,redux actions,redux promise,redux sage這些包的作用和他們解決的問題。 因為不想把篇幅拉得太長,所以沒有太多源碼分析和語法講解,能怎麼簡單 ...
  • 前幾天安卓真機測試的時候,突然發現一個嚴重的問題。 後退兩次退出應用,再開啟白屏。而殺掉進程後再開啟就是好的。 這個重大bug我跟了好久,以為是splash-screen的問題。 後來一點一點打console,才找出問題————redux在後退兩次退出時,未重置,而保留了退出前的狀態值。 我不知道為 ...
  • 萬惡的IE,option竟然不支持display樣式,想到的解決思路有二個: 1、ajax聯動查詢 2、jQuery的remove()、after()方法 方法1的不好之處是初始頁面,需要顯示全部IP,本來已經從後臺查詢了一次,如果再利用ajax,會給伺服器造成壓力,所以採用方法2。 後臺code ...
  • 堆排序 堆排序是利用堆這種數據結構而設計的一種排序演算法,堆排序是一種選擇排序,它的最壞,最好,平均時間複雜度均為O(nlogn),它也是不穩定排序。首先簡單瞭解下堆結構。 堆是具有以下性質的完全二叉樹:每個結點的值都大於或等於其左右孩子結點的值,稱為大頂堆;或者每個結點的值都小於或等於其左右孩子結點 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...