学习笔记

用Base64编码插入Markdown图片

jxtxzzw

点击量:358

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

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

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

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

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

幸运的是,今天看到了一个用Base64编码插入Markdown图片的方法。

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

比如

sp170220_193723

转换成Base64编码,是

iVBORw0KGgoAAAANSUhEU请勿采集与复制,转载请注明出处gAAAFIAAAAhCAYAAABKmvz0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAHmkl反采集功能启动EQVRoge2YW0jU2xfHPzOaDeZkiopOWoZ5TfNWYdlDiiiE2cOIJKKYZBMa欢迎访问jxtxzzw个人博客SA9iYFAPCUUQGY1p2eUh0IQirR6yoJuRomneLXRykFRMpxkddbJxfuchHM4csxyTc/719wP7Zdba67f3d9be欢迎访问jxtxzzw个人博客e+0tEgRBYIVfRvxfD+BPYUXIZWJFyGViRchlYkXIZWJFyGViRchlYkEhBUGgrq6Ohw8fYjQa/80x/ZbYLmSYnJzk9u3bTExMEB0dzbp166wObjAYAJBIJEsf4W+C6Ec3m4GBAQwGA5s3b0YkElkVWBAElEolXl5e7N+//5cH+r/OghkJ4OXlteTAWq2WN2/e/FKM34kFM/LLly8olUoAcnNzAbh69SofPnygoKAANzc3s68gCCopyright Reserved @jxtxzzwFRXV/P48WPy8/MxmUyUlpby4sUL3NzPowered by jxtxzzwccHJyAiA9PR0PDw+Ki4vZu3cv+/fvt8j0kZERzp49S0hICBkZGXR1dXHu3LnvDlwmk3H8+HEkEglKpZLW1tbv+qWnp+Pk5MTFixfJz88nODjYbJuZmeH请勿采集与复制,转载请注明出处y5cvmOXl4eJhto6OjnDlzhqioKJKTk38q5A8PG41Gg0ajQRAEVq9eTXJyMsPD欢迎访问jxtxzzw个人博客w5SXlzMzM2P27ejoQKlUkpCQwMaNG1Gr1Tg7O2NnZ4ePjw87d+5k586duLi4EBQURGxsLMXFxXR0dFhMqry8nImJCRITExGLxTg4OJj7zrXQ0FAGBwfR6/XY2NggFovx9fWd57d27VrevXuHjY0N7u7uTE5O0t7ebj请勿采集与复制,转载请注明出处HHkZERnj9/Tl1dHX19fRY2tVpNfX09mzZt+qmI8JOl/U/c3d3Jy8ujsLCQHTt2Ehttps://www.jxtxzzw.comBcXh0ajQalUsmvXLuLi4hCJRMTExODt7U1dXR179uyZt0cmJSXR3d1NWVkZRUVFODo6Ultby9OnTykqKsLFxQUAb29vjhw5Yu4nCAL3798H4PDhwzg4OACwb98+i/ijo6M0NzeTlJREdHQ0JpOJgIAAOjs7MRgM5sOvp6cHqVRKVFQUjY2NREVFYWv7TZLW1lY2bNiw6K3J6joyIiICuVxOSUkJfX193LlzB41GQ3Z2Nvb29ouKYW9vT请勿采集与复制,转载请注明出处0ZGBoODg1RVVdHX18f169dJSCopyright Reserved @jxtxzzw0tj+/btC/br6+vjypUr5ObmWizRv2M0GqmsrGR2dpbs7Gzs7OyQSCRs2bI反采集功能启动FlUrF+Pg4AF+/fqW+vp7g4GBiY2Npa2tjYmIC+FZtqFQqgoKCzNvSz7BaSFtbW1JTU5HJZBQUFHD37l2OHTuGp6enVXF8fHzIycmhqqqKgoICAgICSElJWbA60Ol0XLhwgcCopyright Reserved @jxtxzzwjISOLj4xf0e/bsGdXV1SgUClxdXc2/h4SEMDQ0xMDAAACfP3+mq6uL8PBwgoKCGBoaQqVSATA2NkZPTw8hISGsWrVqUfNZ0s3G0dGRgwcPMjw8zLZt2wgPD19KGHbv3k1UVBTDw8PI5fIFM9poNFJVVcXg4CAZGRkL+vX391NSUoJcLiciIsLCJpPJ8PT0NB9K79+/x2AwEBAQwPr16/Hx8eHt27cIgsDHjx/R6XT4+/svei5LElKv11NRUYG7uzstLS20tbUtJQxNTU3U19fj7u5OTU0NU1NT3/Vrbm6mqqqKnJwcfHx8vuszNTXFjRs3kMlkpKammve6OaRSKf7+/qhUKiYnJ3n9+jVhYWG4ubkhlUqJjIykubkZvV5PR0cHfn5+rF+/反采集功能启动ftFzsVpIo9FIRUUFKpWKoqIiEhMTKS4uZnh42Ko4/f39nD9/HrlcTlFREe3t7dTU1PDPamx0dJTy8nISEhLYs2fPd2MJgsCTJ09oamri6NGjODo6zvNZtWoVISEh9PT08P79e9ra2ggNDcXOzg6AyMhIent76ezspLOzk8DAQPNhthisFnIuO7KysvD39yc5OZk1a9ZQWlpqvhICiMVibG1tMZlM82LMZY+bmxspKSn4+fmRmZnJtWvXaG5uNvsZjUZu3rwJQGZm5rwsm+Pdu3eUlZWhUCh+uBz9/f3R6/W0tLQwPT3N1q1bzbYNGzYgk8moq6tDrVYTFhZm1W3OKiE/ffpEWVkZMTExxMfHA+Di4oJCoeDVq1fU1taaM8rV欢迎访问jxtxzzw个人博客1RVfX18ePHhAb28vWq2Wz58/IwgCtbW1vHjxgtzcXJydnRGJRMTHxxMdHU1ZWRmjo6PAt4PjwYMHyOVybG1t0Wq15qbT6TCZTOh0Oi5duoSfnx/btm1Dp9NZ+P39z53bC0tKSggICLAowNetW0dkZCT37t1DLBYvun60WsiZmRmuXr2KwWAgKyvLvCTgW0mUlpbGlStXzIWtvb09aWlpjI2NceDAAeLi4rh16xYdHR0UFxejUCgsShiJRMKhQ4fQarVUVlZiNBrp7u5Gr9dTWFhIXFycRcvLy2N8fByNRkN/fz8vX74kKSlpnt+jR4/M33BwcCAwMBCA7du3WzymiEQiIiIiMBqNeHl5Wf1Is+AV0WAwcPr0aQBOnDix5Bcck8lkrs+kUili8Z/5BGrVzWYpiMXi727+fxoLpsfs7CzT09NIJBJsbGz+zTH9lszLyIaGBlpaWlCr1TQ0NHDq1KlFV/f/z8zLSJPJRGNjI1NTU5w8eXLB2m0FS374Qr7C请勿采集与复制,转载请注明出处4vkzj9D/gBUhl4kVIZeJFSGXib8Ax7wacMdUd3oAAAAASUVORK5CYII=

原来src的括号里,先写上

data:image/png;base64,

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

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

就像整个样子。

sp170220_194346

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

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

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

我们可以这么做。

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

这是jxtxzzw的个人博客

写上

![alt][img1]

sp170220_194820

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

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

sp170220_194811

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

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

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

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

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

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

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

0 条回应