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

本贴最后更新于 406 天前,其中的信息可能已经事过景迁

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

  • 思源笔记

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

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

    28448 引用 • 119792 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • jiangliaofeng
    作者

    有没有群号啊,我加下

    1 回复
  • 其他回帖
  • syuer9528

    压缩选项应当做成可选,毕竟有大量用户使用的笔记中的图是需要保持原样的,特别是在数字创意等领域工作的人,他们的图片是不能草率压缩的。

    如果对批量压缩有需求,我想到的一个方法,是不是可以对 ASSET 目录中的附件通过外部程序进行批量压缩,例如脚本或各类小工具。

  • 我之前也有这个需求,写了个中键单击图片自动缩放的代码片段。不过不能调整像素,只能调整宽度百分比,把开头的 "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 回复
  • 前面是设置默认高度为 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; /* 保证长宽比例 */
    }
    
  • 查看全部回帖

推荐标签 标签

  • 分享

    有什么新发现就分享给大家吧!

    251 引用 • 1801 回帖 • 1 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    960 引用 • 946 回帖
  • 996
    13 引用 • 200 回帖 • 7 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 367 关注
  • SSL

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

    70 引用 • 193 回帖 • 405 关注
  • Gzip

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

    9 引用 • 12 回帖 • 203 关注
  • 叶归
    25 引用 • 100 回帖 • 37 关注
  • Visio
    1 引用 • 2 回帖 • 1 关注
  • sts
    2 引用 • 2 回帖 • 260 关注
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    63 引用 • 289 回帖 • 1 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 475 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 545 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    60 引用 • 22 回帖
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 3 关注
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    79 引用 • 431 回帖 • 1 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖
  • 程序员

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

    599 引用 • 3541 回帖
  • 大数据

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

    91 引用 • 113 回帖
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 9 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 11 关注
  • SEO

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

    36 引用 • 200 回帖 • 54 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    119 引用 • 54 回帖
  • 尊园地产

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

    1 引用 • 22 回帖 • 838 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    85 引用 • 324 回帖
  • Sublime

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

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

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 121 关注