在网上复制了多张大小不一的图片,插入思源笔记后,怎么批量调整图片为统一尺寸
思源笔记怎么批量调整图片大小
相关帖子
- 其他回帖
-
-
JeffreyChen • • 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; /* 保证长宽比例 */ }
-
我之前也有这个需求,写了个中键单击图片自动缩放的代码片段。不过不能调整像素,只能调整宽度百分比,把开头的 "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 回复 - 查看全部回帖
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于