[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 积分 • 5 打赏
  • 思源笔记

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

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

    26295 引用 • 109304 回帖
  • 代码片段

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

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

    201 引用 • 1443 回帖 • 2 关注

相关帖子

欢迎来到这里!

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

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

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

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

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

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

    但他突然停了下来。

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

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

    奇迹发生了。

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

    他笑了。

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

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

    他在文章末尾写道:

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

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

  • 其实思源粘贴一直有一个问题是,复制 gif 粘贴是 png,丢失动图

    这个代码片段应该能解决这个问题

    2 回复
  • wilsons

    确实,不过这个只能粘贴网络图片(已支持粘贴为本地图片,支持 gif 保持动图)

    不过我想了下,可以通过粘贴到网络图片 + 网络图片转本地图片实现

    1 回复
    2 操作
    wilsons 在 2025-07-03 01:49:47 更新了该回帖
    wilsons 在 2025-07-02 23:51:45 更新了该回帖
  • 嗯,把操作自动化就可以了,ppt 粘贴图片其实就是这样,其实思源的粘贴图片应该要改进下的,粘贴单张图片如果来自于网络,就从网络图片下载,而不是直接用剪贴板的数据,导致只能粘贴 png

  • 复制 gif 粘贴是 png,丢失动图

    在思源里复制粘贴吗?录屏演示看看

    如果是在浏览器右键 gif 复制的话,是浏览器转换的,思源解决不了

    2 回复
  • wilsons

    我已经实现了,可以粘贴 gif 为本地图片和网络图片。

    只需要在浏览器复制时,选择“复制图片地址”即可,自动会下载到 assert 并显示。

    image.png

    @Achuan-2

    1 回复
  • 说的是浏览器复制 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 更新了该回帖
  • 牛的

  • 其实可以再改进一下,浏览器复制图片/GIF,text/html 是带有图片地址的图片标签

    PixPin20250703082834.png

    text/uri-list 则就是图片地址(如果复制图片后,选择粘贴为纯文本,其实就是输出图片网络地址)PixPin20250703083148.png
    所以其实直接复制图片,右键也能粘贴为网络图片和本地图片

    我觉得可以直接给官方提交 pr 或者官方有时间改进下,复制网络图片粘贴到本地,默认是从图片链接下载到本地,而不是复制剪贴板数据,保证原有格式,避免格式转换造成的动图丢失、画质损失等问题,至少需要对 GIF 单独优化下

    @88250

    1 回复
    3 操作
    Achuan-2 在 2025-07-03 09:09:43 更新了该回帖
    Achuan-2 在 2025-07-03 08:43:29 更新了该回帖
    Achuan-2 在 2025-07-03 08:40:22 更新了该回帖
  • wilsons

    @Achuan-2 @JeffreyChen

    0.0.3+ 已经实现了可以复制图片地址和图片都能粘贴为本地图片或网络图片

    且可以通过参数 isListenSiyuanPaste 设为 true,拦截思源默认的粘贴,保持 gif 动图不失效

    总结 3 大功能:

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

    感谢 @Achuan-2 提供的帮助!

    1 操作
    wilsons 在 2025-07-03 13:14:27 更新了该回帖
  • wilsons 1 评论

    图欲随心至,须借 JS 力。
    文若行如水,当通键之道。

    以技载道,启思于形;
    以道载心,养性于内;
    以心载人,通达于世;
    以人载技,致用于行 。

    d=====( ̄▽ ̄*)b 顶
    suxiang999
  • wilsons

    贴沉如海我如龙,
    破浪翻云上九重。
    一顶不响千楼动,
    看谁敢说此楼空!

  • wilsons

    0.0.5 更新内容

    1. 增加下载图片失败时从剪切板获取;
    2. 改进扩展名的获取方式;
    3. 默认粘贴图片时,仅监控 gif 图片的粘贴
请输入回帖内容 ...
wilsons
正在努力开发 wilsons 工具箱中 🛠️ 目前已正式入驻爱发电啦!💖 想催更、提需求?欢迎访问 👉 https://afdian.com/a/wilsons