之前我曾安利过 PasteImage 这个插件,用 VSCode 写博客/文档的时候,用它可以很快捷地在md文档中插入图片。
受某个友人影响,我也开始尝试 拥抱 webp了,近期的文章内的图片都已经压缩成了 webp 格式。但是 PasteImage 却不支持 webp 格式,于是我又想办法整出了今天这个解决方案,实现完全自动化的 压缩+插入图片。
配置 ShareX
sharex 是一个强大的截屏、录屏、分享软件,开源免费,支持高度自定义的自动化,
然后还要安装 ffmpeg ,它在本文的作用是通过命令调用来压缩图片。如果你没了解过它的话不妨去搜索一下,也是一个十分强大的工具。
然后在 sharex 的动作设置中,添加一个动作
- 名称: 随意
- 文件路径: ffmpeg 的安装路径,要指定到 ffmpeg 可执行文件
- 参数:
-i "$input" -q 75 "$output"
其中 -q 75 是以75%质量压缩 - 输出文件扩展名: webp
- 扩展名筛选: png
勾上下面的 隐藏窗口 和 删除输入文件
然后在截图后的任务里选中这些项(添加图像特效可视情况自行添加)
配置 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
粘贴即可。