最近来了一个网页,里面有图片,但是却没有引用外部的图片资源,很好奇.查看代码后发现,里面的图片是使用base64编码后的字符串代替了,这个叫做Data URI scheme.

Data URI scheme支持的类型有：
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图片数据

自己做了一个简单的页面,点击查看测试页面,大家可以看一下源码.整体上操作如下:

1  base64编码图片

 linux下直接可以使用base64+图片路径就可以产生base64编码后的字符串

图片:

使用命令:

base64 android.png

iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAgAElEQVR4nOy9d5xdVbnw/127nTbn
TJ9MSSaZdNIbCRAInQCCiIoiYkHFclX0JzbEhl7Ra8V6RbyKCqKAglKlSAgJKYY00nudPpOZ08ve
e71/nLPLOTNBmvd33897H5icstde5enPs561D/wv/D8N4hW0VYAgUAeE/zXT+V94jTBY+rNf7g0v
hwG02tq6c6qrY00zZsxY2D5+/DJNVRtG9iQA6etQgAQpXhmXAbSODxOrM9m1KY/TqxCy+PoK+/JN
EJDgm4+UojjtVzvRUpfua6lzIUtfl/rrmB5FKDkO7Mi/wv4FSA+nUpTWL6XXubsWGB4e2rx69erH
MplM/9GjR1fyMpjhpZashMPhc+bMmTN90aJFnxsYGBh7+PBhZbQehBRIIX2zKU1UONgBgSjhSCKk
izHKKFL6eM2XB0ikjmKkzufPPx/E6+VkqxiNMaSvb1FCWvFrIYT7sfxG4c5ZSOkRUYoK/vAzu0CW
1iKc9wKXVRcubabltKcBwcY/LabzUBJRIp4s3T2iZ+HnrVKf0httBM48NBAKhZkwoSObSMQ