如何通过文本的形式保存图片?
内容纲要
有些什么方法可以以文本形式保存图片,在网页中图片以为文本的方式存在,而无需单独把图片存放到文件系统的某个文件夹?
有两种方法,一种是图片转svg,另外一种是图片转base64,两种方法都有增大容量的弊端。
在线工具
- 图片转base64:https://tool.lu/base64image/
- 图片转SVG:https://www.bejson.com/convert/image_to_svg/
把图片转成svg格式
svg格式可以保存为.svg的文件,以<img src=xxx.svg />
的形式进行使用。也可以保存为文本,直接写到网页源码中,即可显示为图片。svg文本形式如下:
<?xml version=1.0 encoding=UTF-8 standalone=no?>
<svg version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink x=0px y=0px width=32px height=32px viewBox=0 0 32 32 enable-background=new 0 0 32 32 xml:space=preserve> <image width=32 height=32 x=0 y=0
href=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAClFBMVEX////87+Tzwpzrl1Xl
eiXiagzhZgThZgTiagrleCPrlFLzv5f87OD65NPtomjkchnjcBbtnmH54c3++fXvq3fiZwniZQbu
pm7+9vD76NjngjXmfS364s/64s/kchrjbRP53MX76NnkchrjbRP/+fXngzPmeyj+9u/wrXfupGj7
59fiZwjhYwP54Mvuo2fsmVj98efkchfjbA776970w53yvJDsmFXqkkzmeiXleCDiagviagrhZgPi
agriaQnleSPldh7rlVHqkEj0wJjyuYz87uPkcBTjawvtn2H649HiZQXhYgH53MTvp27tnl7+9/Hm
fSrldyD98+rjbRPiaQz53cbiaQ331br64c7mfCrldyP53MT+9e7uomjhZAPhYgDtnV/98uj53cfr
mFjjbBDiaw742cD76NryupDqkUzldyHiagriaQnkdh/pj0nxt4v65tbhYQDgYQDhZADhZgPhZgTg
XQDhYwDgXADhZAHhZQHgXgDgXwDgYADhZwTgWwDhYgDhZQLhZALhZQPjbxLleybmfSnjcBTupGj/
/Pn99OzmeiXhYgHvpmv////wsHzupWr//Pr64MziaAn//frpjUTleCPhYwHhYADjcBPfVADfWQDx
tIPzvZPzwZnxuIrtoWTmfCn/+vfxtofhYwPtnV7hXgDvqXD87eH30bb307f307b31bv+9e72zq7h
YgLnfyzuqHDkchjpi0D//fz53MXyvJH1yqfvqXHjbhD/+PL53cf65dT98urohDfhZQTiaAzupm3/
//742sL1yKT//v365NT428T53cj87eLyt4jhYQHngjL++fX+9u/ldyHpiUD53sn42sPohjrngjPs
m1rupWvvrXjwrnrwsX/rmFbmfy64DheYAAAAcXRSTlMAFVqh0/D9/vHWpV8ZJY/i5pUrB4Dy94kL
IcPMKSzg6DYg4eoHx9IMgI8h9fstkKAT5/EcWmejrdbb8vT+8/XY3qexX2wW6vOXJ/n9M4qZCtDa
EenwMu9BK8/XNA2P+v2YEjCe7O83Hmer2fLz269sIrObeMIAAAABYktHRACIBR1IAAAAB3RJTUUH
5QQcETM0rSk2tAAAAilJREFUOMtjYIADRiZmFlY2dg5OLm4eBkzAy8dfWFRcUlpaUlxUJCAohCYt
LCJaVl4KB8VlYuISyPKSUhWVpSigqkJaBiEvK1ddigFq5BVg8opKtXWYCuoKlaFmqKhWY5EHqqhR
Uwcr0KgH8iob0EAjUEWFJkheS7uptLS5pRUVtLU3l5Y26ugCFeiVAQ0o6+hEBV3dPSBhfQYGA0OQ
B8t6+1BBfxnYs0bGDCaFIFbZBLDwRJgBkyY3QfxqymCGpGDK1GlQJ7RPh/hkhjmDRTFCQefMWbMh
oAbq1UpLBqsSJAVz5s4DgfkLFtY0ghWUWDPYlCK5AQ4WLV5SAlHBUIJVQV/f0mVQBbYQK5aDRVes
XLV6zVowcx3YGSV2DPbgeF6/YSMQTNhUXVtbsXkLSMHWcpDOSgcGR5A3m+u2bQeCHbMbmxtn7NwF
UrAbrKDQicG5CGRS5R6Q4N59+xvKDxw8BGIfbgApqHFhcHUD2VF9BGzx0WPHT5yEOPIUKKwb3RUZ
GDxArNNnzqJ64tx5UGRVOwJj09MLFPU1Fy4iSW+5dBmUyJq9fUAJwrcClKBqS69cvXb9xo0bN29s
vHW7EiRfV+EHTlH+ATUgFY1F1WVQUF0ECui6GYFBkETpGVyILdE2hITCkrVCcA2GirrasHBExoiI
rGhElW+siIpGzloxsXFlSHmrqjo+IREtdyYlp9TAMm9NKlcalvydnpGZlc3GnpObl1+AEAUAbNqW
ZFTg+pkAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjEtMDQtMjhUMDk6NTE6NTIrMDg6MDBWOPpuAAAA
JXRFWHRkYXRlOm1vZGlmeQAyMDIxLTA0LTI4VDA5OjUxOjUyKzA4OjAwJ2VC0gAAACB0RVh0c29m
dHdhcmUAaHR0cHM6Ly9pbWFnZW1hZ2ljay5vcme8zx2dAAAAGHRFWHRUaHVtYjo6RG9jdW1lbnQ6
OlBhZ2VzADGn/7svAAAAF3RFWHRUaHVtYjo6SW1hZ2U6OkhlaWdodAAzMij0+PQAAAAWdEVYdFRo
dW1iOjpJbWFnZTo6V2lkdGgAMzLQWzh5AAAAGXRFWHRUaHVtYjo6TWltZXR5cGUAaW1hZ2UvcG5n
P7JWTgAAABd0RVh0VGh1bWI6Ok1UaW1lADE2MTk1NzQ3MTLE6KYyAAAAEnRFWHRUaHVtYjo6U2l6
ZQAyNTA3QkKaESIWAAAARnRFWHRUaHVtYjo6VVJJAGZpbGU6Ly8vYXBwL3RtcC9pbWFnZWxjL2lt
Z3ZpZXcyXzlfMTYxOTA3NzA4MzMyODgwOTZfMTNfWzBdDV5fAAAAAABJRU5ErkJggg== ></image>
</svg>
把图片转成base64格式
转成base64的图片,在网页源码中的使用方法如下:
<img width=32 height=32 src=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowNWI1ODEwZS0yNTAwLTQ3NGEtOTljYS0zNGNlNmY3MTBiNDEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkI2MzA3NTE3RjlDMTFFNTg2MDlGRDZDMENEREJCNEMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RkI2MzA3NTA3RjlDMTFFNTg2MDlGRDZDMENEREJCNEMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjA1YjU4MTBlLTI1MDAtNDc0YS05OWNhLTM0Y2U2ZjcxMGI0MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowNWI1ODEwZS0yNTAwLTQ3NGEtOTljYS0zNGNlNmY3MTBiNDEiLz4gPC9y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>
如果缩小以文本形式保存图片的大小
前面有提到两种文本形式保存图片的方法都有增大容量的弊端,作者考虑到图片压缩原理,可以通过删减图片不可见信息(比如拍摄图片的相机型号,编辑图片的软件名称等)来减少图片大小,同样的转换成文本的图片中,估计也保留了这部分信息。
那么我们可以通过先压缩图片,再把图片转换成文本,那么文本的容量就会小一些。作者测试过,这个方法是有效的。
推荐图片压缩工具:tinypng.com