利用DataURL技术在网页上显示图片

DataURL是什么？

DataURL是一种对文件进行编码，并将编码后的内容嵌入及呈现在另一个文件中的规范/协议。
目前DataURL用得最多的领域是把图片文件转化成DataURL（此时，这个DataURL就是这个图片的所有内容）并在网页上利用<img>直接输出，而非给<img>指定文件路径让浏览器另行下载。

DataURL的格式是怎么样的？

data:[<mediatype>][;base64],<data>
示例1：data:,Hello%2C%20World! //简单的text/plain类型数据
示例2：data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D //base64编码过的text/plain类型数据
示例3：data:image/jpg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/4QLQRXhp…… //base64编码过的jpg图片，由于数据太长，用省略号代替

其中mediatype表示MIME，不填就默认是text/plain,紧跟着的是字符编码类型，默认是;US-ASCII，这两项都是可选的，但需要注意的是,逗号是一定要有的。

DataURL怎么生成？

下面从前、后端的方向分别谈谈怎么生成DataURL。