我们经常在做Jquery插件的时候需要插入一些自定义的控件，比如说按钮，而我们自己又觉着button标签很丑，而且不同浏览器显示的效果还不一样，这个时候我们需要用到图片，当然，我们可以通过img标签添加src，这个时候我们需要jpg、png、gif等格式的图片相匹配，这样的话，需要添加额外的文件，使得这个文件的可移植性变差，这个时候我们就可以将图片转为Base64编码，即将图片转化为字符方式放在html文件中。

　　Base64编码要求把每三个8Bit的字节转换为四个6Bit的字节（3*8 = 4*6 = 24），然后把6Bit再添两位高位0，组成四个8Bit的字节，也就是说，转换后的字符串理论上将要比原来的长1/3。没76个字符1需添加一个换行符，当原文的字符不是3的倍数，原文剩余的字节根据编码规则继续单独转(1变2,2变3;不够的位数用0补全)，再用=号补满4个字节。这就是为什么有些Base64编码会以一个或两个等号结束的原因，但等号最多只有两个。所以当原文除以3在任何情况下都只可能是0，1，2这三个数中的一个。如果余数是0的话，就表示原文字节数正好是3的倍数（最理想的情况）。如果是1的话，转成2个Base64编码字符，为了让Base64编码是4的倍数，就要补2个等号；同理，如果是2的话，就要补1个等号。

　　关于Base64字符编码网络上有很多教程。我这里主要介绍如何将图片转为Base64编码，用到JS或者Html代码中，其实用过PHP的程序猿都知道这个其实很简单，PHP自带函数file_get_contents将上传的图片转为字符串类型，然后通过base64_encode就可以将字符串转为相应的Base64编码。

1 string file_get_contents ( string $filename [, bool $use_include_path = false [, resource $context [, int $offset = -1 [, int $maxlen ]]]] )2 3 string base64_encode ( string $data )

　　通过以上两个函数就可以将图片转为了Base64码了，然后html可以通过CSS样式表来加载Base64码。

.image{    width:4px;    height:8px;     background-image:url(data:image/png;base64,Base64码);}

　　下面是我自己做的一个图片转Base64码的工具，具体实现方式就和上面讲的一样。

　　图片转Base64码工具

图片Base64编码