使用ShareX和Markdown Image自动压缩截图为WebP格式并一键插入Markdown文档

之前我曾安利过 PasteImage 这个插件,用 VSCode 写博客/文档的时候,用它可以很快捷地在md文档中插入图片。

受某个友人影响,我也开始尝试 拥抱 webp了,近期的文章内的图片都已经压缩成了 webp 格式。但是 PasteImage 却不支持 webp 格式,于是我又想办法整出了今天这个解决方案,实现完全自动化的 压缩+插入图片。

配置 ShareX

sharex 是一个强大的截屏、录屏、分享软件,开源免费,支持高度自定义的自动化,

然后还要安装 ffmpeg ,它在本文的作用是通过命令调用来压缩图片。如果你没了解过它的话不妨去搜索一下,也是一个十分强大的工具。

然后在 sharex 的动作设置中,添加一个动作

图 2
  • 名称: 随意
  • 文件路径: ffmpeg 的安装路径,要指定到 ffmpeg 可执行文件
  • 参数: -i "$input" -q 75 "$output" 其中 -q 75 是以75%质量压缩
  • 输出文件扩展名: webp
  • 扩展名筛选: png

勾上下面的 隐藏窗口 和 删除输入文件

图 3 然后在截图后的任务里选中这些项(添加图像特效可视情况自行添加)

图 4

配置 Markdown Image

Markdown Image 是一个 VSCode 插件,支持将剪贴板中的图片保存在指定路径下(或指定图床中),并自动生成 markdown 格式的引用。

我的博客的文章图片是按照 /public/photo/post-pics/文章名/文章名_时间 的格式和路径保存在本地的,所以按照下面这样配置

json
"markdown-image.base.fileNameFormat": "${mdname}/${mdname}_${MM}-${DD}-${HH}-${mm}-${ss}",
"markdown-image.local.path": "../../public/photo/post-pics/",
"markdown-image.local.referencePath": "/photo/post-pics/${mdname}/",

更详细的配置,参照 Markdown Image 的官方文档

这样就完成啦。现在使用 sharex 截屏时会自动调用 ffmpeg 将文件压缩为 webp 格式并保存在剪贴板中,然后在 VSCode 中使用 Alt + Shift + V 粘贴即可。

为 valaxy 博客 yun 主题添加 artitalk 说说页面
将 hexo 博客迁移至 valaxy