码迷,mamicode.com
首页 > 其他好文 > 详细

base64 图像渲染

时间:2019-04-16 16:12:56      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:data uri   title   file   显示   nbsp   tps   外部   ber   基于   

base64:是一种基于64个可打印字符来表示二进制数据的表示方法。常用于在通常处理文本数据的场合,表示、传输、存储一些二进制数据,包括MIME电子邮件XML的一些复杂数据。

可打印字符:在显示器上输出且能够看见。ASCII 32~128。

上文64个可打印字符特指:A-Za-z0-9,其余两个可打印字符(不同系统不同的字符)。

 

应用例子:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D"/>

【Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入,减少http请求。但是浏览器不会缓存这种数据。】

【Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。】

 

与webpack的关联:

url-loader: Loads files as base64 encoded URL。

用法:url-loader 功能类似于 file-loader,但是在文件大小(单位 byte)低于指定的限制时,可以返回一个 DataURL。

{
  loader: ‘url-loader‘,
  options: {
    limit: 8192 //小于这个字节数就会用base64的方式编码数据,然后嵌入到网页中。
  }
}
link: https://www.webpackjs.com/loaders/url-loader/

 

base64 图像渲染

标签:data uri   title   file   显示   nbsp   tps   外部   ber   基于   

原文地址:https://www.cnblogs.com/cheeseCatMiao/p/10717495.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!