Markdown中嵌入Base64图片

发表于 分类于

 

前言说明

  1. 把图片转换为 Base64 代码，可以解决 Markdown 难以内嵌图片的痛点
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 插入本地图片（不好分享，本地图片路径更改和丢失，都会导致图片无法加载）
![text](./1.png)

# 插入网络图片（需将图片先上传至网络）
![text](http://leux.cn/1.png)

# 插入图片的Base64码
![text](data:image/jpeg;base64,iVBORwo...)

# Base64字符串过于长, 可在末尾设置一个id来调用
![text][id_0]
......
[id_0]:data:image/x-icon;base64,iVBORwo...

  1. 但经过 Base64 编码后的图片体积一般比源文件大30%左右，且加载时显示很缓慢

  2. 那么如何在网络中使用 Base64 编码后的图片呢？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 由 data:前缀、MIME类型（表明数据类型）、base64标志位（如果是文本则可选）以及 数据本身 四部分组成。
data:[<mime type>][;base64],<data>

# Base64 在 CSS 中的使用：
background-image: url("data:image/bmp;base64,iVBORwo...");

# Base64 在 HTML 中的使用：
<img src="data:image/png;base64,iVBORwo..." />

# Markdown中插入Base64图片的方法：
![text](data:image/webp;base64,iVBORwo...)

# Base64代码太长会影响读写，可为图片代码设置 image_id，然后将这段Base64代码放在最后即可
![image][image_id]
......可以把下面这段图片代码放在最后......
[image_id]:data:image/gif;base64,iVBORwo...

转换方式

  1. 一些在线网站即可 将Picture转Base64

  2. Python代码Base64转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 图片转为Base64
file = open('/home/picture/0.png', 'rb')      # 二进制只读方式打开文件  
base_file = base64.b64encode(file.read())  
file.close()
txt = open('/home/picture/0.txt', 'wb') 
txt.write(str(base_file))
txt.clost()

# Base64转为图片
base_file = 'fasDWkkS.....'
imgData = base64.b64decode(base_file)
file = open('/home/picture/1.png', 'wb')
file.write(imgData)
file.close()

  1. 在PowerShell中转换图片为Base64码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 将图片转为Base64数据，以储存在 C:\脚本路径\pic2base64.ps1 为例
param(
    [string]$imagePath
)

# 读取图片文件并转换为Base64编码
$imageBytes = [System.IO.File]::ReadAllBytes($imagePath)
$base64String = [Convert]::ToBase64String($imageBytes)

$imageTag = "data:image/jpg;base64,$base64String"	# 为Base64图片添加头

Set-Clipboard -Value $imageTag				# 将结果复制到剪贴板

###############################################################################
# 在注册表 【计算机\HKEY_CLASSES_ROOT\SystemFileAssociations\image\shell\】中新建【项】名称为【CopyAsBase64】，默认的数据为【复制为Base64】
# 然后在【CopyAsBase64】下新建【项】名称为【command】，默认的数据为【powershell.exe -ExecutionPolicy Bypass -File "C:\脚本路径\pic2base64.ps1" %1】

成果展示

image

这样就可以方便的将图片嵌入Markdown文档中了