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

最新推荐文章于 2025-02-18 13:38:03 发布

原创

最新推荐文章于 2025-02-18 13:38:03 发布 · 5.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#编码 #浏览器 #前端

DataURL是一种将文件编码并嵌入到另一个文件中的规范，常用于在网页上直接显示图片。其格式为`data:mediatype;charset=charset,data`。前端可通过HTML5的File API从用户本地读取图片并转化为DataURL；后端则可以获取文件内容，进行base64编码，结合MIME信息生成DataURL。" 129663674,14284793,解决Windows IDEA Terminal中'node'命令识别问题,"['node.js', '开发环境', 'Windows设置', 'IDE配置', 'npm']

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，这两项都是可选的，但需要注意的是,逗号是一定要有的。