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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值