文件轉base64輸出

Data URI scheme是在RFC2397中定義的,目的是將一些小的數據,直接嵌入到網頁中,從而不用再從外部文件載入。

優點:減少http連接數。

缺點:這種格式的文件不會被瀏覽器緩存。

不建議將“超過20KB”的文件編碼使用,太大的文件反而起反作用。


data: URI的基本使用格式如下:

data:[<MIME-type>][;base64|charset=some_charset],<data>


mime-type是嵌入數據的mime類型,比如png圖片就是image/png。
如果後面跟base64,說明後面的data是採用base64方式進行編碼的

Data URI scheme支持的類型有:


data:,文本數據
data:text/plain,文本數據
data:text/html,HTML代碼
data:text/html;base64,base64編碼的HTML代碼
data:text/css,CSS代碼
data:text/css;base64,base64編碼的CSS代碼
data:text/JavaScript,javascript代碼
data:text/javascript;base64,base64編碼的Javascript代碼
data:image/gif;base64,base64編碼的gif圖片數據
data:image/png;base64,base64編碼的png圖片數據
data:image/jpeg;base64,base64編碼的jpeg圖片數據
data:image/x-icon;base64,base64編碼的icon圖片數據
 

例如:<img src="http://avatar.csdn.NET/B/D/B/3_fdipzone.jpg" /> 轉爲data uri後爲

<img src="data:image/jpeg;base64,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" />  

PHP轉換方法:

/** 文件轉base64輸出 
* @param  String $file 文件路徑 
* @return String base64 string 
*/  
function fileToBase64($file){  
    $base64_file = '';  
    if(file_exists($file)){  
        $mime_type= mime_content_type($file);  
        $base64_data = base64_encode(file_get_contents($file));  
        $base64_file = 'data:'.$mime_type.';base64,'.$base64_data;  
    }  
    return $base64_file;  
}  
  
/** base64轉文件輸出 
* @param  String $base64_data base64數據 
* @param  String $file        要保存的文件路徑 
* @return boolean 
*/  
function base64ToFile($base64_data, $file){  
    if(!$base64_data || !$file){  
        return false;  
    }  
    return file_put_contents($file, base64_decode($base64_data), true);  
}  

demo:

//file to base64  
<img src="<?=fileToBase64('1.jpg') ?>" />  
  
//base64 to file  
$file = "test.jpg";  
$data = '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';  
  
if(base64ToFile($data, $file)){  
    echo '<img src="'.$file.'" />';  
}  

 

發佈了66 篇原創文章 · 獲贊 9 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章