冻结动态头像 脚本更新

从禁用 gif 的用户脚本 & 催更增强插件继续讨论：

这个动态头像能屏蔽吗？

// ==UserScript==
// @name         冻结 Linux.do 动态头像
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  截取 GIF 头像第一帧替换为静态 PNG
// @author       wisdgod
// @match        https://linux.do/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const cache = new Map(); // url -> base64 | 'skip' | 'pending'

    function freeze(img) {
        if (!img.classList.contains('avatar')) return;
        const src = img.src;
        if (!src || src.startsWith('data:')) return;

        const hit = cache.get(src);
        if (hit === 'skip' || hit === 'pending') return;
        if (hit) { img.src = hit; return; }

        cache.set(src, 'pending');

        fetch(src)
            .then(res => {
                if (res.headers.get('content-type') !== 'image/gif') {
                    cache.set(src, 'skip');
                    return null;
                }
                return res.blob();
            })
            .then(blob => {
                if (!blob) return;

                const url = URL.createObjectURL(blob);
                const tmp = new Image();
                tmp.onload = () => {
                    const c = document.createElement('canvas');
                    c.width = tmp.naturalWidth || 48;
                    c.height = tmp.naturalHeight || 48;
                    c.getContext('2d').drawImage(tmp, 0, 0);

                    const png = c.toDataURL('image/png');
                    URL.revokeObjectURL(url);
                    cache.set(src, png);

                    for (const el of document.getElementsByClassName('avatar')) {
                        if (el.src === src) el.src = png;
                    }
                };
                tmp.crossOrigin = 'anonymous';
                tmp.src = url;
            })
            .catch(() => cache.set(src, 'skip'));
    }

    new MutationObserver(mutations => {
        for (const m of mutations) {
            for (const node of m.addedNodes) {
                if (node.nodeType !== 1) continue;
                if (node.tagName === 'IMG') { freeze(node); continue; }
                for (const a of node.getElementsByClassName('avatar')) freeze(a);
            }
        }
    }).observe(document.body, { childList: true, subtree: true });

    for (const img of document.getElementsByClassName('avatar')) freeze(img);
})();

1 个帖子 - 1 位参与者

阅读完整话题