最近写了一个vscode图片预览插件,这个插件主要功能可以查看文件夹下所有图片的缩略图、编辑图片文件名称、一键复制文件名、点击放大图片,在vscode商店中搜索「img-preview」即可下载
查看文件夹下所有图片
在图片文件夹处右键,点击「images preview」,打开图片预览列表
编辑文件名、复制文件名
实际应用中预览图片后可能会有一些对图片的操作,所以又做了编辑文件名、复制文件名的功能。点击每个图片下面的编辑按钮进行编辑,失焦后报错,点击复制按钮复制文件名到剪贴板
切换背景颜色
实际应用中发现有很多全白的图片不能预览出来,所以做了这个手动切换背景颜色的功能,根据实际需要手动切换背景颜色
点击放大图片
在小图预览时已经加了hover放大,但是放大比例可能还是不能满足某些图片的预览,所以做了点击大图展示的功能,放大之后可以通过按钮继续操作图片尺寸,也加上了背景切换的功能方便展示
实现思路
实现起来也比较简单,大概的流程就是通过vscode插件先读取本地所有图片文件,再打开一个webview,webview里就是一些前端的功能代码,编辑文件时再同过postmessage通知vscode插件对文件进行修改。相当于一个服务端、一个客户端的模式。
因为工作比较忙(人比较懒),所以交互体验、代码质量没有怎么打磨哈,大家凑合用吧,有写错的地方请指教。