一、介绍:
1.base64编码简介:
Base64就是一种编码格式。Base64要求把每三个8Bit的字节转换为四个6Bit的字节(38 = 46 = 24),然后把6Bit再添两位高位0,组成四个8Bit的字节,也就是说,转换后的字符串理论上将要比原来的长1/3。
2.使用base64编码的优点:
①减少了网络请求:采用http形式的url的话都会额外发送一次请求,网页发送的http请求次数越多,会造成页面加载速度越慢。
②不会造成跨域请求的问题:因为采用Base64编码的图片是随着页面一起加载的。
③不会造成清理图片缓存问题。
3.使用base64编码的缺点:
①数据传输量变大,代码的可读性不高。
②对于IE 8以下的浏览器不可使用,IE 8以上的浏览器可以使用,但对大小做出了限制。
所以此方法适合于图片像素小的。
4.例子
<!--图片验证码-->
<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:url,
success: function (result) {
obj.src = "data:image/jpeg;base64," + result;
}
});
}
</script>