妖火图片模糊

默认模糊指定域名的图片和视频，单击后显示清晰内容
目前为 2024-12-20 提交的版本。查看最新版本。
换行
// ==UserScript==
// @license MIT
// @name         妖火图片模糊
// @icon         https://yaohuo.me/css/favicon.ico
// @namespace    http://tampermonkey.net/
// @version      1.4
// @description  默认模糊指定域名的图片和视频，单击后显示清晰内容
// @author       路桥
// @match        *://yaohuo.me/*
// @match        *://www.yaohuo.me/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

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

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

    // 图片和视频 URL 的正则匹配规则，排除 yaohuo.me、www.yaohuo.me 和 p0.meituan.net
    const urlRegex = /^(?!.*(www\.yaohuo\.me|yaohuo\.me|p0\.meituan\.net)).*$/i;

    // 选择所有图片和视频
    const mediaElements = document.querySelectorAll('img, video');

    mediaElements.forEach(media => {
        // 根据 URL 正则匹配
        if (!urlRegex.test(media.src)) {
            return; // 跳过不匹配的媒体元素
        }

        // 等待媒体加载完成
        if (!media.complete && media.tagName === 'IMG') {
            media.addEventListener('load', () => applyBlur(media));
            return;
        }

        if (media.tagName === 'VIDEO' && media.readyState < 3) { // 3 = HAVE_FUTURE_DATA
            media.addEventListener('loadeddata', () => applyBlur(media));
            return;
        }

        // 如果已经加载完成，直接应用模糊
        applyBlur(media);
    });

    function applyBlur(media) {
        // 创建一个容器包裹媒体元素，限制模糊范围并添加描边
        const wrapper = document.createElement('div');
        wrapper.style.display = 'inline-block';
        wrapper.style.position = 'relative';
        wrapper.style.overflow = 'hidden'; // 限制模糊范围
        wrapper.style.width = `${media.offsetWidth}px`; // 使用 offsetWidth 确保正确宽度
        wrapper.style.height = `${media.offsetHeight}px`; // 使用 offsetHeight 确保正确高度
        wrapper.style.border = `${borderWidth} solid ${borderColor}`; // 添加描边
        wrapper.style.boxSizing = 'border-box'; // 确保描边不影响布局

        // 插入容器，将媒体元素移入容器中
        media.parentNode.insertBefore(wrapper, media);
        wrapper.appendChild(media);

        // 设置媒体的模糊效果和样式
        media.style.filter = `blur(${blurLevel}px)`; // 应用模糊
        media.style.transition = 'filter 0.3s ease';
        media.style.cursor = 'pointer';
        media.style.position = 'absolute'; // 绝对定位确保填充容器
        media.style.top = '0';
        media.style.left = '0';
        media.style.width = '100%'; // 确保媒体填充容器
        media.style.height = '100%'; // 确保媒体填充容器

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