github 下载地址:https://github.com/HappyFreeAngel/markdown-auto-import-image-as-base64.git
Typora 官网地址: https://typora.io/
传统的markdown 添加图片有3种方法:
- Alt text:图片的Alt标签,用来描述图片的关键词,可以忽略不写。图片链接:可以是图片的本地地址或者是网址。“optional title”:鼠标悬置于图片上会出现的标题文字,可以不写。
插入本地图片
只需要在基础语法的括号中填入图片的位置路径即可,支持绝对路径和相对路径。 例如:
不灵活不好分享,本地图片的路径更改或丢失都会造成markdown文件调不出图。
-
插入网络图片
只需要在基础语法的括号中填入图片的网络链接即可,现在已经有很多免费/收费图床和方便传图的小工具可选。 例如:
将图片存在网络服务器上,非常依赖网络。 -
把图片存入markdown文件
用base64转码工具把图片转成一段字符串,然后把字符串填到基础格式中链接的那个位置。
基础用法: 这个时候会发现插入的这一长串字符串会把整个文章分割开,非常影响编写文章时的体验。如果能够把大段的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}
相关代码请见github 链接
happy:base64image happy$ tree
.
├── base64img.sh
└── examples
├── 2.md
├── base64img.sh -> …/base64img.sh
├── image
│ ├── 1555555321007.png
│ ├── 1555569777033.png
│ ├── 1555569794735.png
│ └── 1555570835403.png
├── origin.md
└── test.sh
happy:examples happy$ more test.sh
#!/bin/bash
cp origin.md 2.md ;./base64img.sh -f 2.md -i image -s 100
happy:examples happy$ ./test.sh
参数说明: -i 图片路径 -s 空行数量
this is -f the arg is ! 2.md
this is -i the arg is ! image
this is -s the arg is ! 100
文件名=/Users/happy/work/supper-tool/supper-tool/app/base64image/examples/2.md image_path=image space_line_count=100