思源笔记怎么批量调整图片大小

在网上复制了多张大小不一的图片,插入思源笔记后,怎么批量调整图片为统一尺寸

  • 思源笔记

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

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

    24718 引用 • 101513 回帖

相关帖子

欢迎来到这里!

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

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

    我之前也有这个需求,写了个中键单击图片自动缩放的代码片段。不过不能调整像素,只能调整宽度百分比,把开头的 "10%" 调成自己需要的。只能说提升缩放的效率,但是还是一个一个图片中键点击才行。

    document.body.addEventListener('mousedown', function (event) { if (event.button != 1) return; // 图片宽度,百分比。 let targetImageWidthValue = "10%"; let clickElement = event.target; // 检查点击的元素是否是图片 if (!clickElement.matches('.protyle-wysiwyg div[data-node-id] span.img[data-type="img"] img')) { return; } let imageSpanElement = clickElement.parentElement.parentElement; // 判断是否设置过宽度,设置过就不能覆盖 if (imageSpanElement.style.width) { //return; } // 如果图片在表格中,也不进行设置 if (imageSpanElement.parentElement.tagName.toLowerCase() === "td") { return; } let layoutTabContainerElement = clickElement.parentElement; // 循环查找当前点击的文档元素 while (layoutTabContainerElement) { if (layoutTabContainerElement.tagName.toLowerCase() === 'div' && layoutTabContainerElement.classList.contains('protyle') && layoutTabContainerElement.classList.contains('fn__flex-1')) { break; } layoutTabContainerElement = layoutTabContainerElement.parentNode; } // 默认只读模式 let isReadonly = true; if (layoutTabContainerElement) { let readonlyButton = layoutTabContainerElement.querySelector('[data-type="readonly"]'); if (readonlyButton) { isReadonly = readonlyButton.querySelector("use").getAttribute("xlink:href") !== "#iconUnlock"; } } if (isReadonly) { console.log("点击自动设置图片宽度失败!当前是只读模式。图片地址:" + clickElement.src); return; } // 创建一个鼠标右键点击事件 let contextMenuEvent = new MouseEvent('contextmenu', { bubbles: true, cancelable: true, view: window }); // 模拟触发右键点击事件 clickElement.dispatchEvent(contextMenuEvent); let menuLabelNodes = document.getElementById("commonMenu").querySelectorAll(".b3-menu__label"); let widthMenuButtonElement = null; for (let i = 0; i < menuLabelNodes.length; i++) { let currentNode = menuLabelNodes[i]; // 检查文本内容是否包含 "宽度" if (currentNode.nodeType === 1 && currentNode.textContent === "宽度") { widthMenuButtonElement = currentNode.parentElement; break; } } if (!widthMenuButtonElement) { return; } // 选中“宽度”菜单项 widthMenuButtonElement.classList.add("b3-menu__item--show", "b3-menu__item--current"); const defaultWidths = ["25%", "33%", "50%", "67%", "75%"]; if (defaultWidths.includes(targetImageWidthValue)) { let subMenuLabelNodes = widthMenuButtonElement.querySelectorAll(".b3-menu__label"); let subMenuButtonElement = null; for (let i = 0; i < subMenuLabelNodes.length; i++) { let currentNode = subMenuLabelNodes[i]; if (currentNode.nodeType === 1 && currentNode.textContent === targetImageWidthValue) { subMenuButtonElement = currentNode.parentElement; break; } } if (!subMenuButtonElement) { return; } subMenuButtonElement.click(); } else { const widthCustomButtonElement = widthMenuButtonElement.querySelectorAll('button .b3-menu__item.b3-menu__item--readonly.b3-menu__item--custom')[1]; if (!widthCustomButtonElement) { return; } const rangeElement = widthCustomButtonElement.querySelector("input"); rangeElement.value = targetImageWidthValue.replace("%", ""); // 触发 input 事件,会修改图片样式 let inputEvent = new Event('input', { bubbles: true }); rangeElement.dispatchEvent(inputEvent); // 触发 change 事件,会调用接口刷新 let changeEvent = new Event('change', { bubbles: true }); rangeElement.dispatchEvent(changeEvent); } console.log("点击自动设置图片宽度成功!图片地址:" + clickElement.src); });
    1 回复
  • 其他回帖
  • jiangliaofeng 1 评论 via macOS
    作者

    思源笔记的这个社区,能不能设置个微信群,请几位大神,这样才能推动笔记的发展呀。

    1 回复
    论坛社区和 QQ 群各有所长吧,QQ 群人多了消息容易过载。
    emlamp
  • jiangliaofeng via macOS
    作者

    还是希望能出个插件什么的,能批量或者能多选图片批量调整

  • 前面是设置默认高度为 200px,后面是限制最大高度为窗口高度的 90%:

    /* 编辑器图片设置默认高度、限制最大高度 CSS片段 */ .protyle-wysiwyg [data-node-id] .img:not([style]) img:not([style~="height:"]):not([style~="width:"]) { height: 200px; } .protyle-wysiwyg [data-node-id] .img img { max-height: 90vh; max-width: min-content; /* 保证长宽比例 */ }
  • 查看全部回帖

推荐标签 标签

  • Jenkins

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

    54 引用 • 37 回帖
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 167 关注
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 176 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    315 引用 • 547 回帖
  • 招聘

    哪里都缺人,哪里都不缺人。

    189 引用 • 1057 回帖
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 1 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 1 关注
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    76 引用 • 1742 回帖
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 4 关注
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    182 引用 • 1010 回帖
  • 百度

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

    63 引用 • 785 回帖 • 113 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 22 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 75 关注
  • 服务

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

    41 引用 • 24 回帖
  • 七牛云

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

    28 引用 • 226 回帖 • 139 关注
  • OneDrive
    2 引用 • 2 关注
  • JSON

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

    52 引用 • 190 回帖 • 1 关注
  • Word
    13 引用 • 40 回帖
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 442 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    143 引用 • 442 回帖
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 2 关注
  • 区块链

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

    92 引用 • 752 回帖 • 1 关注
  • Follow
    4 引用 • 12 回帖 • 7 关注