用Canvas生成隨機驗證碼(後端前端都可以)
阿新 • • 發佈：2017-08-20
ntb inf pre text contex back data listen nload
一 、使用前端生成驗證碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" width="120" height="40"></canvas> <a href="#" id="changeImg">看不清，換一張</a><script> /**生成一個隨機數**/ function randomNum(min, max) { return Math.floor(Math.random() * (max - min) + min); } /**生成一個隨機色**/ function randomColor(min, max) { var r = randomNum(min, max);var g = randomNum(min, max); var b = randomNum(min, max); return "rgb(" + r + "," + g + "," + b + ")"; } drawPic(); document.getElementById("changeImg").onclick = function(e) { e.preventDefault(); drawPic(); }/**繪制驗證碼圖片**/ function drawPic() { var canvas = document.getElementById("canvas"); var width = canvas.width; var height = canvas.height; var ctx = canvas.getContext(‘2d‘); ctx.textBaseline = ‘bottom‘; /**繪制背景色**/ ctx.fillStyle = randomColor(180, 240); //顏色若太深可能導致看不清 ctx.fillRect(0, 0, width, height); /**繪制文字**/ var str = ‘ABCEFGHJKLMNPQRSTWXY123456789‘; for(var i = 0; i < 4; i++) { var txt = str[randomNum(0, str.length)]; ctx.fillStyle = randomColor(50, 160); //隨機生成字體顏色 ctx.font = randomNum(15, 40) + ‘px SimHei‘; //隨機生成字體大小 var x = 10 + i * 25; var y = randomNum(25, 45); var deg = randomNum(-45, 45); //修改坐標原點和旋轉角度 ctx.translate(x, y); ctx.rotate(deg * Math.PI / 180); ctx.fillText(txt, 0, 0); //恢復坐標原點和旋轉角度 ctx.rotate(-deg * Math.PI / 180); ctx.translate(-x, -y); } /**繪制幹擾線**/ for(var i = 0; i < 8; i++) { ctx.strokeStyle = randomColor(40, 180); ctx.beginPath(); ctx.moveTo(randomNum(0, width), randomNum(0, height)); ctx.lineTo(randomNum(0, width), randomNum(0, height)); ctx.stroke(); } /**繪制幹擾點**/ for(var i = 0; i < 100; i++) { ctx.fillStyle = randomColor(0, 255); ctx.beginPath(); ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI); ctx.fill(); } } </script> </body> </html>
二、後端生成驗證碼
暫時這個
<html> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <head> <script> window.onload = function() { draw(); var saveButton = document.getElementById("saveImageBtn"); bindButtonEvent(saveButton, "click", saveImageInfo); var dlButton = document.getElementById("downloadImageBtn"); bindButtonEvent(dlButton, "click", saveAsLocalImage); }; function draw(){ var canvas = document.getElementById("thecanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgba(125, 46, 138, 0.5)"; ctx.fillRect(25,25,100,100); ctx.fillStyle = "rgba( 0, 146, 38, 0.5)"; ctx.fillRect(58, 74, 125, 100); ctx.fillStyle = "rgba( 0, 0, 0, 1)"; // black color ctx.fillText("Gloomyfish - Demo", 50, 50); } function bindButtonEvent(element, type, handler) { if(element.addEventListener) { element.addEventListener(type, handler, false); } else { element.attachEvent(‘on‘+type, handler); } } function saveImageInfo () { var mycanvas = document.getElementById("thecanvas"); var image = mycanvas.toDataURL("image/png"); var w=window.open(‘about:blank‘,‘image from canvas‘); w.document.write("<img src=‘"+image+"‘ alt=‘from canvas‘/>"); } function saveAsLocalImage () { var myCanvas = document.getElementById("thecanvas"); // here is the most important part because if you dont replace you will get a DOM 18 exception. // var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png"); var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); window.location.href=image; // it will save locally } </script> </head> <body bgcolor="#E6E6FA"> <div> <canvas width=200 height=200 id="thecanvas"></canvas> <button id="saveImageBtn">Save Image</button> <button id="downloadImageBtn">Download Image</button> </div> </body> </html>
用Canvas生成隨機驗證碼(後端前端都可以)