所谓DataURL是指"data"类型的Url格式,是在RFC2397中提出的,目的是对于一些“小”的数据,可以在网页中直接嵌入,而不是从外部文件载入。
完整的DataURL语法:DataURL= data:mediatype;base64,<Base64编码的数据>。
mediatype:表述传递的数据的MIME类型(text/html,image/png,image/jpg)
data:,<文本数据>
data:text/plain,<文本数据>
data:text/html,<html代码>
data:text/html;base64,<base64编码的html代码>
data:text/css,<css代码>
data:text/css;base64,<base64编码的css代码>
data:text/javascript,<javascript代码>
data:text/javascript;base64,<base64编码的javascript代码>
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
对于再程序开发中,使用最多的是基于DataURL的图片形式,接下来以图片形式的DataURL分析其原理和利弊
Data URL基本原理
Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用 img 标记将服务器上的图片引用到页
面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式,并存储在URL中,冠以mimetype。
图片在网页中的使用方法通常是下面这种利用 img 标记的形式:
这种方式中, img 标记的 src 属性指定了一个远程服务器上的资源。当网页加载到浏览器中时,浏览器会针对每
个外部资源都向服务器发送一次拉取资源请求,占用网络资源。大多数的浏览器都有一个并发请求数不能超过4个
的限制。这意味着,如果一个网页里嵌入了过多的外部资源,这些请求会导致整个页面的加载延迟。而使用Data
URL技术,图片数据以base64字符串格式嵌入到了页面中,与HTML成为一体,它的形式如下:
data:image/png;base64,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
JkcoZG5Ntp7FyzJihVJNt1F7pvlnPkkuFdI0lJTUU3dJbVw/9DLM6klFKr5MMr00xnbKcrVLsZSd
s0m9jFutzDJtCwit2yyI6XiTkl4cTfmqXzKrgpnlaUV8Wdb1HOt1+yezEvF0DQyf/IgvsfRaN1JH
zPso1/4a0D/9mJ9HpH+ZEz9Jh7fKf2k471+lyV+rC19JP/U+EyUj9C/tIW2il/lkvuj87zvd0Mfx
jrL8q58rtM5pvc1yNuzCfc4ruM5Pco3uWk92ZyZFUfJVl2UZFQyCSCAAAAAAAAAAAAAAAAAAAAAA
AAAAABJAXIEl4q2UXJdclF0tjaHBmjWH2KjWGx04+EcsX2OnA1dHUc16Gm2krP0L2Pfh6Xnd03Ov
sj89wV4kffey066Lmf8A7j/ZGnw4+VNflvLLfucHjqV9zTWZE8r9DheT83J7cMenyuXP7nk+3ON5
On6bOv4JuL+a/wBj46DtV5H6D1fB+N6JqMN/mUXON+a3/ZM/PE2nf1PJzzWW30PpcvLj0u9hZF7F
b3MXoaxaNYN0YRZtCS+hYlbxTW6d2atLJTfKXJgpOLTT57HRaUbTXozfHthn0lLwuLgqaVvbk3eW
KSl4Ek0n8zFy8SrfysraSSlK01wux369OJ2tlm/Ckmkr4RVyUdvQpJRjLa1e6spJ2lb3qzi5O5F5
TvvwuWYSnbXGxSUm3z9Ckm+xlcmsxWnK9jGcr2QnJpblbOLXciyfYsmZplk6A08SSt9jGTbbb7iU
nL5FfP4EtWR+yey78Ps509N/+jHt6H0Wlf5kfO9Bi8PRtFifMcEE/jSPf0buS+JrlOnnwvbwf7Sn
/daFeam/2PzjK3bR+h/2ltNaCN/wzf3R+dZXuzjH8Y2v5OfI+TCb53NsjMJWc11Gbe5RlpFWRVWU
fYuykiKq+QHyCAAAAAAAAAAAAAAAAAAAAAAAAAAABNEEoCaLRKotEo1XBrFmSZeBUbRV7nRjtJM5
4nRjqjqOa79M7ad8H3XsxO+jaheWS/qkfBad1JH2vsrO9BqoPlOL+1Gs9M649dkayS37nGptys36
ltmfqziTPp4Tp8DltudehhkpRcW2lJNOvJ7H53rMMtPq8uGSpwm0feYZ06Z8/wC1mhayx12NfllU
Z12fZ/NHk+pw3jt7/oeXWXjfl86m6JsqDwPrJTNcc6a9DItF07LKljsf6Lj5dxiySi92mnyjLHka
XhfDJ3T52NN/MZ6+K7rSi5Le1Zk5SlJOklwviZ45yiqv5F3NRjSTbe9Gly3GUx1SVydNccvsZyvd
0yYZNmmtm9/QpOVSdPY4taSM5N20ism16FrTfwMpyT2Rm0Vk222VJStWO5HRbF2QLsgGumxPNqMe
JfxzUfqYnt+yWkep61jm1cMH55fsvuXGbsjnK+ONr9M0tY4RhF7RSivglX9D2dA7mjw8Tpc7+Z7P
TXc0enknTx8N3Xz39pkv/N6OCfGFv6y/2Pz7K9z7n+0nJ4utYofyaeK+rbPhMsvMwn4x67+Vc83b
MpM0m7MpWuDl0o+SrZZszkzlUWVbJZUVUPkAEAAAAAAAAAAAAAAAAAAAAAAAAAAACSCe4EounuZr
kvEo0iaRZnEvHyKjeLN8bOaL3R0Y3wdRK7MTpo+s9ksv99lxX+vH90z5DE9z3vZzP7nqeJt0m/C/
gzSM67OsNQzO9t3weUssfNfU9L2tvFhySi6tNWvU87RRnPQanJjUZZYQi14laSbSbr0tH0sM9Yvk
Xh8sr/deGZJrdfUvqYx1eiyaeb2mqTfZ9n9T5zVanWabVZMcstzjJppxVOvJeRfT9cnB1nx2u7i6
f04M7z4X7cnf/D5MfuwePmxyw5p48iqUXT+Jmme31N6fX4vxGnd5Y/qVU2vVea8zxHsfN5MPG9en
1uPO547s1RMn4EWDh20jJ1T5NIztUzBMm+6OpUsdKn27LYupxUW3bfY5oyp+ZZzbXqdSubGspNLm
l3S7lJStVZTxNpIhvu+xNrpNtKrso3e/lsGyL2IsQ3tTIbDZByqbCCTbOnHo5uKll/u4vhvl/Bcs
slvotk9ssGGefKseKLlKTpJH3vQNDi6XpfDKUXnnUsjTv4JfA+T0+rho01psUfF3nk3+y/1OqHUt
dnn4VqnBuklCEV8tlZ6eKY49/Ly805OTqdR99j1ONU/Evqe70bIsjTi2/ifmGoWpw9Iwah6nULLP
NPHJ+PZqKXC+bPuv7OHKfSYe8bk1J227b3u2+51yXeO2fFhccpLXge3udZPaTUpNPwKMPpG/6nyG
Xk9r2h1P4rrOszp2p5pNP0TpfZHjZGYX09fztyy5ZSTNJq2ZSRm7ij4M2+TSRnIghsqSRewVAAIA
AAAAAAAAAAAAAAAAAAAAAAAAAAE9yAuQLJFkqIrYlFGkS0bsqviXiyo0idGJ7nOjaGzRYjsx7bnb
o5yhkUk6ppo4MT2SOrHNppp8Gkrivo/alLU9HWohxKCkvpv97OT2Ncc/UVpZ14dTgnjVv+Jq190j
s0slrPZ2eGT3xNxryT3T/c+e6NqZaHX4MqtS02ZN/BS3X0s9vH92FjxZfbnv9re0ejcsjn4UskLU
klyfMzgr2tH6T7X6OMNfknjdwy1ki0tnGStfufFZ9BLIpTxLdPeJznxfyYzLFtjyeGWsnkXKLtNq
t9tmT4o5HU9n/Ml+5fJBxk1JNNbUzJrfbseGyzp6pUTxuD377prhlODfHPwpxmvFB8ruvVEZcThU
rTjLeMvP/c51/RWSZNlSU6IqyZNlSSokXsR2DAggmyOSVUHRptLk1E2saSUd5Sk6jFebfYnS6f3z
k5S8GOCuc3wl/V+hvlyyzQjg08XDBF/liuZPzk+7+y7FkS1LnptMq0397k75ZLb/AKV2+L3+Bn/e
5pNzk2ny75NMemUFc3uuxeUlHZJKuKNZL8s+tqQxJPi+256XS9I3qIZEu9JevmZaLR5dS/E04wXM
mfTdA0D1OthjhHZtJUvkevj4tTyrDLllvjPbL2lxR0fs/wBL07VZMksmd+aTaS+tM+m9kprp/sVl
1stvDilJP1ey+7R8l7d6uOo9o8uDC04aaMdNCnt+VU/u2fR+0E/+Gew+h6fF1PP4fEu/hirf3pGP
Jd4z9usZ9+/6Ph9Q23bdvl/HuceTezonK5O2c83bMK2jCT3M38TWRk0jh3GbozlyaSM5AVI7E0Qz
lUAkgAAAAAAAAAAAAJSbdI9LD06OLEs+un7rG94w/il8vL1NMOPLP05yzmPt5gAM3QAAAAAAAAAA
AXIC5Asi0VZQvF0UXLx3dIqty8VTsqNYKuS8XRnFl4lR0wkbQlwcsH5m8XwdRK+h9nM//mZ6aXGa
DXpa3X+h5XUIfherZFVLLv6Wtn/R/MnQah6fV48qdOMk2zu9p9P43HUYlbaU4td9t1/35Hr4cnk5
p3P309zS5v8AivsrjlJuWbQv3OR8twe8H9LXyPnv/wBPXqUk3Bumaey3V8Wi1taht6XUw91mS7J8
S+T3OzregeHNkwS3adxkuJJ7pr0a3PThfG6n92fJj549uX2q6Hj/AOH4+qaKpYpbTS5jL1PjGmn8
z7HpvVJYMGfputd6fUJxaf8ABJcNfM+V1eF4s84u9m0ef6jjv5NPpsrJ4VzNX25NMORU8WT9Enz/
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
View Code
1. 浏览器支持
几乎所有的现代浏览器都支持Data URL格式,包括火狐浏览器,谷歌浏览器,Safari浏览器,opera浏览器。
IE8也支持,但有部分限制,IE9完全支持。
2. 数据容量
Base64编码的数据体积是原数据的体积4/3,也就是DataURL形式的图片会比二进制格式的图片体积大1/3。
3. 使用场景
DataURL形式的数据不会占用HTTP会话,所以再访问外部资源或当图片是在服务器端用程序动态生成时借用
DataURL是一个不错的选择
上传实现
package com.zhao.image;
import com.sun.org.apache.xml.internal.security.utils.Base64;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
/**
* 图片上传
*/
@RestController
public class uploadImage {
@PostMapping("uploadImage")
public String uploadImg(@RequestParam("file")MultipartFile file) throws IOException {
//使用DataURL 的形式存储图片(对图片byte数组进行base64编码)
String encode = Base64.encode(file.getBytes());
//得到 DataURL 的形式的图片 直接在浏览器的网址部分输入即可展示或者 前端 的img的 src属性
return "data:image/png;base64,"+encode;
}
}