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

同问。或者文章内统一大小。

+1, MARK.

并且可以非批量单张图片可改大小。

同问，一个个点拉到一样大小太累了

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

批量调整还没有办法，但可以设置一个默认的高度：

.protyle-wysiwyg [data-node-id] .img:not([style]) img:not([style~="height:"]):not([style~="width:"]) {
    height: 200px;
}
​

这是统一高度，还是设置限高？

给没有设置宽度或高度的图片设置一个默认的高度

+1

我之前也有这个需求，写了个中键单击图片自动缩放的代码片段。不过不能调整像素，只能调整宽度百分比，把开头的 "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);

});
​

把 10% 改成 100px 这样，不行吗？

如果要设置一个最大高度，应该怎样改代码？这个代码会不等比缩放图片。

为什么会需要最大高度呢？默认高度不是更灵活吗？

这个代码会不等比缩放图片

我这里不知道怎么复现

/* 图片最大显示高度 */
.protyle-wysiwyg [data-node-id] .img:not([style]) img:not([style~="height:"]):not([style~="width:"]) {
    max-height: 666px;
    height: auto;
    width: auto;
}
​

有的图片超出了屏幕高度，所以需要限高。

前面是设置默认高度为 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; /* 保证长宽比例 */
}
​

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

确实应该增加这个功能

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

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

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

QQ 群大概有几千人

有没有群号啊，我加下

三群是 538155062

多谢呀