MarkDown批量自动添加base64图片

最新推荐文章于 2024-04-30 22:21:11 发布

开心自由天使

最新推荐文章于 2024-04-30 22:21:11 发布

阅读量2.4k

点赞数

分类专栏：常用工具经验分享 MarkDown 文章标签： markdown base64 typora markdown工具

本文链接：https://blog.csdn.net/happyfreeangel/article/details/89409593

版权

常用工具同时被 3 个专栏收录

61 篇文章 0 订阅

订阅专栏

经验分享

18 篇文章 0 订阅

订阅专栏

MarkDown

1 篇文章 0 订阅

订阅专栏

github 下载地址:https://github.com/HappyFreeAngel/markdown-auto-import-image-as-base64.git

Typora 官网地址: https://typora.io/

传统的markdown 添加图片有3种方法:

Alt text：图片的Alt标签，用来描述图片的关键词，可以忽略不写。图片链接：可以是图片的本地地址或者是网址。“optional title”：鼠标悬置于图片上会出现的标题文字，可以不写。

插入本地图片
只需要在基础语法的括号中填入图片的位置路径即可，支持绝对路径和相对路径。例如：
avatar
不灵活不好分享，本地图片的路径更改或丢失都会造成markdown文件调不出图。

插入网络图片
只需要在基础语法的括号中填入图片的网络链接即可，现在已经有很多免费/收费图床和方便传图的小工具可选。例如：
将图片存在网络服务器上，非常依赖网络。
把图片存入markdown文件
用base64转码工具把图片转成一段字符串，然后把字符串填到基础格式中链接的那个位置。

基础用法： avatar 这个时候会发现插入的这一长串字符串会把整个文章分割开，非常影响编写文章时的体验。如果能够把大段的base64字符串放在文章末尾，然后在文章中通过一个id来调用，文章就不会被分割的这么乱了。
高级用法比如： ![avatar][base64str] [base64str]:data:image/png;base64,iVBORw0…

Mac,Linux, Windows 下都可以安装base64命令工具，许多网站也提高图片转换为base64, 但是用起来都非常麻烦，特别是当图片很大时，处理起来效率非常低。

最近我们在整理书写devops资料时，用到了一个Typora MarkDown 编辑软件，
在这里插入图片描述

在这里插入图片描述

该软件支持中文,且支持个性化设置图片目录，文档编写人员编写起来得心应手，热情满满的。
但是就是有个问题，如何变成可以git 管理的纯文本内容呢?
也就是说，如何把图片自动化转换为base64文本放入内容里呢。

经过多次尝试，写了一个辅助工具，实现了此功能。
more base64img.sh

#!/bin/bash

#确保shell 切换到当前shell 脚本文件夹
current_file_path=$(cd "$(dirname "$0")"; pwd)
cd ${current_file_path}

MARKDOWN_FILE_NAME=""

#图片默认是当前目录
IMAGE_PATH=${current_file_path}
SPACE_LINE_NUMBER=100

echo "参数说明: -i 图片路径 -s 空行数量"
while getopts "f:i:s:" opt; do
  case $opt in
    f)
       MARKDOWN_FILE_NAME=$OPTARG
       echo "this is -f the arg is ! $OPTARG"
       ;;
    i)
       IMAGE_PATH=$OPTARG
       echo "this is -i the arg is ! $OPTARG"
       ;;
    s)
      #图像数据之前的空行数量，默认20行
      SPACE_LINE_NUMBER=$OPTARG
      echo "this is -s the arg is ! $OPTARG"
      ;;
    \?)  #没有的参数，会被存储在?中
      echo "Invalid option: -$OPTARG"
      ;;
  esac
done

if [[ ! -f $MARKDOWN_FILE_NAME ]];
then
  echo "请输入markdown 文件名"
  exit 1
fi

MARKDOWN_FILE_NAME=$current_file_path/$(basename "$MARKDOWN_FILE_NAME")
echo "文件名=$MARKDOWN_FILE_NAME image_path=$IMAGE_PATH space_line_count=$SPACE_LINE_NUMBER"

cd ${IMAGE_PATH}
image_file_list=$(ls)

for imagefile in $image_file_list
  do
     filename=$(basename "$imagefile")
     fileType="${filename##*.}"
     fileType=$(echo $fileType | tr '[:upper:]' '[:lower:]')
     #filename=$(basename "$imagefile")
     filename_without_extension="${filename%.*}"

     if [[ ($fileType = "jpg") || ($fileType = "jpeg") || ($fileType = "png") || ($fileType = "gif") || ($fileType = "svg") || ($fileType = "webp") || ($fileType = "bmp") || ($fileType = "tif") ]];
     then
         ##![1555555321007](1555555321007.png)
        OLD_IMAGE_PLAYHOLD="\\!\\[${filename_without_extension}\\]"
        NEW_IMAGE_PLAYHOLD="![avatar][${filename_without_extension}]"
        sed -i '' -e "s|$OLD_IMAGE_PLAYHOLD|$NEW_IMAGE_PLAYHOLD|g" $MARKDOWN_FILE_NAME
     fi
  done


#for 循环
for ((i=1; i<=$SPACE_LINE_NUMBER; i++))
  do
    echo -e "\n" >> $MARKDOWN_FILE_NAME
  done


for imagefile in $image_file_list
  do
     filename=$(basename "$imagefile")
     fileType="${filename##*.}"
     fileType=$(echo $fileType | tr '[:upper:]' '[:lower:]')
     #filename=$(basename "$imagefile")
     filename_without_extension="${filename%.*}"

     if [[ ($fileType = "jpg") || ($fileType = "jpeg") || ($fileType = "png") || ($fileType = "gif") || ($fileType = "svg") || ($fileType = "webp") || ($fileType = "bmp") || ($fileType = "tif") ]];
     then
         base64Content=$(base64 $imagefile)
        echo "[${filename_without_extension}]:data:image/${fileType};base64,${base64Content}" >> $MARKDOWN_FILE_NAME
     else
        echo "很抱歉,${imagefile}是图片文件吗？${fileType}格式目前不支持."
     fi

  done

cd ${current_file_path}