图片验证码——base64编码的使用
一、介绍:
1.base64编码简介:
Base64就是一种编码格式。Base64要求把每三个8Bit的字节转换为四个6Bit的字节(3*8 = 4*6 = 24),然后把6Bit再添两位高位0,组成四个8Bit的字节,也就是说,转换后的字符串理论上将要比原来的长1/3。
2.使用base64编码的优点:
①减少了网络请求:采用http形式的url的话都会额外发送一次请求,网页发送的http请求次数越多,会造成页面加载速度越慢。
②不会造成跨域请求的问题:因为采用Base64编码的图片是随着页面一起加载的。
③不会造成清理图片缓存问题。
3.使用base64编码的缺点:
①数据传输量变大,代码的可读性不高。
②对于IE 8以下的浏览器不可使用,IE 8以上的浏览器可以使用,但对大小做出了限制。
所以此方法适合于图片像素小的。
二、使用例子:
1.html
<!--图片验证码-->
<div>
<div>
<input type="text" id="codeImg" placeholder="请输入验证码" maxlength="4">
</div>
<div>
<a href="javascript:void(0);" title="点击更换验证码">
<img id="imgVerify" src="" alt="更换验证码" onclick="getVerify(this);">
</a>
</div>
</div> <script type="text/javascript">
var imgVerify = $("#imgVerify").get(0);
$(function () {
getVerify(imgVerify);
});
// 图片验证码
function getVerify(obj) {
$.ajax({
type: "GET",
url: httpRequestUrl + "/getVerifyPic",
success: function (result) {
obj.src = "data:image/jpeg;base64," + result;
}
});
}
</script>
2.接口
//controller层
@Autowired
private YZMService yzmService; @RequestMapping(value = "/getVerifyPic", method = RequestMethod.GET)
public String getVerifyPic(HttpServletRequest request) {
final String RANDOMCODEKEY= "RANDOMVALIDATECODEKEY";//放到session中的key
Map<String,String> map = new HashMap<String,String>();
map = yzmService.getVerifyPic();
yzmService.getVerifyPic();
request.getSession().setAttribute(RANDOMCODEKEY, map.get("num"));
return map.get("pic");
} //service层
public Map<String,String> getVerifyPic() {
RandomValidateCodeUtil randomValidateCode = new RandomValidateCodeUtil();
return randomValidateCode.getRandcode();//输出验证码图片方法
}
3.验证码工具类
public class RandomValidateCodeUtil { public static final String RANDOMCODEKEY= "RANDOMVALIDATECODEKEY";//放到session中的key
// private String randString = "0123456789";//随机产生只有数字的字符串 private String
// private String randString = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";//随机产生只有字母的字符串
private String randString = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";//随机产生数字与字母组合的字符串
private int width = 95;// 图片宽
private int height = 25;// 图片高
private int lineSize = 40;// 干扰线数量
private int stringNum = 4;// 随机产生字符数量 private static final Logger logger = LoggerFactory.getLogger(RandomValidateCodeUtil.class); private Random random = new Random(); /**
* 获得字体
*/
private Font getFont() {
return new Font("Fixedsys", Font.CENTER_BASELINE, 18);
} /**
* 获得颜色
*/
private Color getRandColor(int fc, int bc) {
if (fc > 255)
fc = 255;
if (bc > 255)
bc = 255;
int r = fc + random.nextInt(bc - fc - 16);
int g = fc + random.nextInt(bc - fc - 14);
int b = fc + random.nextInt(bc - fc - 18);
return new Color(r, g, b);
} /**
* 生成随机图片
*/
public Map<String,String> getRandcode() {
// HttpSession session = request.getSession();
// BufferedImage类是具有缓冲区的Image类,Image类是用于描述图像信息的类
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);
Graphics g = image.getGraphics();// 产生Image对象的Graphics对象,改对象可以在图像上进行各种绘制操作
g.fillRect(0, 0, width, height);//图片大小
g.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));//字体大小
g.setColor(getRandColor(110, 133));//字体颜色
// 绘制干扰线
for (int i = 0; i <= lineSize; i++) {
drowLine(g);
}
// 绘制随机字符
String randomString = "";
for (int i = 1; i <= stringNum; i++) {
randomString = drowString(g, randomString, i);
}
logger.info(randomString);
//将生成的随机字符串保存到session中
// session.removeAttribute(RANDOMCODEKEY);
// session.setAttribute(RANDOMCODEKEY, randomString);
g.dispose();
String base64 = null;
try {
// 将内存中的图片通过流动形式输出到客户端
ByteArrayOutputStream baos = new ByteArrayOutputStream();
ImageIO.write(image, "JPEG", baos);//图片格式 byte[] bytes = baos.toByteArray(); base64 = new BASE64Encoder().encodeBuffer(bytes).trim();
} catch (Exception e) {
logger.error("将内存中的图片通过流动形式输出到客户端失败>>>> ", e);
} Map<String,String> map = new HashMap<String,String>();
map.put("num", randomString);
map.put("pic", base64);
return map;
} /**
* 绘制字符串
*/
private String drowString(Graphics g, String randomString, int i) {
g.setFont(getFont());
g.setColor(new Color(random.nextInt(101), random.nextInt(111), random
.nextInt(121)));
String rand = String.valueOf(getRandomString(random.nextInt(randString
.length())));
randomString += rand;
g.translate(random.nextInt(3), random.nextInt(3));
g.drawString(rand, 13 * i, 16);
return randomString;
} /**
* 绘制干扰线
*/
private void drowLine(Graphics g) {
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(13);
int yl = random.nextInt(15);
g.drawLine(x, y, x + xl, y + yl);
} /**
* 获取随机的字符
*/
public String getRandomString(int num) {
return String.valueOf(randString.charAt(num));
}
}
图片验证码——base64编码的使用的更多相关文章
- 图片的 base64 编码
图片的 base64 编码就是将一幅图片编码成一串字符串,使用该字符串代替图像地址.我们所看到的网页上的图片,都是需要消耗一个 http 请求下载而来的:(所有才有了 csssprites 技术< ...
- Base64编码 图片与base64编码互转
package com.education.util; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import jav ...
- JS 获取图片的base64编码
获取图片的base64编码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- PHP将图片转base64编码以及base64图片转换为图片并保存代码
图片转base64编码 /*图片转换为 base64格式编码*/ $img = 'uploads/01.png'; $base64_img = base64EncodeImage($img); ech ...
- 图片的Base64编码
Base64编码是一种图片处理格式,通过特定的算法将图片编码成一长串字符串,在页面上显示的时候,可以用该字符串来代替图片的url属性. 我们可以来看一下实际的效果 Base64编码效果 在上图中,我们 ...
- H5 Js图片转base64编码
<!Doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 字符串与图片的Base64编码转换操作
//图片 转为 base64编码的文本 private void button1_Click(object sender, EventArgs e) { OpenFileDialog dlg = ne ...
- 图片和base64编码字符串 互相转换,图片和byte数组互相转换
图片和base64编码字符串 互相转换 import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import java.io.*; ...
- 图片的base64编码通过javascript生成图片--当前URL地址的二维码应用
前面的话 在电脑端发现一篇好的博文,想在手机上访问.这时,就必须打开手机浏览器输入长长的URL地址才行,非常不方便.如果在博客标题的后面跟一张小的图片,点击该图片后,出现一张二维码的大图,然后再通过手 ...
随机推荐
- golang学习之regexp
regexp是golang标准库自带的正则校验包,使用: re, _ := regexp.Compile(`(\d+)年(\d+)月`) //判断是否匹配category类别搜索 ismatch := ...
- Mybatis插入、查询自定义的数据类型的方式
1.首先创建JavaBean对象 package com.zuo.Mybatis.bean; public class PhoneNumber { private String countryCode ...
- 前端(五):JavaScript面向对象之内建对象
一.数据类型 js中数据类型分为两种,原始数据累次能够和引用数据类型. 1.原始数据类型 Undefined.Null.Boolean.Number.String是js中五种原始数据类型(primit ...
- 在JSP中将EXEL文件的数据传入到数据库中
在jsp中: 在script中使用函数: $(function(){ //var lpyear = document.getElementById("lpyear").value; ...
- mysql启动服务出错--发生系统错误 1067。
记以此安装mysql出错的问题,MySQL 服务无法启动.系统出错 发生系统错误 1067.进程意外终止. 今天在安装本地mysql是,使用net start mysql命令启动服务时,总是报106 ...
- ntp时钟服务器
NTP服务器时钟校准的基本流程: (1):NTP客户端向NTP服务器发出一个时间请求包(UDP包),其中包含了该包离开客户端时的时间戳. (2):当服务器接收到该包时.填入包到达时的时间戳.包离开时的 ...
- 删除SVN版本信息 .svn文件夹
环境:MyEclipse.Windows 问题描述: 在MyEclipse中当我们需要将一个文件夹(包含若干文件或嵌套文件夹)拷贝到另一个文件夹时,此时文件内容虽然拷贝过去了,但其下面的 .svn文件 ...
- openlayers模仿google地图--地图版权随鹰眼关闭打开而改变位置
额..题目有点长......今天有个群友问我.想实现google地图地图版权随鹰眼关闭状态改变位置的功能.就是这种<ignore_js_op> 打开鹰眼时 地图版权也随着鹰眼位置改变而改 ...
- ArcSDE 常用命令
一.sdeservice命令: 1. 创建sde服务:sdeservice –o create ArcSDE常用操作命令(转): 启动cmd 1. 创建和删除ArcSDE服务操作命令(sdeservi ...
- idea整个项目乱码解决办法
idea前几天还好好的,这两天一直出现乱码.不止一个文件,是整个项目都有这个问题.想想这几天什么也没做啊... 上网搜了下 解决. 经过多次排查寻找,终于,在项目的目录下有个.idea的文件夹,这个文 ...