用Base64编码插入Markdown图片

2月20日 · 2017年
jxtxzzw

在Markdown中插入图片,语法标记很简单,用的标记和插入链接很像,只是前面多了一个感叹号。
![alt](src)
问题在于,插入图片向来有令人头疼的事——图片放哪里?

如果是本地,那么插入图片是这样写的,绝对路径相对路径都可以。
![alt](/pictures/img/test.png)
问题在于,这么做,本地路径还是一个逃不过的坎,如果本地路径有改动,或者我想要把文件分享给别人,除非导出成PDF等格式,否则单单一个MD文件,别人就没法看图片,而把图片和MD打包放在一起,本身也是很麻烦的事。

那么为何不放在网上呢?
![alt](https://test.jxtxzzw.com/pictures/img/test.png)
似乎也不好。

万一上传图片的那家网站关闭了呢?

并不是所有人都有能力自己搭建一个服务器的,而且,就算自己搭建了服务器,服务器坏了呢?或者说,很多年后空间不足,放不下了,迁移也是麻烦。又万一,看MD文件的那台电脑,没有联网怎么办?

幸运的是,今天看到了一个用Ba反采集功能启动se64编码插入Markdown图片的方法。

首先,我们把一张图片转换成Base64编码。

比如

sp170220_193723

转换成Base64编码,是

iVBORw0KGg这是jxtxzzw的个人博客oAAAANSUhEUgAAAFIAAAAhCAYAAABKmvz0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAHmklEQVRoge2YW0jU2xfHPzOCopyright Reserved @jxtxzzwaDeZkiopOWoZ5TfNWYdlDiiiE2cOIJKKYZBMaSA9iYFAPCUUQGY1p2eUh0IQirR6yoJuRomneLXRykFRMpxkddbJxfuchHM4csxyTc/719w欢迎访问jxtxzzw个人博客P7Zdba67f3d9bee+0tEgRBYIVfRvxfD+BPYUXIZWJFyGViRchlYkXIZWJFyhttps://www.jxtxzzw.comGViRchlYkEhBUGgrq6Ohw8fYjQa/80x/ZbYLmSYnJzk9u3bTExMEB0dzbp166wObjAYAJBIJEsf4W+C6Ec3m4GBAQwGA5s3b0YkElkVWBAElEolXl5e7N+//5cH+r/OghkJ4OXlteTAWq2WN2/e/FKM34kFM/LLly8olUoAcnNzAbh69SofPnPowered by jxtxzzwygoKAANzc3s68gCFRXV/P48WPy8/MxmUyUlpby4sUL3N反采集功能启动zccHJyAiA9PR0PDw+Ki4vZu3cv+/fvt8j0kZERzp49S0hICBkZGXR1dXHu3LnvDlwmk3H8+HEkEglKpZLW1tbv+qWnp+Pk5MTFixfJz88nODjYbJuZmeHy5cvmOXl4eJhto6OjnDlzhqioKJKTk38q5A8PG41Gg0ajQRAEVq9eTXJyMsPDw5SXlzMzM2P27ejoQKlUkpCQwMaNG1Gr1Tg7O2NnZ4ePjw87d+5k586duLi4EBQURGxsLMXFxXR0dFhMqry8nImJCRITExG请勿采集与复制,转载请注明出处LxTg4OJj7zrXQ0FAGBwfR6/XY2NggFovx9fWd57d27VrevXuHjY0N7u7uTE5O0t7ebjHHkZERnj9/Tl1dHX19fRY2tVpNfX09mzZt+qmI8JOl/U/c3d3Jy8ujsCopyright Reserved @jxtxzzwLCQHTt2EBcXh0ajQalUsmvXLuLi4hCJRM欢迎访问jxtxzzw个人博客TExODt7U1dXR179uyZt0cmJSXR3d1NWVkZRUVFODo6Ultby9OnTykqKsLFxQUAb29vjhw5Yu4nCAL3798H4PDhwzg4OACwb98+i/ijo6M0NzeTlJREdHQ0JpOJgIAAOjs7MRgM5sOvp6cHqVRKVFQUjY2NREVFYWv7TZLW1lY2bNiw6K3J6joyIiICuVxOSUkJfX193LlzB41GQ3Z2Nvb29ouKYW9vT0ZGBoODg文章由jxtxzzw原创1RVVdHX18f169dJS0https://www.jxtxzzw.comtj+/btC/br6+vjypUr5ObmWizRv2M0GqmsrGR2Powered by jxtxzzwdpbs7Gzs7OyQSCRs2bIFlUrF+Pg4AF+/fqW+vp7g4GBiY2Npa2tjYmIC+FZtqFQqgoKCzNvSz7BaSFtbW1JTU5HJZBQUFHD37l2OHTuGp6enVXF8fHzIycmhqqqKgoICAgICSElJWbA60Ol0XLhwgcjISOLj4xf0e/bsGdXV1SgUClxdXc2/h4SEMDQ0xMDAAACfP3+mq6uL8PBwgoKCGBoaQqVSATA2NkZPTw8hISGsWrVqUfNZ0s3G0dGRgwcPMjw8zLZt2wgPD19KGHbv3k1UVBTDw8PI5fIFM9poNFJVVcXg4CAZGRkL+vX391NSUoJcLiciIsLCJpPJ8PT0NB9K79+/x2AwEBAQwPr16/Hx8eHt27cIgsDHjx/R6XT4+/svei5LElKv11NRUYG7uzstLS20tbUtJQxNTU3U这是jxtxzzw的个人博客19fj7u5OTU0NU1NT3/Vrbm6mqqqKnJwcfHx8vuszNTXFjRs3kMlkpKammvPowered by jxtxzzwe6OaRSKf7+/qhUKiYnJ3n9+jVhYWG4ubkhlUqJjIykubkZvV5PR0cHfn5+rF+/ftFzsVpIo9https://www.jxtxzzw.comFIRUUFKpWKoqIiEhMTKS4uZnh42Ko4/f39nD9/HrlcTlFREe3t7dTU1PDPamx0dJTy8nISEhLYs2fPd2MJgsCTJ09oamri6NGjODo6zvNZtWoVISEh9PT08P79e9ra2ggNDcXOzg6AyMhIent76ezspLOzk8DAQPNhthisFnIuO7KysvD39yc5OZk1a9ZQWlpqvhICiMVibG1tMZlM82LMZYhttps://www.jxtxzzw.com+bmxspKSn4+fmRmZnJtWvXaG5uNvsZjUZu3rwJQGZm5rwsm+Pdu3eUlZWhUCh+uBz9/f3R6/W0tLQwPT3N1q1bzbYNGzYgk8moq6tDrVYTFhZm1W3OKiE/ffpEWVkZMTExxMfHA+Di4oJCoeDVq1fU1taaM8rV1RVfX18ePHhAb28vWq2W欢迎访问jxtxzzw个人博客z58/IwgCtbW1vHjxgtzcXJydnRGJRMTHxxMdHU1ZWRmjo6PAt4PjwYMHyOVybG1t0Wq15qbT6TCZTOh0Oi5duoSfnx/btm1Dp9NZ+P39z53bC0tKSggICLAowNetW0dkZCT37t1DLBYvun60WsiZmRmuXr2KwWAgKyvLvCTgW0mUlpbGlStXzIWtvb09aWlpjI2NceDAAeLi4rh16xYdHR0UFxejUCgsShiJRMKhQ4fQarVUVlZiNBrp7u5Gr9dTWFhIXFycRcvLy2N8fByNRkN/fz8vX74kKSlpnt+jR4/M33BwcCAwMBCA7du3WzymiEQiIiIiMBqNeHl5Wf1Is+AV0WAwcPr0aQBOnDix5Bcck8lkrs+kUili8Z/5BGrVzWYpiMXi727+fxoLpsfs7CzT09NIJBJsbGz+zTH9lszLyIaGBlpaWlCr1TQ0NHDq1KlFV/f/z8zLSJPJRGNjI1NTU5w8eXLB2m0FS374Qr7C4vkzj9D/gBUhl4kVIZeJFSGXib8Ax7wacMdUd3oAAAAASUVORK5CYII=

原来src的括号里,先写上

data:image/png;base64,

首先是data,然后跟一个冒号,再跟image,斜杠,斜杠后面写上png或者jpg或者其他的格式,然后是一个分号,分号后面是base64,然后是一个逗号,逗号后面是这段Base64编码。

整个语句,从data到base64编码的最后一个字符,放在那个括号里。

就像整个样子。

sp170220_194346

不过,这么长的编码写在文件中,拦腰截断整个文件内容,很难看。

即便使用的Markdown编辑器是实时预览的,阅读时没有影响,不过写的时候,还是影响体验的。

这时,又可以考虑到一种Markdown的高级用法,ID调用。

我们可以这么做。

定义一个ID,叫做[img1],放在末尾,然后调用这个ID。

写上

![alt][img1]

sp170220_194820

然后,在文本最下方,定义这个ID。

ID的定义和调用,这里不多讲了。

sp170220_194811

如果有多个ID,Powered by jxtxzzw也全部放在文末,这样就不会使文章被分裂地七零八落了。

就像写注释和参考文献一样,这些与文章内容相比不是那么重要,只想看图片而并不想去关心图片的Base64“编码”,统统扔在最后。

现在只剩下一个问题,怎么获得图片的Base64编码?

这个方法就太多了——可以去在线网站转换,也可以找一个本地软件。

欢迎访问jxtxzzw个人博客如果想要通用型强一点,联网离线都能用、换台电脑没有软件也不用再去下载,那么可以试试浏览器(比如Chrome)的Console——浏览器总有吧,打开浏览器,浏览本地图片,进Console,打开Source,复制图的Base64。

要是没有Chrome,其他的浏览器总有吧,找到浏览器的Console就行了。

要是所有的浏览器都没有Console,或者浏览器的Console不支持转换成Base64编码,同时这个电脑上又没有相应软件,且不能联网——应该不存在这样的电脑吧?如果有,别用了。