妖火图片模糊

默认模糊指定域名的图片，单击后显示清晰图片
目前為 2024-12-20 提交的版本，檢視最新版本。
安裝腳本 ?
Wrap lines
// ==UserScript==
// @license MIT
// @name         妖火图片模糊
// @icon         https://yaohuo.me/css/favicon.ico
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  默认模糊指定域名的图片，单击后显示清晰图片
// @author       路桥
// @match        *://yaohuo.me/*
// @match        *://www.yaohuo.me/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 模糊程度设置，单位是像素
    const blurLevel = 100; // 模糊强度

    // 描边样式设置
    const borderColor = 'red'; // 描边颜色
    const borderWidth = '5px'; // 描边宽度

    // 分辨率阈值
    const minWidth = 200;  // 最小宽度
    const minHeight = 200; // 最小高度

    // 选择所有图片
    const images = document.querySelectorAll('img');

    images.forEach(image => {
        // 跳过小分辨率图片
        if (image.naturalWidth < minWidth || image.naturalHeight < minHeight) {
            return;
        }

        // 创建一个容器包裹图片，限制模糊范围并添加描边
        const wrapper = document.createElement('div');
        wrapper.style.display = 'inline-block';
        wrapper.style.position = 'relative';
        wrapper.style.overflow = 'hidden'; // 限制图片模糊范围
        wrapper.style.width = `${image.width}px`; // 设置与图片一致的宽度
        wrapper.style.height = `${image.height}px`; // 设置与图片一致的高度
        wrapper.style.border = `${borderWidth} solid ${borderColor}`; // 添加描边
        wrapper.style.boxSizing = 'border-box'; // 确保描边不影响布局

        // 插入容器，将图片移入容器中
        image.parentNode.insertBefore(wrapper, image);
        wrapper.appendChild(image);

        // 设置图片的模糊效果和样式
        image.style.filter = `blur(${blurLevel}px)`; // 应用模糊
        image.style.transition = 'filter 0.3s ease';
        image.style.cursor = 'pointer';
        image.style.position = 'relative'; // 图片在容器内的位置
        image.style.width = '100%'; // 确保图片填充容器
        image.style.height = '100%'; // 确保图片填充容器

        // 添加点击事件，切换模糊状态
        image.addEventListener('click', () => {
            if (image.style.filter === `blur(${blurLevel}px)`) {
                image.style.filter = 'none'; // 显示清晰图片
            } else {
                image.style.filter = `blur(${blurLevel}px)`; // 恢复模糊
            }
        });
    });
})();
欢迎访问Greasy Fork镜像
