在Markdown中使用base64存图片

使用markdown最大的痛点之一就是上传图片时需要额外的图床, 而图床又很容意出问题导致图片丢失.

如果可以把图片以base64的方式存在markdown文件中, 就可以省去寻找可靠图床的麻烦.

本文会介绍一个可行的在markdown中使用base64存储图片的方案

什么是Data URL

简单来说, 就是先把图片或附件转成base64, 再利用类似 data:[<mediatype>][;base64],<datat> 的形式在html中展示.

DataURL可以方便的将附件以纯文本的形式在网页上保存, 这正是我们想要的.

但需注意, DataURL的缺点也很明显, base64编码后文件体积会大上30%, base64格式的图片在浏览器上加载缓慢, base64过长的编码会让html文件难以编辑等.

图片转base64

有很多在线的工具都可以进行图片到base64的转换.

为了离线方便, 还可以使用如下的python代码将图片转成data_url的形式:

import tkinter as tk

from tkinter import filedialog, messagebox

import pyperclip

import cv2

import os

import base64

import tempfile

from pathlib2 import Path

class ImageBase64Optim:

    # base64 前缀

    @classmethod

    def get_img_base64_prefix(cls, img_type):

        img_type_map = {

            'jpg': 'data:image/jpeg;base64,',

            'jpeg': 'data:image/jpeg;base64,',

            'png': 'data:image/png;base64,',

        }

        return img_type_map[img_type.lower()]

    # 短边1080

    @classmethod

    def shot_edge_resize(cls, img, short_edge=720):

        h,w,_ = img.shape

        if max(h,w) < short_edge:

            return img

        if w <= h :

            w2 = short_edge

            h2 = int( short_edge * h / w + 0.5)

        else:

            w2 = int( short_edge * w / h + 0.5 )

            h2 = short_edge

        img = cv2.resize(img,(w2,h2))

        return img

    # 低质量的jpg

    @classmethod

    def trans_to_low_quality_img(cls, img_path, tmpimg):

        img = cv2.imread(img_path)

        img = ImageBase64Optim.shot_edge_resize(img)

        cv2.imwrite(tmpimg,img,[cv2.IMWRITE_JPEG_QUALITY, 55])

    @classmethod

    def base64_img(cls, img_path):

        """

        拿到图片的base64编码结果

        :param img_path 图片路径

        :rtype: str

        """

        with tempfile.NamedTemporaryFile(mode='a+',suffix='.jpg',delete=False) as tmpimg:

            tname = tmpimg.name

            ImageBase64Optim.trans_to_low_quality_img(img_path,tname)

            with open(tname, 'rb') as f:

                compress_img_content = f.read()

            # 对图片内容编码

            ret_str = cls.get_img_base64_prefix(os.path.splitext(tname)[1][1:]) + str(base64.b64encode(compress_img_content), 'utf-8')

        os.remove(tmpimg.name)

        return ret_str

def process(img_path: str):

    # img_path = Path('./Microsoft_Nostalgic_Windows_Wallpaper_4k.jpg')

    img_path = Path(img_path)

    ret = ImageBase64Optim.base64_img(img_path.as_posix())

    return ret

def run_gui():

    window = tk.Tk()

    window.withdraw()

    img_file_path = filedialog.askopenfilename()

    ret = process(img_file_path)

    pyperclip.copy(ret)

    messagebox.showinfo(message="base64 already copy.")

def run_cli():

    img_file_path = filedialog.askopenfilename()

    ret = process(img_file_path)

    print(ret)

if  __name__=='__main__':

    run_gui()

为了让base64编码后的图片体积不过于庞大.

在此代码中, 对于过大的输入图片会将其缩放到短边1080像素, 同时还在进行jpeg编码的过程中降低了原有图像质量.

具体来说, 对于输入的4k大小的图片编码后的base64大小可以控制在300k左右, 图像质量会有些许损失, 不过对于个人blog来说, 还是足够使用的.