zoukankan      html  css  js  c++  java
  • 文件转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.'" />';
    } 



  • 相关阅读:
    java环境配置
    关于Chrome(谷歌浏览器)对docume,准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top
    CSS3圆角详解
    Js监控回车事件
    Sql日期时间格式转换
    JS操作JSON总结
    SQL日期操作及只获取日期的方法
    如何让div出现滚动条
    CodeForces 55D Beautiful numbers
    POJ 3034 Whac-a-Mole
  • 原文地址:https://www.cnblogs.com/fdipzone/p/3715106.html
Copyright © 2011-2022 走看看