图片验证码——base64编码的使用

一、介绍：

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>