图片验证码——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地址才行,非常不方便.如果在博客标题的后面跟一张小的图片,点击该图片后,出现一张二维码的大图,然后再通过手 ...
随机推荐
- Oracle PL/SQL Developer 上传下载Excel
接到需求,Oracle数据库对Excel数据进行上传和下载,百度后没有很全的方案,整理搜到的资料,以备不时之需. 一.下载Oracle数据到Excel中. 下载数据到Excel在MSSql中很简单,直 ...
- Python下ImportError: DLL load failed: 找不到指定的模块
环境:Anaconda3 Python3.7 scarpy1.5 版本似乎都能对的上.但是在cmd下报错 如下截图. 从以上错误来看,应该是lxml包有异常. pip uninstall lxml包. ...
- Spring学习笔记:jdbcTemplate和数据源配置
一.使用Spring框架jdbcTemplate实现数据库的增删改查 1.数据库 /* SQLyog Ultimate v8.32 MySQL - 5.7.19-log : Database - in ...
- 记录开发Nodejs c++ addon的一些经验(二、数据类型的转换(尤其是Buffer))
常见的数据类型的转换基本比较容易,结合nan应该不是一件难事 参考链接: http://blog.jobbole.com/109598/ http://deadhorse.me/nodejs/2012 ...
- window下Jekyll建站过程
> 前言 最近决定要写一个博客,先后注册了博客园和CSND的博客,但是他们的界面主题都不是很符合自己的要求,还没有足够个性化的发挥空间,遂决定自己建一个博客. 网上找了一下教程,感觉都不太详细, ...
- DB DBS 和DBMS区别
DB:是指datebase(数据库) DBS:是指datebase systerm (数据库系统) DBMS:是指datebase mangement systerm(数据库管理系统)区别:数据库 ...
- 基础架构之Docker私有库
由于项目要容器化,所有搭建自己的镜像库也是很有必要的,不然发到直接使用官方的镜像库,速度绝对能让你头疼,这篇文章就介绍搭建自己的镜像私有库. (一) 环境要求 Centos 7.5.1804 Doc ...
- .NET开源工作流RoadFlow-流程运行-管理员干预
在流程运行过程中管理员可以干预流程实例的走向,如管理加强制退回,指派和删除流程实例操作.在 流程管理-->实例管理 中查找到相应的流程实例,点击管理按钮即可管理该流程实例: 点击指派按钮,选择要 ...
- 【Android】修改包名
工程写的差不多了才发现原来用的包名还是自己尝试性的进行写代码的时候用到的.但apk的发布,google map api的申请等等方面都需要用到一个比较规范的包名.这就涉及到修改包名的问题. 包名一开始 ...
- 【Python】内置方法pop
此时 a,b 指向的地址所存的内容均被更改