减少HTTP请求之将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片(大型网站优化技术)

  1 <?php
  2     $pathinfo = pathinfo($_SERVER[‘SCRIPT_FILENAME‘]);
  3     define(‘ROOT‘, $pathinfo[‘dirname‘]);
  4 
  5     function generateIcon_mobile() {
  6         $imgRoot = ROOT."/img/mobile";
  7         $iterator = new DirectoryIterator($imgRoot);
  8         foreach ($iterator as $file) {
  9             if ($file->isDot()) continue; 
 10             $filename = $file->getFilename();
 11 
 12             //识别出是否以icon_开头的文件夹，如果是，则对此文件夹的图标进行base64编码处理
 13             if ($file->isDir() && 0 === strncasecmp(‘icon_‘, $filename, 5)) {
 14                 generateIconMobileCallback("$imgRoot/$filename", ROOT."/js/mobile");
 15             }
 16         }
 17 
 18     }
 19     
 20     function generateIconMobileCallback($iconDir, $styleSaveDir) {
 21         //保存成js的文件名
 22         $saveName = array_pop(explode(‘/‘, $iconDir));
 23         //JS文件保存路径
 24         $styleSavePath = $styleSaveDir.‘/‘.$saveName.‘.js‘;
 25 
 26         //将当前目录下的所有文件及MD5组成一个识别字符串
 27         $fileMap = array();
 28         $iterator = new DirectoryIterator($iconDir);
 29         foreach ($iterator as $file) {
 30             if ($file->isDot()) continue;
 31             $fileName = $file->getFilename();
 32             if ($file->isDir()) {
 33                 generateIconMobileCallback($iconDir.‘/‘.$fileName, $styleSaveDir.‘/‘.$fileName);
 34             } else {
 35                 $fileMap[$fileName] = md5_file($file->getRealPath());
 36             }
 37         }
 38         ksort($fileMap);
 39         $fileMapStr = json_encode($fileMap);
 40 
 41         //确保目录可写
 42         ensure_writable_dir($styleSaveDir);
 43 
 44         //js文件句柄
 45         $wirteHandle = fopen($styleSavePath, ‘w‘);
 46         //当前小图标文件夹的相对路径
 47         $iconSaveRelative = substr($iconDir, strlen(ROOT));
 48         //写入，初始化保存数据的对象
 49         fwrite($wirteHandle, "/** icon in dir: $iconSaveRelative/ */ \nif(typeof(\$iconData) == ‘undefined‘) \$iconData={};");
 50         foreach ($fileMap as $fileName => $md5) {
 51             //当前图片的绝对路径
 52             $fullPathName = "$iconDir/$fileName";
 53             //取得路径信息
 54             $pathInfo = pathinfo($fullPathName);
 55             //取得文件名（没有后缀）
 56             $fileNameNoExt = $pathInfo[‘filename‘];
 57             //取得图片信息
 58             $imageSize = getimagesize($fullPathName);
 59 
 60             //取得文件的后缀
 61             switch ($imageSize[2]) {
 62                 case IMAGETYPE_GIF:
 63                     $imageType = ‘gif‘;
 64                     break;
 65                 case IMAGETYPE_JPEG:
 66                     $imageType = ‘jpg‘;
 67                     break;
 68                 case IMAGETYPE_PNG:
 69                     $imageType = ‘png‘;
 70                     break;
 71                 
 72                 default:
 73                     $imageType = ‘jpg‘;
 74                     break;
 75             }
 76 
 77             //取得图片资源
 78             $readHandle = fopen($fullPathName, ‘r‘);
 79             //将图片转成二进制并生成Base64编码
 80             $base64 = base64_encode(fread($readHandle, filesize($fullPathName)));
 81             //关闭资源
 82             fclose($readHandle);
 83             //将Base64编码写入js文件中
 84             fwrite($wirteHandle, "\n\$iconData.$fileNameNoExt=\"data:image/$imageType;base64,$base64\";");
 85         }
 86         //最后换个行
 87         fwrite($wirteHandle, "\n");
 88         //关闭资源
 89         fclose($wirteHandle); 
 90 
 91         //处理成功的图标文件夹给予提示
 92         echo ‘<p>‘.$iconSaveRelative. ‘ saved</p>‘;  
 93     }
 94 
 95     /**
 96     * 确保文件夹存在并可写
 97     *
 98     * @param string $dir
 99     */
100     function ensure_writable_dir($dir) {
101         if(!file_exists($dir)) {
102             mkdir($dir, 0766, true);
103             @chmod($dir, 0766);
104             @chmod($dir, 0777);
105         }
106         else if(!is_writable($dir)) {
107             @chmod($dir, 0766);
108             @chmod($dir, 0777);
109             if(!@is_writable($dir)) {
110                 throw new BusinessLogicException("目录不可写", $dir);
111             }
112         }
113     }
114     generateIcon_mobile();
115 ?>
116 
117 <!DOCTYPE html>
118 <html>
119 <head>
120     <title></title>
121 </head>
122 <body>
123 <br>
124 <br>
125 <br>
126 
127 <div>我们直接引入所生成的js文件，测试一下是否成功</div>
128 <br>
129 <div>直接在img标签里加入 icon-data = ‘图标文件名‘  例如  <\img icon-data="tryit">,查看效果</div>
130 <br>
131 <br>
132 <br>
133     <img icon-data="tryit">
134     <script src="js/mobile/icon_pink.js"></script>
135     <script src="js/mobile/jquery.all.min.js"></script>
136     <script src="js/mobile/attrHandle.js"></script>
137 </body>
138 </html>

 1 $(function(){
 2     setIconData();
 3 });
 4 
 5 function setIconData() {
 6     if (typeof($iconData != ‘undefined‘)) {
 7         $(‘img[icon-data]‘).each(function() {
 8             var self = $(this);
 9             var name = self.attr(‘icon-data‘);
10             if (typeof($iconData[name]) != ‘undefined‘) {
11                 self.attr(‘src‘, $iconData[name]);
12                 self.removeAttr(‘icon-data‘);
13             }
14         });
15     }
16 }