[PHP] url, base64, sprite 三種格式的 icons.css 產生器

先做一個假設，如果 icon 的檔名就是 css 的 class 樣式名稱，那麼我們只要掃瞄資料夾的 Icon 圖檔，然後產生對應的 CSS 檔案，這樣就可以省去製作 Sprite 圖檔跟維護 CSS 對應的問題。

第一種 url 格式只是取得路徑的問題。

第二種 base64 格式可以透過 base64_encode(file_get_contents($path)); 就簡單的達成。

第三種 sprite 格式則使用 Imagick 去處理，會比較快樂。


接著以下就是如何達成的程式片段：

原始碼

1. <?php 
2.  
3. /*把目錄改變到當前文件下*/ 
4. chdir(dirname(__FILE__)); 
5.  
6. /*Sprite 圖與圖的間距*/ 
7. $spriteGap = 30; 
8.  
9.  
10. /*=[ 取得圖檔資訊 ]=*/ 
11. $maxWidth = 0; 
12. $maxHeight = 0; 
13. $nextTop = 0; 
14. $imageList = array(); 
15.  
16. foreach ( glob('icons/*.{png,jpg,gif}',GLOB_BRACE) as $path ) 
17. { 
18.    $image = new Imagick($path); 
19.    $name = pathinfo($path,PATHINFO_FILENAME); 
20.  
21.    if(isset($imageList[$name])){  
22.        throw new Exception("圖片名稱重複 [ $name ]");  
23.    } 
24.  
25.    $info = array( 
26.        '{top}' => $nextTop, 
27.        '{image}' => $image, 
28.        '{width}' => $image->getImageWidth(), 
29.        '{height}' => $image->getImageHeight(), 
30.        '{name}' => $name, 
31.        '{path}' => $path, 
32.        '{isAnimate}' => false 
33.    ); 
34.  
35.    $header = ''; 
36.    switch($image->getImageFormat()){ 
37.        case "PNG": 
38.            $header = 'data:image/png;base64,'; break; 
39.        case "JPEG": 
40.            $header = 'data:image/jpeg;base64,'; break; 
41.        case "GIF": 
42.            $header = 'data:image/gif;base64,'; break; 
43.        default: break; 
44.    } 
45.  
46.    $info['{uri}'] = $header.base64_encode(file_get_contents($path)); 
47.  
48.    $maxWidth = max($maxWidth, $info['{width}']); 
49.    $maxHeight = max($maxHeight, $info['{height}']); 
50.  
51.  
52.    /*檢查圖片是否為動畫*/ 
53.    $frameNum = 0; 
54.    foreach($image->deconstructImages() as $i) { 
55.        $frameNum++; 
56.        if ($frameNum > 1) { 
57.            $info['{isAnimate}'] = true; 
58.            break; 
59.        } 
60.    } 
61.  
62.    if(!$info['{isAnimate}']){ 
63.        $nextTop += $info['{height}'] + $spriteGap; 
64.    } 
65.  
66.  
67.    $imageList[$name] = $info; 
68. } 
69.  
70.  
71. /*=[ 製作 CSS Sprite 圖檔 ]=*/ 
72. $spriteImage = new Imagick(); 
73. $spriteImage->newImage($maxWidth, $nextTop, new ImagickPixel()); 
74. $spriteImage->setImageFormat('png'); 
75. $spriteImage->paintTransparentImage(new ImagickPixel(), 0.0, 0); 
76.  
77. foreach ($imageList as $name => $info) 
78. { 
79.    if($info['{isAnimate}']){ continue; } /* 忽略 GIF 動畫 */ 
80.  
81.    /* 複製 Icon 圖檔到 Sprite */ 
82.    $spriteImage->compositeImage( 
83.        $info['{image}'], 
84.        $info['{image}']->getImageCompose(), 
85.        0, 
86.        $info['{top}'] 
87.    ); 
88.  
89.    $info['{image}']->destroy(); 
90.    unset($imageList[$name]['{image}']); 
91. } 
92.  
93. $spriteImage->writeImage('icons.sprite.png'); 
94. $spriteImage->destroy(); 
95. $spriteImage = null; 

<?php

/*把目錄改變到當前文件下*/
chdir(dirname(__FILE__));

/*Sprite 圖與圖的間距*/
$spriteGap = 30;


/*=[ 取得圖檔資訊 ]=*/
$maxWidth = 0;
$maxHeight = 0;
$nextTop = 0;
$imageList = array();

foreach ( glob('icons/*.{png,jpg,gif}',GLOB_BRACE) as $path )
{
    $image = new Imagick($path);
    $name = pathinfo($path,PATHINFO_FILENAME);

    if(isset($imageList[$name])){ 
        throw new Exception("圖片名稱重複 [ $name ]"); 
    }

    $info = array(
        '{top}' => $nextTop,
        '{image}' => $image,
        '{width}' => $image->getImageWidth(),
        '{height}' => $image->getImageHeight(),
        '{name}' => $name,
        '{path}' => $path,
        '{isAnimate}' => false
    );

    $header = '';
    switch($image->getImageFormat()){
        case "PNG":
            $header = 'data:image/png;base64,'; break;
        case "JPEG":
            $header = 'data:image/jpeg;base64,'; break;
        case "GIF":
            $header = 'data:image/gif;base64,'; break;
        default: break;
    }

    $info['{uri}'] = $header.base64_encode(file_get_contents($path));

    $maxWidth = max($maxWidth, $info['{width}']);
    $maxHeight = max($maxHeight, $info['{height}']);

    
    /*檢查圖片是否為動畫*/
    $frameNum = 0;
    foreach($image->deconstructImages() as $i) {
        $frameNum++;
        if ($frameNum > 1) {
            $info['{isAnimate}'] = true;
            break;
        }
    }
    
    if(!$info['{isAnimate}']){
        $nextTop += $info['{height}'] + $spriteGap;
    }


    $imageList[$name] = $info;
}


/*=[ 製作 CSS Sprite 圖檔 ]=*/
$spriteImage = new Imagick();
$spriteImage->newImage($maxWidth, $nextTop, new ImagickPixel());
$spriteImage->setImageFormat('png');
$spriteImage->paintTransparentImage(new ImagickPixel(), 0.0, 0);

foreach ($imageList as $name => $info)
{
    if($info['{isAnimate}']){ continue; } /* 忽略 GIF 動畫 */

    /* 複製 Icon 圖檔到 Sprite */
    $spriteImage->compositeImage(
        $info['{image}'],
        $info['{image}']->getImageCompose(),
        0,
        $info['{top}']
    );

    $info['{image}']->destroy();
    unset($imageList[$name]['{image}']);
}

$spriteImage->writeImage('icons.sprite.png');
$spriteImage->destroy();
$spriteImage = null;

下載完整程式： php_make_icons_css.zip