[js] 粘贴为网络图片和本地图片(支持粘贴 gif 保持动画不失效,可拦截思源默认 gif 粘贴)

缘起

之前写了一篇 [js] 粘贴为段落(自动把剪切板一个换行转换为两个) 感觉还是挺多人需要的。

感觉这个功能,大概也许应该也有人需要吧,于是今天决定也把这个功能分享出来。

众所周知,思源复制图片然后粘贴到编辑器非常方便,但你有没有这样的需求,有些不太重要的图片或者本身已在 cdn 上的图片,我想直接复制图片地址,然后粘贴到编辑器中,自动变成网络图片,而不需要,先用斜杠命令插入图片,然后打开图片对话框,再粘贴图片地址到输入框,这样太麻烦了。

而现在,有了这个 js 代码,你只需要复制图片后,在需要的地方右键“粘贴为网络图片”即可,真是太方便了。

另外,思源默认无法从浏览器复制 gif 动图粘贴到编辑器,动图会失效。感谢 @Achuan-2 的提醒。

不过,现在本代码也支持从浏览器粘贴 gif 动图到思源了,只需要在浏览器复制时,选择“复制图片”即可。

然后,粘贴时,可选择粘贴为网络图片或本地图片,都能保持 gif 动图不失效。

0.0.3+ 已支持拦截思源默认粘贴功能,可在粘贴 gif 动画时,保持 gif 动图不失效。感谢 @Achuan-2 提供的帮助!

功能简介

  1. 在浏览器中复制图片地址后,在思源中可粘贴为网络图片和本地图片
  2. 在浏览器中复制图片后,在思源中可粘贴为网络图片和本地图片
  3. 拦截思源默认粘贴功能,当从浏览器复制 gif 图片时,自动从网络下载 gif 图片到本地,可保持 gif 动图不失效。(isListenSiyuanPaste 参数设为 true 即可,默认已经是 true)
  4. 在已使用 3 的条件下,可以通过 isOnlyListenGifPaste 参照设为 true(默认 true)来开启仅拦截 gif 粘贴。

效果预览

右键菜单

image.png

粘贴普通图片

r1515.gif

粘贴 gif 动图

r1517.gif

拦截思源默认粘贴

r1518.gif

而没用本代码时,需要这样:

r1516.gif

是不是方便了许多?

如果你觉得不错,快去获取代码吧!

代码

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

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

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

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

    28444 引用 • 119764 回帖
  • 代码片段

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

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

    285 引用 • 1985 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • wilsons

    0.0.5 更新内容

    1. 增加下载图片失败时从剪切板获取;
    2. 改进扩展名的获取方式;
    3. 默认粘贴图片时,仅监控 gif 图片的粘贴
  • 其他回帖
  • 说的是浏览器复制 gif 到思源,方案其实已经说了,就是获取 gif 图片地址,进行下载。如果你用 ppt 的话,就会发现网页图片粘贴到 ppt,ppt 都是默认从链接下载,而不是用剪贴板的图片数据的,所以 gif 能直接粘贴到 ppt 里

    之前想从浏览器粘贴 gif 到思源,比较好的方式是用剪藏插件,但是复制浏览器单张 GIF 到思源,会丢失动图,总归是一个缺陷

    2 操作
    Achuan-2 在 2025-07-03 08:41:49 更新了该回帖
    Achuan-2 在 2025-07-03 08:18:01 更新了该回帖
  • shaoxia 1

    我直接做了个魔改版自己用..ctrl+v 默认保存所有图片(包含 gif 为动图),且都是本地存储..

    代码不优雅但是能用,以后等作者的出来后,再用他的吧,感恩作者..

    https://gitee.com/shaoxiayo/siyuan/blob/master/gif%E5%8A%A8%E5%9B%BE%E4%BF%9D%E5%AD%98%E9%AD%94%E6%94%B9%E7%89%88

    2 回复
  • wilsons 1 赞同

    深夜,键盘声在房间里轻轻响起。

    他坐在电脑前,屏幕上是密密麻麻的文字和代码。他的手指快速地敲击着键盘,像一个钢琴师在练习一首未完成的曲子。

    他不是前端,也不是设计师,只是一个普通的写作者。但对他来说,写作不仅是表达,更是一种构建——构建思想的桥梁,连接灵感与现实。

    就在几天前,他在思源笔记里写下了一段话,复制了一个图片链接,准备插入到文章中。

    但他突然停了下来。

    “为什么非要打开对话框?为什么不能直接粘贴成一张图?”
    这个问题在他脑海里转了很久,最终变成了一个简单的 JavaScript 代码。

    他写下了第一行代码,接着是第二行、第三行……
    然后,按下“运行”。

    奇迹发生了。

    图片地址被复制后,右键“粘贴为网络图”,一瞬间,文字之间便亮起了一束光。
    没有繁琐的操作,没有命令输入,只有指尖与灵感的默契。

    他笑了。

    这不是什么伟大的发明,但它让写作变得轻盈了一些,就像给笔加上了翅膀。

    于是他决定分享这个小功能。
    他知道,或许只有极少数人会用到它,但只要有人因此感到方便,哪怕只是少点一次鼠标,他就觉得值得。

    他在文章末尾写道:

    “我们正在构建一个小众社区,大家在这里互帮互信,以平等 • 自由 • 奔放的价值观进行分享交流。”

    这不只是代码的分享,更像是一个邀请函——
    邀请所有热爱细节、追求效率、珍惜灵感的人,来到这里,彼此看见。

  • 查看全部回帖
wilsons
正式入驻知乎了,以后新贴主要在这里。 欢迎大家订阅关注! 你的关注对我是莫大鼓励,也能让我持续产出优质内容,我们一起成长 🙏 点这里立即关注:https://www.zhihu.com/people/wilsonses