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

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

  • 思源笔记

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

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

    23020 引用 • 92599 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 批量调整还没有办法,但可以设置一个默认的高度:

    .protyle-wysiwyg [data-node-id] .img:not([style]) img:not([style~="height:"]):not([style~="width:"]) {
        height: 200px;
    }
    
    1 回复
  • 其他回帖
  • 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 回复
  • emlamp

    还需要有压缩啊啊啊,Mac 电脑复制到笔记中的文件统统都是 png 格式的,文件很大 😳 ,希望能统一调整图片大小的同时再压缩一下 😄

    1 回复
  • /* 图片最大显示高度 */
    .protyle-wysiwyg [data-node-id] .img:not([style]) img:not([style~="height:"]):not([style~="width:"]) {
        max-height: 666px;
        height: auto;
        width: auto;
    }
    
  • 查看全部回帖

推荐标签 标签

  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    78 引用 • 391 回帖
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 603 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 518 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    354 引用 • 1823 回帖 • 1 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 772 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖 • 1 关注
  • 架构

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

    142 引用 • 442 回帖
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 637 关注
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 400 关注
  • BAE

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

    19 引用 • 75 回帖 • 653 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    166 引用 • 595 回帖
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 65 回帖 • 446 关注
  • 区块链

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

    91 引用 • 751 回帖 • 1 关注
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 416 关注
  • 反馈

    Communication channel for makers and users.

    123 引用 • 913 回帖 • 250 关注
  • Kotlin

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

    19 引用 • 33 回帖 • 63 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    88 引用 • 1235 回帖 • 410 关注
  • 代码片段

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

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

    90 引用 • 562 回帖 • 1 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 75 关注
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 335 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff)、语法高亮、全面的帮助系统、本地脚本(Vimscript)和便于选择的可视化模式。

    29 引用 • 66 回帖 • 2 关注
  • 工具

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

    288 引用 • 734 回帖
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    26 引用 • 196 回帖 • 17 关注
  • RYMCU

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

    4 引用 • 6 回帖 • 50 关注
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    123 引用 • 74 回帖 • 2 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 370 关注