让选中的图片或块模糊

2025-04-01 | 0 浏览 | 0 评论

让选中的图片或块模糊

see https://ld246.com/article/1734947243187

我写了个 js，按 ctrl/meta + alt + b 可以让选中的图片或块模糊，不过这个模糊是临时的，不会保存

注意，单选可点击下图片或块标即可

参数：

// 模糊样式
const filter = 'blur(6px)';
// 模糊期间块是否可编辑，默认禁止编辑，如果设为 true，块编辑后会导致模糊效果被保存，如果你刚好需要这种效果，可以把这个值设为 true
const editableOnBlur = false;

https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E8%AE%A9%E9%80%89%E4%B8%AD%E7%9A%84%E5%9D%97%E6%88%96%E5%9B%BE%E7%89%87%E5%8F%98%E6%A8%A1%E7%B3%8A.js

不过，如果位置固定，可在录制时，使用截图工具的图片悬浮功能覆盖原位置，截图后使用截图工具的模糊效果模糊一下，再录制也可以。

更进一步，可以用一个悬浮的透明 div，然后这个 div 可拖动大小，然后根据这个 div 覆盖的范围，把这个范围内的元素都模糊。

核心代码如下，有兴趣的朋友可以进一步完善。

function getElementsInRange(startX, startY, endX, endY) {
    const elementsSet = new Set(); // 用于存储所有元素

    // 遍历范围内的每个坐标点
    for (let x = startX; x <= endX; x++) {
        for (let y = startY; y <= endY; y++) {
            // 获取该坐标点的所有元素
            const elements = document.elementsFromPoint(x, y);

            // 将元素添加到 Set 中（自动去重）
            elements.forEach(element => elementsSet.add(element));
        }
    }

    // 将 Set 转换为数组并返回
    return Array.from(elementsSet);
}

// 示例：获取左上角 (100, 100) 到右下角 (200, 200) 范围内的所有元素
const elementsInRange = getElementsInRange(100, 100, 200, 200);
console.log(elementsInRange);

‍

笔记