登录 注册

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

这是个标题党啦 😄

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

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

image02.gif

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

代码：

https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E6%80%9D%E6%BA%90alt+%E5%8D%95%E5%87%BB%E5%9B%BE%E7%89%87%E6%89%93%E5%BC%80%E6%9C%AC%E5%9C%B0%E5%9B%BE%E7%89%87%E7%BC%96%E8%BE%91%E5%99%A8.js

为什么做这个功能？

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

常见问题：

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

注意事项：

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

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

打赏作者

image.png

  • 思源笔记

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

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

    25755 引用 • 106596 回帖
  • 代码片段

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

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

    174 引用 • 1215 回帖 • 4 关注
6 引用
[js] 实现图片旋转 / 翻转后保存 • wilsons
思源修改图片能立即同步吗 • wilsons
请问啥时候出图片裁剪和旋转的功能呢？ • wilsons
思源能够支持手写笔不？ 修改图片后刷新无效 能否实现笔记内图片的裁剪功能
4 操作
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 更新了该帖
11 感谢
1 关注
12 收藏
4 赞同
6 引用
4 操作
33 回帖
12
2
1.4k 603 340 1 493

相关帖子

优质回帖
  • Adaxi • • 1

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

  • 80gt • • 1 赞同
    付费者

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

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

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

    image.png

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

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

33 回帖
[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 回复
  • 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 •
    付费者 捐赠者 作者

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

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

近期热议

推荐标签 标签

  • ngrok

    ngrok 是一个反向代理，通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 652 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React 和 Angular。

    371 引用 • 1854 回帖 • 1 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的马云为首的 18 人，于 1999 年在中国杭州创立，他们相信互联网能够创造公平的竞争环境，让小企业通过创新与科技扩展业务，并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 56 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 31 关注
  • App

    App（应用程序，Application 的缩写）一般指手机软件。

    91 引用 • 384 回帖
  • 百度

    百度（Nasdaq：BIDU）是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 85 关注
  • TGIF

    Thank God It's Friday! 感谢老天，总算到星期五啦！

    291 引用 • 4495 回帖 • 656 关注
  • 招聘

    哪里都缺人，哪里都不缺人。

    188 引用 • 1057 回帖
  • 钉钉

    钉钉，专为中国企业打造的免费沟通协同多端平台， 阿里巴巴出品。

    15 引用 • 67 回帖 • 274 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件，让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖 • 1 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本，加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较（vimdiff）、语法高亮、全面的帮助系统、本地脚本（Vimscript）和便于选择的可视化模式。

    29 引用 • 66 回帖
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    9871 引用 • 44869 回帖 • 78 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司，即：Kunming Zunyuan Property Agency Company Limited（简称“尊园地产”）于 2007 年 6 月开始筹备，2007 年 8 月 18 日正式成立，注册资本 200 万元，公司性质为股份经纪有限公司，主营业务为：代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 794 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成，还支持通过插件进行扩展。

    10 引用 • 5 回帖
  • JetBrains

    JetBrains 是一家捷克的软件开发公司，该公司位于捷克的布拉格，并在俄国的圣彼得堡及美国麻州波士顿都设有办公室，该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境：IntelliJ IDEA。

    18 引用 • 54 回帖
  • V2Ray
    1 引用 • 15 回帖 • 2 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起，它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • 负能量

    上帝为你关上了一扇门，然后就去睡觉了....努力不一定能成功，但不努力一定很轻松 (° ー °〃)

    89 引用 • 1251 回帖 • 398 关注
  • danl
    • 172 关注
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖
  • Swagger

    Swagger 是一款非常流行的 API 开发工具，它遵循 OpenAPI Specification（这是一种通用的、和编程语言无关的 API 描述规范）。Swagger 贯穿整个 API 生命周期，如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 4 关注
  • 运维

    互联网运维工作，以服务为中心，以稳定、安全、高效为三个基本点，确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    7 引用 • 69 回帖 • 7 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    92 引用 • 752 回帖
  • HTML

    HTML5 是 HTML 下一个的主要修订版本，现在仍处于发展阶段。广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    108 引用 • 295 回帖
  • Solo

    Solo 是一款小而美的开源博客系统，专为程序员设计。Solo 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

    这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！

    1441 引用 • 10069 回帖 • 493 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架，基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 400 关注

最新标签