DataURL是一种对文件进行编码並将编码后的内容嵌入及呈现在另一个文件中的规范/协议。
目前DataURL用得最多的领域是把图片文件转化成DataURL(此时这个DataURL就是这个图片的所有内嫆)并在网页上利用<img>
直接输出,而非给<img>
指定文件路径让浏览器另行下载
DataURL的格式是怎么样的?
其中mediatype表示MIME不填就默认是text/plain
,緊跟着的是字符编码类型,默认是;US-ASCII
这两项都是可选的,但需要注意的是,
逗号是一定要有的
下面从前、后端的方向分别谈谈怎麼生成DataURL。
前端(浏览器)如何生成DataURL
这得从DataURL的应用场景说起,前端多是利用DataURL来显示图片这图片来源的途径无非有两點:一是服务器发来的(这点放到后面讲),二则是从用户本地“上传”来的
过去的“上传图片”,是把图片从用户本地发送至服务器保存后再获取到图片地址并将这地址放到<img>
里显示,实际上就是让浏览器又从服务器上下载下来而如今,有了HTML5的file
api可以直接从用户本地讀取出图片:利用file:input或拖拽操作选定图片并包装成一个file对象,利用FileReader从file对象中读取数据并可转化为DataURL(具体请看我的另外一篇文章:《》)
后端(服务器)如何生成DataURL?
所谓DataURL实际上就是base64编码+MIME,按照这个思路我们只需要先把图片(文件)转化成base64编码,再查出圖片的MIME按照DataURL的格式来拼接即可。