[js] 实现图片旋转 / 翻转后保存

前言

看到论坛有不少小伙伴想要图片旋转/翻转后能保存覆盖原图片的功能。

虽然可以通过打开菜单打开外部程序编辑，但终究没在思源内操作方便。

最近研究了下，实现了这个功能。

支持 jpg, png, webp, bmp, gif(非动画)。

注意：该操作会覆盖原图，请严格测试后谨慎使用，操作前做好备份。

效果

使用方法

1. 下载 browser-image-compression.js 放到 data/public 目录或使用在线地址，也可根据参数 compressionJsPath 进行配置
2. 把下面的代码片段放到思源 js 代码片段中
3. 在思源中操作完成（比如，旋转或翻转）后，点击右下角的保存按钮即可（如上图演示）

代码

代码备份地址：

参数说明

1. compressionJsPath 用于图片压缩的 js 库，建议下载到本地，该库使用第三方 browser-image-compression 库。
2. isCloseViewerAfterSave，图片保存后是否自动关闭弹窗, true 关闭，false 不关闭
3. compressionOptions，图片压缩选项，请参考源码中的解释，详情请参考：https://github.com/Donaldcwl/browser-image-compression?tab=readme-ov-file#main-function

后记

分享 10 分钟，开发数天功，看似简短的代码背后，是开发者日夜辛苦的汗水，如果脚本对你有帮助就多给 ta 点点赞吧。

比较赞同，J 佬的这句话“用户只要在一堆软件插件里面挑挑拣拣，好用的夸两句，难用的骂两句就可以，可是开发者要考虑的事情就很多了。更多”。

比如，这里简单列举下，你觉得简单的问题，开发者要考虑的问题可能有（但远不止这些）

图片链接类型，相对路径，绝对路径，本地/远程路径，包括相关协议

兼容问题，手机版，windows 版，web 版，发布版等

翻转，旋转交叉问题，先后操作及多次操作结果是否一致？消除与简化

思源的翻转是 css 实现的，如何把 css 有效的解析为 canvas 内容

保存后图片刷新问题，多端不兼容如何处理

路径空格及编码问题，不同平台路径兼容问题

图片格式问题，多种图片格式如何同时兼容

图片压缩问题，canvas 编辑后可能导致体积膨胀

。。。。。。

开发中遇到的问题有：

1. getComputedStyle 获取的 transform 结果是一个矩阵，刚开始解析矩阵，但总是和 css 的实际结果有出入，后来改用获取 style 属性方法去解析就没问题，不清楚是不是 js bug 还是什么问题。

2. 手机端，操作后无法实时刷新图片，只能暂时采用页面刷新方式。

3. 非 electron 环境，写文件到工作空间外较复杂，非 electron 环境暂不支持

免责声明

该操作会覆盖原图，请严格测试后谨慎使用，操作前做好备份，由此造成的任何后果均与作者无关。