base64编码图片

在canvas中drawImage的时候，是可以使用data:url来引入图像的，这个data url就是用一串base64编码的字符串来表示一幅图片。

同时，在html的img标签里，也可以使用data url，这样做的好处就是下载html文件的同时也把图片下载了，可以减少http连接数量，和CSS Sprites有相同的作用，当然如果图片比较大的话就不合适了，毕竟图片越大相应的base64编码字符串也就越长，对于代码阅读不友好。

img标签：
<img src="data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==" />

javascript：
var img = new image();
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

使用php生成图片的base64编码字符串：

<?php
$img = 'xxx.jpg'; //图片路径，注意图片格式
$file = fread(fopen($img, 'rb'), filesize($img));
// $imgb64 = base64_encode($file);
$imgb64 = chunk_split(base64_encode($file));
echo $imgb64;
echo "<img src='data:image/jpeg;base64,$imgb64' />";

把base64编码字符串转存为图片文件（也可以转存数据库）：

<?php
$f = fopen('img.jpg', 'w');
fwrite($f, base64_decode($imgb64));