登录 注册

[js] 一键编辑思源图片，思源里也可以编辑图片了

本贴最后更新于 246 天前，其中的信息可能已经时过境迁

简介

这是个标题党啦 😄

其实就是思源里按 alt+ 单击图片调用本地图片编辑器编辑，但与思源默认的打开方式不同的是，alt+ 单击打开后，会等待编辑器窗口的关闭，当你编辑完成后，关闭编辑器时，会自动更新思源的图片，这样看起来就如同在思源中编辑一样丝滑。

光看文字你肯定没感觉，直接上图吧

image02.gif

有没有震撼到，没有没关系，多看几遍找找感觉 😂

为什么做这个功能？

之前是因为解决这个问题 [插件请求] 图片标注 临时用的解决方案。后来使用过程中发现还不错，还算顺滑，为了方便更多人，想想还是放到 js 代码片段标签下吧。

常见问题

  1. 如果同一个图片打开多个编辑器实例会怎样？
    如果都保存，最后一个保存的生效。
  2. 不同的图片可以同时打开多个编辑器实例吗？
    可以的，没影响。
  3. 除了画图和预览，可以调用其他编辑器吗？
    理论上可以的，实际以测试为准。
  4. Windows 和 Mac 上有什么不同吗？
    由于 Mac 没有打开并等待命令，所以，Mac 上实现方式是通过监控是否该应用的所有窗口都关闭实现。
    open -W 参数虽然能等待，但必须完全退出才行，而 Mac 上默认关闭是不会退出应用的。
    windows 上实现方式是等待进程退出后更新思源图片，如果关闭窗口后编辑器进程未完全退出有可能无法刷新，由于每个软件实现方式不同，具体以实际测试为准。

注意事项

目前仅支持 electron 端，及 Windows 和 Mac 系统。

默认 windows 调用画图，Mac 调用预览。

感谢作者

image.png

代码

👇 打赏后可见（为什么要打赏后可见？主要想通过这种方式统计使用人数及用户需求，以帮助作者分析哪些功能是用户最需要的）

打赏 20 积分后可见
20 积分 • 9 打赏
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    26736 引用 • 111380 回帖 • 2 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    225 引用 • 1615 回帖
9 引用
[css][js] 思源笔记使用体验增强方案分享 • Adaxi
没有什么图片编辑的插件吗 • wilsons
建议增加对于图片修改的支持 • wilsons
[js] 实现图片旋转 / 翻转后保存 思源修改图片能立即同步吗 请问啥时候出图片裁剪和旋转的功能呢？ 思源能够支持手写笔不？ 修改图片后刷新无效 能否实现笔记内图片的裁剪功能
6 操作
wilsons 在 2025-06-05 06:04:48 更新了该帖
wilsons 在 2025-06-05 06:03:44 更新了该帖
wilsons 在 2025-04-14 09:53:37 更新了该帖
wilsons 管理员在 2025-04-10 16:00:47 取消置顶了该帖 wilsons 管理员在 2025-04-10 06:07:01 置顶了该帖 wilsons 在 2025-03-10 10:13:38 更新了该帖
9 打赏
11 感谢
1 关注
13 收藏
4 赞同
9 引用
6 操作
34 回帖
12
2
1.9k 698 13 440 1 1 733

相关帖子

优质回帖
  • Adaxi • • 1

    现在结合 Paint.NET 使用，非常的方便。js 代码片段.7z

  • 80gt • • 1 赞同
    付费者

    解决了，感谢大佬 ❤️ 是第四条，我没有设置路径

  • wilsons • • 1 赞同
    付费者 捐赠者 作者

    把图片链接后面的?t=xxxx 去掉即可，为了对抗图片缓存加的这个，目前没有好的解决方案，不加这个，图片修改后需要重启思源才能生效

    image.png

    好在，这几个菜单也没什么用，就是在标签或窗口打开图片而已

    已给官方提了 issue Issue #14894 · siyuan-note/siyuan

34 回帖
[js] 一键编辑思源图片，思源里也可以编辑图片了

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • stevehfut • via Linux
    付费者

    有没有震撼到，没有没关系，多看几遍找找感觉 😂

    要是有 docker 端就可以把我震撼死 😄

    1 回复
  • wilsons • • 1 评论
    付费者 捐赠者 作者

    其实可以的，用 canvas 实现简单的标记还是可以的，但这个复杂度嘛，估计不是一般人愿意搞的。

    这是个偷懒的方式，勉强满足需要。

    确实，哈哈哈，大佬幸苦了，为思源贡献了好多好用的 js 代码
    stevehfut •
  • sqalei •
    付费者 捐赠者

    正需要这个，非常感谢！

  • Jhpz •
    付费者 捐赠者

    虽然我是 Docker 用户，但还是感谢一下！

  • openAI • • 1 评论
    订阅者 付费者 捐赠者

    膜拜技术大佬。pdf 等附件也能这样编辑吗？

    1 回复
    有没有改好的代码？非 IT 人士，不会改代码。~~~
    glass •
  • wilsons •
    付费者 捐赠者 作者

    理论上是可以的，但要改代码，这里按键后会判断鼠标点击的目标是否图片，只有图片才执行。

    如果你想改成 pdf 等，需要去掉这个图片的判断，然后再改成 pdf 的编辑器 app 应该就行了。

  • Adaxi • • 1 • 1 评论

    现在结合 Paint.NET 使用，非常的方便。js 代码片段.7z

    1 回复
    2 操作
    Adaxi 在 2024-12-11 22:18:19 更新了该回帖
    Adaxi 在 2024-12-11 19:57:08 更新了该回帖
    感谢分享
    wilsons •
  • Age •
    订阅者 支持者 捐赠者 勇士

    这个要怎么弄

    1 回复
  • wilsons •
    付费者 捐赠者 作者

    大佬回帖右侧有修改后的 js 片段下载。

  • briverlan • via Android
    付费者

    但是，代码放在哪里？

    1 回复
  • nightstars •
    付费者

    厉害

  • wilsons •
    付费者 捐赠者 作者

    打开 设置 - 外观 ，点击 代码片段设置

    image.png

    image.png

    如果有问题，可以尝试重启下思源。

    1 回复
  • nightstars •
    付费者

    大佬，图片的刷新好像得手动操作，一图多用的情况下，你修改图片，其他的图片引用需要手动刷新。

    1 回复
  • wilsons •
    付费者 捐赠者 作者

    不需要的，你重启思源或你新空间测试看看，如果还有问题，可以把你的文件导出上传到帖子里我看看。

    image03.gif

  • glass •
    付费者

    太有用了。之间每次都是打开思源资源库的找到原始文件，右键编辑再保存，然后更新的图片不会自动刷新，还得重新刷新文档树……

  • forwardlee •
    付费者

    体验操作上很方便

  • JeffreyChen •
    付费者 支持者 捐赠者

    给自己的帖子置顶算不算滥用权限？一般都是重要通知才允许管理员置顶的

  • tiewei •
    付费者

    3.1.27 文档处于只读模式时，也能触发进入图片编辑，编辑成功后返回能看到修改的图片，但重新载入文档后，图片丢失（文档未引用），实际图片还在。

    1 回复
    1 引用
  • wilsons •
    付费者 捐赠者 作者

    已更新至 0.0.2 版

    0.0.2 发布服务和锁定状态不可修改

    3 回复
  • 80gt •
    付费者

    大佬，我的不生效是怎么回事呀 😭

  • 80gt •
    付费者

    alt+ 鼠标左键点图片没反应，大佬 😭

    1 回复
  • 80gt •
    付费者

    重启过几次了，插件也全关了，都没反应 😭

  • wilsons •
    付费者 捐赠者 作者

    这个代码很多人用过，没有人反馈过这个问题，这说明大概率是你本地环境问题或操作不正确原因。

    推荐

    1 确保 js 代码片段正确开启

    image.png

    2 看看控制台是否有报错信息

    image.png

    3 新空间测试试试

    虽然关闭插件等能避免影响，但我推荐新空间测试，这个最大程度保证外来因素的影响，还简单方便。

    1. 这些参数确保配置无误

      // windows 下调用的编辑器APP，默认 mspaint
    // 注意：Windows下的路径分隔符\要用\\表示，比如 C:\\path\\some.exe
    const windowsApp = 'mspaint';

    // Mac下调用的编辑器APP，默认 Preview
    // 这里是应用程序名，可在应用右键简介或应用包的Info.list里查看
    const macosApp = 'Preview';
​

    2. 确保使用平台正确
      目前仅 electron 客户端支持，即仅电脑端思源支持，不支持网页版和手机版。

    3. 这个函数第二个参数加 true 试试

      document.addEventListener('mousedown', function(event) {
    ......
}, true); // 这里第2个参数加true试试
​

    4. 如果还有问题请提供更多信息，信息太少无法判断

    3 回复
  • 80gt •
    付费者

    js 两个开关都已经打开，进入思源报错第一个红叉那条，按 alt+ 左键点图片报错第二个红叉那条，请大佬帮忙看看 😭 image.png

    1 回复
  • 80gt • • 1 赞同
    付费者

    解决了，感谢大佬 ❤️ 是第四条，我没有设置路径

  • wilsons •
    付费者 捐赠者 作者

    这个报错是指没有找到画图软件。

    1 确保参数正确配置

    // windows 下调用的编辑器APP，默认 mspaint
    // 注意：Windows下的路径分隔符\要用\\表示，比如 C:\\path\\some.exe
    const windowsApp = 'mspaint';
​

    2 确保系统中画图软件可正常访问，且路径在环境变量可访问范围内

    可通过以下命令查看画图软件路径

    image.png

  • 80gt •
    付费者

    观察到一个 bug，影响不大但想反馈一下，编辑过的图片右键打开菜单会少几个功能
    没编辑过的图片image.png

    编辑过的图片image.png

    2 回复
  • wilsons • • 1 赞同
    付费者 捐赠者 作者

    把图片链接后面的?t=xxxx 去掉即可，为了对抗图片缓存加的这个，目前没有好的解决方案，不加这个，图片修改后需要重启思源才能生效

    image.png

    好在，这几个菜单也没什么用，就是在标签或窗口打开图片而已

    已给官方提了 issue Issue #14894 · siyuan-note/siyuan

    1 操作
    wilsons 在 2025-05-24 17:03:14 更新了该回帖
  • wilsons • • 1
    付费者 捐赠者 作者

    windows 推荐这个工具 https://www.52pojie.cn/thread-1222881-1-1.html

    1 回复
  • wilsons •
    付费者 捐赠者 作者

    思源 v3.1.31 已经解决了这个问题

    see Issue #14894 · siyuan-note/siyuan

    1 回复
  • 80gt •
    付费者

    😄 👍

  • 80gt •
    付费者

    大佬，用这个软件只需要改路径，其它代码都不用修改吗

    1 回复
  • wilsons •
    付费者 捐赠者 作者

    理论上是滴，实际以测试为准。

  • Adaxi •

    结合作者的代码，让 ai 写了个 shift + click 使用默认的图片查看器打开图片的功能，有问题直接问 ai，我不会：

    deepseekjavascript20250802423441.7z

    PixPin20250802224417.gif

    1 引用
请输入回帖内容 ...
wilsons
正在努力开发 wilsons 工具箱中 🛠️ 目前已正式入驻爱发电啦！💖 想催更、提需求？欢迎访问 👉 https://afdian.com/a/wilsons
回帖
1752
 帖子
87
 积分
65739