用Canvas生成随机验证码(后端前端都可以)
一 、使用前端生成验证码
<!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生成随机验证码(后端前端都可以)的更多相关文章
- 微信小程序 canvas 生成随机验证码
转载:https://blog.csdn.net/qq_16646819/article/details/81020245?utm_source=blogxgwz0 js // pages/bind/ ...
- canvas实现随机验证码
canvas实现随机验证码 知识点 canvas生成背景图和文字 设置字体样式和大小 String的fromCharCode(code码)生成大小写字母和数字 str.toLowerCase()转小写 ...
- Python使用PIL模块生成随机验证码
PIL模块的安装 pip3 install pillow 生成随机验证码图片 import random from PIL import Image, ImageDraw, ImageFont fro ...
- C#生成随机验证码例子
C#生成随机验证码例子: 前端: <tr> <td width=" align="center" valign="top"> ...
- pillow实例 | 生成随机验证码
1 PIL(Python Image Library) PIL是Python进行基本图片处理的package,囊括了诸如图片的剪裁.缩放.写入文字等功能.现在,我便以生成随机验证码为例,讲述PIL的基 ...
- struts2生成随机验证码图片
之前想做一个随机验证码的功能,自己也搜索了一下别人写的代码,然后自己重新用struts2实现了一下,现在将我自己实现代码贴出来!大家有什么意见都可以指出来! 首先是生成随机验证码图片的action: ...
- Java生成随机验证码
package com.tg.snail.core.util; import java.awt.Color; import java.awt.Font; import java.awt.Graphic ...
- Python 生成随机验证码
Python生成随机验证码 Python生成随机验证码,需要使用PIL模块. 安装: 1 pip3 install pillow 基本使用 1. 创建图片 1 2 3 4 5 6 7 8 9 fro ...
- Python生成随机验证码
Python生成随机验证码,需要使用PIL模块. 安装: pip3 install pillow 基本使用 1.创建图片 from PIL import Image img = Image.new(m ...
随机推荐
- LeetCode第七天
==数组 Medium== 40.(162)Find Peak Element JAVA //斜率思想,二分法 class Solution { public int findPeakElement( ...
- Android安全机制
1)Android是基于Linux内核的,因此Linux对文件权限的控制同样适用于Android.在Android中每个应用都有自己的/data/data/包名文件夹,该文件夹只能该应用访问,而其他应 ...
- hiboCoder 1041 国庆出游 dfs+思维
先抽象出一棵以1做为根结点的树.给定了访问序列a[1..m]. 考虑两种特殊情况: 1.访问了某个a[j],但是存在a[i]没有访问且i < j,出现这种情况说明a[j]一定是a[i]的祖先节点 ...
- STL中坑爹的max函数
hdu1754永远难忘的痛,参数最好不要传耗时特别长的函数,因为会调用两次,如果是递归的话,不知道多少次呢.. 切记!切记!切记! 例如: //return max(getAns(root<&l ...
- Vue.directive 自定义指令的问题
1.今天复习一下Vue自定义指令的代码,结果出现一个很无语的结果,先贴代码. 2. <div id="example" v-change-by="myColor&q ...
- Android View绘制回调方法流程
Android中View的性命周期,挪用 invalidate() 战 requestLayout() 会触收哪些方式,一张图就可以讲解的很详细. 该图确切一看便特别很是清楚.让人简略的懂得View的 ...
- 【memcache】windos下 memcache更改默认的端口和最大使用内存
1>用内网ip的方式提供web应用服务器调用,不允许直接通过外网调用,如将memcache服务器放在192.168.1.55的服务器上 2>修改端口,如改为11200 3>分配内存, ...
- HighCharts中的Ajax请求的2D折线图
HighCharts中的Ajax请求的2D折线图 设计源码: <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- ubuntu14.04 64位 安装eclipse
ubuntu14.04 64位 安装eclipse 1 在官网上下载eclipse http://www.eclipse.org/downloads/下载eclipse-jee-luna-SR1-li ...
- CSS开启硬件加速提高网站性能
国外一篇文章,有点意思,转载过来,准备尝试下~ 中文地址:http://www.cnblogs.com/yzw7489757/ 原文地址:http://blog.teamtreehouse.com/i ...