看工具链接请直接将文章拉到最后..

概述

不知道你在使用markdown写文章的时候有没有遇到过这样的烦恼, 文件写完了, 想将写完的文章粘贴到博客的时候, 你满心欢喜的复制粘贴, 但是发现图片根本复制不过去, 是不是很难受, 尤其对于我这种使用markdown写文章, 写完后想把文章发表到多个平台的人来说(毕竟是自己辛辛苦苦写的, 总希望更多的人能看到嘛), 着实麻烦.

那么, 针对这种情况, 有没有什么解决办法呢? 解决办法如下:

  1. markdown文件中的图片使用在线地址
  2. 将markdown文件中的图片进行base64编码

先来看看第一种解决办法, 将图片使用在线地址固然可以解决问题, 而且现在很多markdown文件都支持已将将图片进行上传, 但是这个解决办法在我看来有一个问题, 万一那天服务器不能用了, 那 之前辛辛苦苦的各种文章都失去配图了

对于第二种办法, 我觉得挺好, 直接将图片写入到markdown文件中, 给别人发送的时候也不用连着图片的文件夹一起发送了

原来在markdown文件中插入图片, 格式如下:

![图片](url)

如果使用图片的base64编码, 如下:

![图片](data:image/png,base64,iGmCV...)
![图片][id]
[id]:data:image/png,base64,iGmCV...

对图片进行base64编码的话, 其实有很多在线的网站可以做到, 但是每一次手动去做这个操作, 还能不能让我好好写文章了, 作为一个程序员, 这怎么能容忍.

到网站搜一下, 有没有能够将markdown文件中的图片一键进行base64编码的工具, 抱歉, 没有找到, 那怎么办呢? 自己写一个呗!

流程分析

其实整体流程还是很简单的:

  1. 分解出文章中的图片
  2. 对图片进行base64编码
  3. 将编码后的字符串替换文章中图片的url

但是, 我又发现一个新的问题, 图片base64编码后的字符串很长, 所以就需要进行图片的压缩, 那就再1-2步骤中间再加一个图片压缩的流程.

程序介绍

本程序允许自行扩充图片的压缩方法, 目前仅支持一种方法, 调用tinypng的接口, 若要使用, 请再文件中的key替换成自己的

当然, 也可以添加自己压缩图片的方法

不写也可以, 会直接对原图片进行编码, 可能字符串会有点长, 嘿嘿

程序链接:

  1. 码云: https://gitee.com/hujingnb/markdownImage

若使用过程中遇到问题或新的需求, 可以给我留言, 或者你直接改也可以.

MD文件图片base64自动编码的更多相关文章

  1. 解决github pages和github .md文件图片不显示

    博客园上传的图片,在github上无法显示. 在github项目下建立img文件夹,放上图片 两种方式 项目绝对路径 https://raw.githubusercontent.com/用户名/项目名 ...

  2. Git学习:如何在Github的README.MD文件下添加图片

    格式如下: ![image](图片的绝对路径) 关于图片的绝对路径: 必须把图片上传到github的代码仓库里,再将其图片的网址复制到括号里才可以,不能够直接把图片复制到readme.md文件里面,这 ...

  3. js 图片base64转file文件的两种方式

    js 图片base64转file文件的两种方式 https://blog.csdn.net/yin13037173186/article/details/83302628 //将base64转换为bl ...

  4. EF+LINQ事物处理 C# 使用NLog记录日志入门操作 ASP.NET MVC多语言 仿微软网站效果(转) 详解C#特性和反射(一) c# API接受图片文件以Base64格式上传图片 .NET读取json数据并绑定到对象

    EF+LINQ事物处理   在使用EF的情况下,怎么进行事务的处理,来减少数据操作时的失误,比如重复插入数据等等这些问题,这都是经常会遇到的一些问题 但是如果是我有多个站点,然后存在同类型的角色去操作 ...

  5. jquery 图片文件转base64 显示

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  6. 【GitHub】给GitHub上的ReadMe.md文件中添加图片怎么做 、 gitHub创建文件夹

    1.首先在github上的仓库上,创建一个空的文件夹,用于上传图片 上图看 要点击的按钮是创建新的文件,并不是创建新的文件夹,具体怎么?往下看 这个时候,下面的提交按钮才能提交 2.进入新创建的文件夹 ...

  7. ASP.NET、JAVA跨服务器远程上传文件(图片)的相关解决方案整合

    一.图片提交例: A端--提交图片 protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { string u ...

  8. .md文件的语法

    md全称是Macdown,.md文件可以当记事本一样使用,作为编辑软件,还可以自己添加样式,图片,链接等,可以用记事本打开,也可以保持样式排版转换为html文件,语法比较简单..md除了编辑容易的优势 ...

  9. Markdown语言.md文件

    转自:http://www.kuqin.com/shuoit/20141125/343459.html 之前一直在使用github,也在上面分享了不少的项目和Demo,每次创建新项目的时候,使用的都是 ...

随机推荐

  1. iozone - a filesystem benchmark tool 主要是用来测试文件系统 性能

    简介:    磁盘设备之上是文件系统,测试磁盘的工具往往就是调用块设备驱动的接口进行读写测试.而文件系统的测试软件就是针对文件系统层提供的功能进行测试,包括文件的打开关闭速度以及顺序读写随机位置读写的 ...

  2. opensciencegrid - GridFTP 安装

    最近配置一个GridFTP 用于测试其传输FTP性能, 在这里简单记录,备忘:使用本教程可以简单起一个GridFTP用于测试服务: 预配置环境: 测试系统:CentOS 7 1806 配置Yum仓库: ...

  3. LInux:YUM源安装工具的配置及使用

    YUM源的设置及使用 YUM工具简介 (1)YUM(Yellow dog Upadate Modifie)是改进版的 RPM 管理器,很好地解决了 RPM 软件包的依赖问题. (2)YUM 可以从很多 ...

  4. optix之纹理使用

    1.在OpenGL中生成纹理texture optix中的纹理直接使用OpenGL纹理的id,不能跨越OpenGL纹理,所以我们先在OpenGL环境下生成一张纹理. 这个过程就很熟悉了: void W ...

  5. springmvc的文件上传和JWT图形验证码

    相关pom依赖 <dependency> <groupId>commons-fileupload</groupId> <artifactId>commo ...

  6. 微信小程序支付功能讲解(1)

    前言:虽然小程序做过很多,但是一直觉得微信支付功能很是神秘,现在终于有机会接触心里还是有点小激动的,经过一番折腾发现支付也不过如此,在此记录下支付功能的实现过程 小程序的官方文档介绍到发起微信支付即调 ...

  7. 166. 数独 dancing links 方法

    dfs硬怼通过数独 N皇后的代码后 想学习下新的数据结构和算法来解决这类覆盖问题 习题练习 https://www.acwing.com/problem/content/168/ 数独 https:/ ...

  8. IDEA2019 Maven项目出现Unable to import maven project: See logs for details解决办法

    问题1:Unable to import maven project: See logs for details 网上说,原因是IDEA2019和Maven3.6.2不兼容导致的,需要把Maven降级 ...

  9. vue框架学习笔记(vue入门篇)

    vue框架 - 构建用户界面的渐进式框架 - 采用自底层向上增量开发的设计 - 核心库只关注视图层 - 当与单文件组件和vue生态系统支持的库结合使用时,也完全能够为复杂的单页应用程序提供驱动 - v ...

  10. 【2019.8.15 慈溪模拟赛 T2】组合数(binom)(卢卡斯定理+高维前缀和)

    卢卡斯定理 题目中说到\(p\)是质数. 而此时要求组合数向质数取模的结果,就可以用卢卡斯定理: \[C_x^y=C_{x\ div\ p}^{y\ div\ p}\cdot C_{x\ mod\ p ...