markDown图片转Base64编码工具说明

前言

本工具为markDown图片引用转为图片Base64编码,并使用标签进行图片统一管理。

引言

markDown图片引用一共有三种方式,本地路径(相对路径\绝对路径)、网络路径、base64编码。各种方式优缺点见下表。

方式优点缺点
本地路径引用方便、管理方便分享文章时需要管理图片资源文件
网络路径引用方便、管理方便、分享方便需要公网服务器
base64编码分享文章不需要额外资源文件管理不便、文章本身大

本工具采取图片标签方式将图片引用转换为base64编码,并将base64编码统一放在文章最后进行管理。

环境

  • python3.10.8
  • typora1.9.4

主要参考

说明

补充说明

由于手机版无法在文章中查看到文章绑定的资源,因此将本文章资源链接放在文章中(资源完全免费、不需要积分),由于本人水平有限且当前版本足够当前使用,请有特殊要求自身修改。2024年7月22日。
markDown图片转Base64编码工具

标签名

标签名默认为Imgx格式,x为图片所处序号,初始值为1。

base64位置

base64位置放在文章最后,按照图片顺序排列。

转换

工具默认使用base64编码在源文件中进行替换。

工具使用

  • 转换

运行markDown图片转换.exe,选择转换文件路径,点击开始转换。

  • 重命名

重命名中输入文件名,工具将在转换路径下创建转换后对应md文件。(不会修改转换文件)

  • 目录说明
C:.
│  tree.txt
│  工具说明.md
│  
├─exe
│      markDown图片转换.exe
│      
├─src
│  │  截图转base46.py
│  │  截图转base46ui.py
│  │  截图转base46ui.spec
│  │  
│  ├─build
│  │  └─截图转base46ui
│  │      │  Analysis-00.toc
│  │      │  base_library.zip
│  │      │  EXE-00.toc
│  │      │  PKG-00.toc
│  │      │  PYZ-00.pyz
│  │      │  PYZ-00.toc
│  │      │  Tree-00.toc
│  │      │  Tree-01.toc
│  │      │  Tree-02.toc
│  │      │  warn-截图转base46ui.txt
│  │      │  xref-截图转base46ui.html
│  │      │  截图转base46ui.pkg
│  │      │  
│  │      └─localpycs
│  │              pyimod01_archive.pyc
│  │              pyimod02_importers.pyc
│  │              pyimod03_ctypes.pyc
│  │              pyimod04_pywin32.pyc
│  │              struct.pyc
│  │              
│  └─dist
│          截图转base46ui.exe
│          
└─test
    │  input.md
    │  
    ├─image1
    │      Image1.png
    │      
    ├─image2
    │      Image2.png
    │      
    └─image3
            Image3.png

测试

  • 转换

    • 运行截图转base46ui.exe
    • 文件路径选择test\input.md文件
    • 点击开始转换
  • 重命名

    • 运行截图转base46ui.exe
    • 截图转base46ui.exe
    • 重命名输入output
    • 点击开始转换

    test文件夹中为测试数据,input(cope).md为测试文件。

注意

  • 由于图片数据转换为base64数据后会导致文件变大,typora会无法打开。

  • 转换相对路径时请保证转换工具和转换文档在同一文件夹下。

    test文件夹中为测试数据,input(cope).md为测试文件。

注意

  • 由于图片数据转换为base64数据后会导致文件变大,typora会无法打开。
  • 转换相对路径时请保证转换工具和转换文档在同一文件夹下。
要在Vue中使用`vue-markdown`实现粘贴图片Base64位的功能,您可以使用第三方库`vue-simplemde`来实现。以下是一个简单的示例: 1. 首先,使用npm或yarn安装`vue-simplemde`: ``` npm install vue-simplemde ``` 2. 在您的Vue组件中,导入并注册`vue-simplemde`: ```javascript import VueSimplemde from 'vue-simplemde'; export default { components: { VueSimplemde, }, }; ``` 3. 在模板中使用`vue-simplemde`: ```html <template> <div> <vue-simplemde v-model="markdownText" @paste="handlePaste"></vue-simplemde> </div> </template> ``` 4. 在Vue组件的`data`中定义`markdownText`,用于存储Markdown文本: ```javascript export default { data() { return { markdownText: '', }; }, }; ``` 5. 在Vue组件中定义处理粘贴事件的方法`handlePaste`,将粘贴的图片换为Base64位: ```javascript export default { methods: { handlePaste(event) { const items = (event.clipboardData || event.originalEvent.clipboardData).items; for (let i = 0; i < items.length; i++) { const item = items[i]; if (item.kind === 'file' && item.type.indexOf('image') !== -1) { const reader = new FileReader(); reader.onload = (e) => { const base64Image = e.target.result; // 将base64Image插入到markdownText中 this.markdownText += `![Image](${base64Image})`; }; reader.readAsDataURL(item.getAsFile()); } } }, }, }; ``` 通过以上步骤,您可以在Vue中使用`vue-simplemde`实现Markdown编辑器,并在粘贴图片时将其换为Base64位。请注意,您可能需要根据您的项目需求进行进一步的配置和样式调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值