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,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCABLAEsDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD2VAxVvu5wMDA9Kqzu2f4cf7orQCGNiDg8D+VNkt0mQkHawrz4RtGzOnm1uY0rjDOSoA5JIHFeVeLvGOni+eC1t0kkQkNMowWP4dq6z4k6z/wj+jNbRgm5uhhWDfcHr/8AWrw+3jMpJPzM3NaJG0Ic7NOXxLqbtlJSi+gUCr1j4wvI2Cz7WH94DBrGnVIYwowTjmqBlwxPP4irWpc6MVoelw+KpXi+RiVPotXNW1G6n0rz412kY6Dsa5fwDq1hHq62+pkmF+B0Iz+Ne1vodo1us1pH51s4Bxt6f/WqJ2TUrbGCi03HueGzR6hfnakcjfRP61NF4O1OWMPtHPsT/IV7vb2GjAB/s6q47P2rWiFmsYG6Dj3FV7VdDLka3LDJz+A/lSAdgtE08UIBkkVQQMbjTgQyhg42nuDVOxOp4x8a7aebU7AxofKEGWI7ncf6V5fEpRAAjZPGRX1HrOmWOrW/lXKhiOjY+7/n+tcNq/gOyW3SaCSSNo8p8gGSrcZ5HUdAeuDU6bHVRqW0seJzRzKpyCR2yMVmXAlgkzKhFex674Wt54y1sgj+X7o6ZFcKmj3Ez3FuVVmgO1tx6Dt+FUtDeTucoJlY9Qo78V6H4V8fXOmwLFf6jceWvCBgSMfUciua1Lwrc6dBbSPGxecMdo4KAHj8xzWRLZXEE/2WctFlxuD9j/k0mlIhrQ+ibHU7XVIRNa3Cz7hnMZJH41oRwuYwcj868m8O6hqngu//ALNuTFPbugkCFum70PUfSvR7fU9Rnt0lNrZw7hnZLdojD6qTkevNclTCpu4RquJ08kYupC0khGQOnfj+VVmSeylBUsEP3SRwfbFa32yA3vkZCvgADGMnHSppxFJAyygCPqSxxit3FHMptdDPtZlu32Svsfso6Gr5gtzE0MiK6N95WGc1iG3Sa5YQzMwUZUn5fxp0erXEJ2SxqwHU45qHPl3NJU29iTUfDltKGktWEDHll5K49h2/lXnWsafp2k+KbhJrpYJZkhSKF/8Alqf4iT07V6qbqNrQSI4feRgA45rzXxPoFtrlxJI5ZTtMAmIDFTnLNz24A+lbxd1dig5vS5FIltLdx30gEtxEzPGGztQ9Mkd/xpt54St7fW7XU5H3zAeaI15jOAcHHsTn8KfY2F/o2jR289xHczFdgcpy3Pv7Ac1xmt6V4ruZle+1SCK2J+W3t7hx8vuQuT9T61UFqTKXYv6n9hufFNs+obnCxEPHGctn+HcOuDkmoHt4XdmtreFYScqGZs1zv2SaHxFIsT3EyKw8qSU5ZkA4ycc4A/Su2nkjklLxoxUgEEKPT6UThrdG1KpZWaPR/FcyaOE1SRikS7QxHXOMYHpkVlah4y0q4+y3P2wNB5u14hkMq4ySR7Vxdt43upLRrDxBnUNOkj2MzjMqD1B/i59efeufuLGS2ytrIbyzk5gnjBO5fcdQexB70cl9JGaurdz6JjtbZYw1uqkMAVfOcjsahks7aXcsqmGQ90zg/wCNcd4K8VGXQLTTZWCXtshiMcn32VejAHtj+Vb82oSSgh5Hx6YxWfItiEpX3KOp50yRSssbAAsWJ+UdskfjXnt94oNtfqJpv9GkuVHJ6Jg7mH47a7DXXRrHKxu6qwZ+p4ry7W7i2haP7ZaLPEXwwDYIPt+v5VUYpWS2OlW9m29zZk8Z2MNk14b64vCjLGtu0Wxlzk7jnrwDVC88ex2Mtij6bDeQ3GnI8m85dWbOAPT61h6vF4bVCbW4lid1B/dZcDI7g5xWXpWlLczxzi789ExtBXPA6DrWqSSuc3K5SsjtNL11bzTWC2ckNy3yQqjlt5PHPA9a7ez8J3iWcSzeekoXDKh4B9BXE6RHMusWEdqAJxMu3jIGP/rV7HG0GwebeKH7gNXNXdWSXs7L1OpRUHZ6niGpW9slwUtp/NQqBuxjJx6Vkjdaz+YA4BBVwjlCR9RVuBQYdx5bcOfwFTTxoU+7XZujJocttLbaemqabazTLGT5t4r7ngzxhlGCM+p496v6b4516xj2peR3UechLlNxHtnrisizd7dmlhdo3QgqVYj/APWPat7VNLsU1JAlsirJZNOwXgb/ACycgduecDiosQ9Nye2+JmqiYi/0+0uYCW3xopQkHoAeeBXHa1qck8wksYXht0l3rG/z5XPQ+uKqRyO7ruYnAx+FPWRhkBjgqCfrRszRL3SjqOpwXDyS/YrYAk/LsIP5jH8q6XRb0XGh28YRFhgykYKjePbd1I9B2rnbuCKVJGdASsZYHpyK623gigCQxIFjVQQopvVWIpJqTZ0/gbQjquo3N7OzJFbKEUDjczD+i/8AoVenQaFYLAo8rPuTWB4HRU8C6ZKow8u+SRu7MZCMn8AB+Fdraoptk47etZtRcrWFKrNK9z//2Q==" />
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.'" />'; }