[js] 希望可以图片左上方有一个复制按钮

思源的复制图片上是复制相对路径的,老是要右键进行复制,所以希望可以在图片上方悬浮一个复制为 png 的按钮,鼠标移动到那里才显示

image.png

希望社区大佬可以帮忙下写一段 js 代码

  • 思源笔记

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

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

    25918 引用 • 107419 回帖 • 1 关注
  • 代码片段

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

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

    178 引用 • 1257 回帖
  • Q&A

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

    9950 引用 • 45202 回帖 • 77 关注

相关帖子

被采纳的回答
  • wilsons 2 1 赞同

    image.png

    // 图片复制到png按钮放到外层右上角
    (()=>{
        let isOn = false;
        document.addEventListener('mouseover', (e)=>{
            const img = e.target.closest('[data-type="img"]');
            if(!img) return; if(isOn) return;
            isOn = true; setTimeout(()=>isOn=false, 100);
            if(img.querySelector('.cst-copy-png')) return;
            const action = img.querySelector('.protyle-action');
            if(!action) return;
            const actionIcon = img.querySelector('.protyle-action .protyle-icon');
            if(actionIcon) {
                actionIcon.style.borderTopLeftRadius = '0';
                actionIcon.style.borderBottomLeftRadius = '0';
            }
            const copyPngHtml = `<span class="protyle-icon protyle-icon--only protyle-custom cst-copy-png" style="border-top-right-radius:0;border-bottom-right-radius:0"><svg class="svg"><use xlink:href="#iconImage"></use></svg></span>`;
            action.insertAdjacentHTML('afterbegin', copyPngHtml);
            const copyPngBtn = img.querySelector('.cst-copy-png');
            copyPngBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                copyPNGByLink(img.querySelector('img')?.getAttribute("src")||'');
            });
        });
        // see https://github.com/siyuan-note/siyuan/blob/e47b8efc2f2611163beca9fad4ee5424001515ff/app/src/menus/util.ts#L175
        function copyPNGByLink(link) {
            if(!link) return;
            if (isInAndroid()) {
                window.JSAndroid.writeImageClipboard(link);
                return;
            } else {
                const canvas = document.createElement("canvas");
                const tempElement = document.createElement("img");
                tempElement.onload = (e) => {
                    canvas.width = e.target.width;
                    canvas.height = e.target.height;
                    canvas.getContext("2d").drawImage(e.target, 0, 0, e.target.width, e.target.height);
                    canvas.toBlob((blob) => {
                        navigator.clipboard.write([
                            new ClipboardItem({
                                // @ts-ignore
                                ["image/png"]: blob
                            })
                        ]);
                    }, "image/png", 1);
                };
                tempElement.src = link;
            }
        }
        function isInAndroid() {
            return window.siyuan.config.system.container === "android" && window.JSAndroid;
        }
    })();
    

    代码备份地址 https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E5%9B%BE%E7%89%87%E5%A4%8D%E5%88%B6%E5%88%B0png%E6%8C%89%E9%92%AE%E6%94%BE%E5%88%B0%E5%A4%96%E5%B1%82%E5%8F%B3%E4%B8%8A%E8%A7%92.js

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 谢谢大佬的 js 代码,很有用

  • 其他回帖
  • lichlaughing

    顺便,能否源文件是什么格式,就复制成什么格式 😄

  • wilsons 2 1 赞同 2 评论

    image.png

    // 图片复制到png按钮放到外层右上角
    (()=>{
        let isOn = false;
        document.addEventListener('mouseover', (e)=>{
            const img = e.target.closest('[data-type="img"]');
            if(!img) return; if(isOn) return;
            isOn = true; setTimeout(()=>isOn=false, 100);
            if(img.querySelector('.cst-copy-png')) return;
            const action = img.querySelector('.protyle-action');
            if(!action) return;
            const actionIcon = img.querySelector('.protyle-action .protyle-icon');
            if(actionIcon) {
                actionIcon.style.borderTopLeftRadius = '0';
                actionIcon.style.borderBottomLeftRadius = '0';
            }
            const copyPngHtml = `<span class="protyle-icon protyle-icon--only protyle-custom cst-copy-png" style="border-top-right-radius:0;border-bottom-right-radius:0"><svg class="svg"><use xlink:href="#iconImage"></use></svg></span>`;
            action.insertAdjacentHTML('afterbegin', copyPngHtml);
            const copyPngBtn = img.querySelector('.cst-copy-png');
            copyPngBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                copyPNGByLink(img.querySelector('img')?.getAttribute("src")||'');
            });
        });
        // see https://github.com/siyuan-note/siyuan/blob/e47b8efc2f2611163beca9fad4ee5424001515ff/app/src/menus/util.ts#L175
        function copyPNGByLink(link) {
            if(!link) return;
            if (isInAndroid()) {
                window.JSAndroid.writeImageClipboard(link);
                return;
            } else {
                const canvas = document.createElement("canvas");
                const tempElement = document.createElement("img");
                tempElement.onload = (e) => {
                    canvas.width = e.target.width;
                    canvas.height = e.target.height;
                    canvas.getContext("2d").drawImage(e.target, 0, 0, e.target.width, e.target.height);
                    canvas.toBlob((blob) => {
                        navigator.clipboard.write([
                            new ClipboardItem({
                                // @ts-ignore
                                ["image/png"]: blob
                            })
                        ]);
                    }, "image/png", 1);
                };
                tempElement.src = link;
            }
        }
        function isInAndroid() {
            return window.siyuan.config.system.container === "android" && window.JSAndroid;
        }
    })();
    

    代码备份地址 https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E5%9B%BE%E7%89%87%E5%A4%8D%E5%88%B6%E5%88%B0png%E6%8C%89%E9%92%AE%E6%94%BE%E5%88%B0%E5%A4%96%E5%B1%82%E5%8F%B3%E4%B8%8A%E8%A7%92.js

    1 回复
    2 操作
    wilsons 在 2025-05-13 07:57:56 更新了该回帖
    wilsons 在 2025-05-12 18:47:39 更新了该回帖
    我有个跟这个类似的求助
    8V9q7V
    @CongSec 更新下修复手机版 bug
    wilsons
  • lichlaughing

    能实现本地图片的就可以了哈哈哈 😄

  • 查看全部回帖
CongSec
新手可以看我发的求助帖以及汇总帖子,很有帮助的!_! 网安笔记分享:http://congsec.xyz 北京

推荐标签 标签

  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    127 引用 • 169 回帖 • 1 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    117 引用 • 99 回帖 • 198 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    588 引用 • 3528 回帖 • 1 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 182 关注
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    98 引用 • 367 回帖
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    10 引用 • 77 回帖
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 676 关注
  • SEO

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

    36 引用 • 200 回帖 • 30 关注
  • 工具

    子曰:“工欲善其事,必先利其器。”

    298 引用 • 763 回帖
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    554 引用 • 675 回帖
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    19 引用 • 23 回帖 • 737 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1708 回帖
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 311 关注
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    209 引用 • 2040 回帖
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 57 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖 • 1 关注
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖
  • Sublime

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

    10 引用 • 5 回帖 • 1 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 728 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    29 引用 • 230 回帖 • 127 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 832 关注
  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    12 引用 • 5 回帖 • 637 关注
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 1 关注
  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    496 引用 • 934 回帖 • 1 关注
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    86 引用 • 165 回帖