缓存DataURI资源的解决方案

Question

缓存DataURI资源的解决方案

    在Html5中，可以将图片经过base64编码后直接写在HTML中来展示图片，使用这种方式可以减少Http请求数量，从而可加快页面展示，同时也减少了很多对服务器的压力。

    例: <img src="data:image/png;base64,iVBORw0KGgooCAMAAAC7...（此处略去N个字）...lFTkSuQmCC"/>

    但这种将图片直接嵌入html中的用法，也会带来一些问题，
　　　　问题一：同样的图片无法重复使用，每使用一次都要重复输出一遍图片代码，增加了html自身大小；
　　　　问题二：假设html页面不做缓存（通常动态页面都会这么做），那么页面中引用的图片资源就无法缓存在浏览器中，相当于每次请求都会重新加载一遍图片。

    由于存在着以上两个问题，就需要综合考虑是否值得使用DataURI的形式加载图片了。

    这里也说明一下，使用CSS Sprites同样也能减少图片产生的大量http请求。由于CSS Sprites必须将图片用做背景，就会导致以下缺点，
　　　　一来：修改图片很不方便；
　　　　二来：经常会在html代码中包含很多空标签（只为给background提供一个展示的空间）；
　　　　三来：会丧失许多图片自身的特性。

    所以如果不能使用CSS Sprites，又要解决DataURI的问题，该怎么办呢？

    解决方案也很简单，
　　　　第一步：建一个img.js文件，将DataURI的数据放到一个变量里，设置一下这个img.js文件的缓存时间（这段时间浏览器不会重复加载这个文件）；
　　　　第二步：将多个图片逐个转成base64编码，全部放到img.js文件中；
　　　　第三步：在html文件中动态创建img标签，将前面变量里的DataURI数据赋给img的src（变量是固定的可以重复使用）

    经过以上三步就可以达到和CSS Sprites一样的效果了（只用一个http请求即可下载多个图片，同时也可以设置图片缓存时间），但我们可以让每个图片按照图片的模式工作，从而摆脱了background的束缚。

    DataURI浏览器支持情况：
　　　　Firefox 2+
　　　　Opera 7.2+ - data URI必须少于4100个字符
　　　　Chrome (all versions)
　　　　Safari (all versions)
　　　　Internet Explorer 8+ - data URI必须小于32k

    附上图片转base64的php代码，仅供参考！

1. <?php
2. 　　　　$file = realpath($_GET['img']);
3. 　　　　$pathParts = pathinfo($file);
4. 　　　　$extName = $pathParts['extension'];
5. 　　　　if($fp = fopen($file,"rb", 0))
6. 　　　　{
7. 　　　　　　$picture = fread($fp,filesize($file));
8. 　　　　　　fclose($fp);
9. 　　　　　　$img = '<img src="data:image/' . $extName . ';base64,' . base64_encode($picture) . '"/>';
10. 　　　　　　file_put_contents("tmp/{$pathParts['basename']}.txt", $img);
11. 　　　　}
12. 　　?>

复制代码演示：os.heimali.com（DataURI演示仅支持Webkit内核）

转自：http://yu.heimali.com/dataURI-cache.html