思源的复制图片上是复制相对路径的,老是要右键进行复制,所以希望可以在图片上方悬浮一个复制为 png 的按钮,鼠标移动到那里才显示
希望社区大佬可以帮忙下写一段 js 代码
思源的复制图片上是复制相对路径的,老是要右键进行复制,所以希望可以在图片上方悬浮一个复制为 png 的按钮,鼠标移动到那里才显示
希望社区大佬可以帮忙下写一段 js 代码
思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。
融合块、大纲和双向链接,重构你的思维。
代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。
用户在该标签下分享代码片段时需在帖子标题前添加 [css]
或 [js]
用于区分代码片段类型。
提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。
// 图片复制到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;
}
})();
// 图片复制到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;
}
})();
Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。
Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。
程序员是从事程序开发、程序维护的专业人员。
ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。
互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。
Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.
百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。
发布对别人有帮助的原创内容是最好的 SEO 方式。
子曰:“工欲善其事,必先利其器。”
Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。
Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。
找到自己的位置,萌新烦恼少。
京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。
GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。
JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。
RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。
CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。
确认过眼神后的灵魂连接,站在链在!
Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。
Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。
七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。
Latke 是一款以 JSON 为主的 Java Web 框架。
CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。
OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。
Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。
C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。