图片验证码——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地址才行,非常不方便.如果在博客标题的后面跟一张小的图片,点击该图片后,出现一张二维码的大图,然后再通过手 ...
随机推荐
- Ajax知识点复习
1. ajax是什么? * asynchronous javascript and xml:异步的js和xml * 它能使用js访问服务器,而且是异步访问! * 服务器给客户端的响应一般是整个页面,一 ...
- 常用软件下载开发环境七牛镜像Java、Node、Mongo
[jdk1.8] Linux:http://soft.yzeng.cc/jdk18/jdk-8u202-linux-x64.tar.gz Windows:http://soft.yzeng.cc/jd ...
- Shiro登录校验
shiro是一种权限认证框架,实现一个简单的登录鉴权: 1.控制器层: @Controller @RequestMapping("/blogger") public class B ...
- 版本控制器之SVN
1.开发中的实际问题 1.1 小明负责的模块就要完成了,就在即将Release之前的一瞬间,电脑突然蓝屏,硬盘光荣牺牲!几个月来的努力付之东流——需求之一:备份! 1.2 这个项目中需要一个很复杂的功 ...
- Java 基础 内部类
Java 基础 内部类 内部类(嵌套类) nested class 目的为外围类enclosing class提供服务. 四种: 静态成员类 static member class 非静态成员类 no ...
- 1023 GPA计算
1023 GPA计算 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 青铜 Bronze 题解 查看运行结果 题目描述 Description 小松终于步入了大学的殿 ...
- JavaScript的重载(通过argument.length)
偶然间在博客园看到的关于js的重载(重载就是一组具有相同名字.不同参数列表,实现不同操作的函数或方法)问题,作为初学者,在看红宝书的时候,记得书中有概念说明js是没有重载的 所以,觉得有必要把这一段 ...
- Python入门-内置函数一
什么是内置函数?就是python给你提供的拿来直接用的函数,比如print,input等等,截止到python版本3.6.2 python一共提供了68个内置函数,他们就是python直接提供给我们的 ...
- ionic2生命周期
生命周期: ionViewDidLoad(){ console.log("1.0 ionViewDidLoad 当页面加载的时候触发,仅在页面创建的时候触发一次,如果被缓存了,那么下次再打开 ...
- 浅谈用于WEBGIS开发最重要的4个HTML5特性
WebGIS是GIS与Internet相结合的产物,一般Internet的开发手段都可用于WEBGIS的开发,比较流行的有Javascript.FLash,到现在应该说市面上的WEBGIS产品和具有的 ...