md文件中图片转换工具

工具连接：https://tanatc.github.io/mdFileImagesProcess/md_change_img.html

附图文章说明链接：https://tanatc.github.io/mdFileImagesProcess/

1.工具开发背景

平时使用 typora 写文档上传git或者其他平台，但是 md 文件中图片的引用是一个资源地址，在当前本地中打开文档没有任何问题，一旦将 md 文件上传到 git 或者复制到其他平台发布问题就暴露了，图片会无法显示。问题原因是 md 文件中对图片的引用是将图片在本地的地址引用，如下图所示。将文档上传 git 或者其他平台后这个资源地址就找不到了。

解决方案有三个：

方案1：在当前文档所在的地址创建一个图片文件夹，然后将所有图片放入该文件夹中，上传git时把图片文件夹一并上传。但此方案存在如果是写博客文章之类的就无法上传图片文件夹。

方案2：将图片上传至某个服务器或者网盘，然后图片资源地址是 http:..... ，一个链接的形式，我尝试把图片上传到 QQ 空间，然后 md 文件中引用图片链接，本地可以显示，但是上传 git 后会被禁止查看。

方案3：将图片转为 base64 格式插入 md 文件中，这种方式对于本地或者上传git乃至其它平台都是一劳永逸，不用管理保存图片，担心某天图片丢失，文档将再也无法展示图片。但是有个缺点就是 base64 格式的图片字符串长度极长，因此也可以将图片放到文档最后，然后利用引用图片 id 方式引用图片。这个又有两种方式：

方式1、直接在图片资源处写base64字符串：![图片](data:image/jpg,base64,fafdsa...)
方式2、在文档末尾用链接引用：[id]:data:image/jpg,base64,fafdsa...
      在图片处引用图片链接：![图片][id]

这里的图片转换工具采用了方案3的原理，将图片转为base64格式保存于文档中。

2.功能说明

本人使用 windows 系统，因此在开发中对图片地址的处理均采用的 windows 地址转换，希望有使用其他系统的小伙伴可以对此工具进行修改，或者在使用过程中遇到什么问题有什么建议都可以提 issue 给我。

功能有两个，一是直接在原地将图片改为 base64 格式；二是将 base64 格式的图片链接引用在文档末尾，原图片处采用图片id格式，您可以根据个人喜好采用任意一种替换形式。

3.使用步骤

下载或克隆本仓库，浏览器打开其中的 md_change_img.html 文件。

打开后的界面如图所示，会有步骤指引。

第一步选择md文件，打开md文件并成功读取其中所有图片地址后会在文本框中展示当前的md文档内容，并且下面会显示一个当前文档中图片位置或者图片文件夹位置。

第二步则将图片文件夹地址复制到打开界面的地址栏中，全选图片文件夹中的图片，然后点击打开。

![image][image-20211010215750316.png]

第三步点击任一种图片替换方式按钮，成功后会输出替换后的文档。

![image][image-20211010220114339.png]

第四步将第三步中输出的文档全部复制回 typora ，在 typora 中图片正常显示则整个过程成功，没有显示图片则整个过程失败，可以将问题反馈到 issue 中。

4.本仓库中README.md、m1.md、m2.md均为本工具转图片后的文件，m1是直接替换方式的文件，在本地显示有两张图片有问题，git上可正常显示（目前还没弄清楚为什么本地无法正常显示图片）；m2文件是引用链接方式替换的文件，在本地和线上均可正常显示，因此推荐文末引用图片方式替换图片。