Replace lazy-loaded and blurred canvas with real image on zhihu.com

zhihu-real-image.user.js

// ==UserScript==
// @name         Zhihu Real Image
// @name:zh-CN   知乎真实图片
// @namespace    myfreeer
// @version      0.1
// @description  Replace lazy-loaded and blurred canvas with real image (causing many errors in console)
// @description:zh-CN  将懒加载的模糊的canvas替换为真实图片（会导致控制台产生大量错误）
// @author       myfreeer
// @match        https://*.zhihu.com/question/*
// @match        http://*.zhihu.com/question/*
// @match        https://zhihu.com/question/*
// @match        http://zhihu.com/question/*
// @grant        none
// @downloadURL  https://gist.github.com/myfreeer/aa82300643132bb1c022662daf7ca0d0/raw/zhihu-real-image.user.js
// @license      BSD-3-Clause
// @run-at       document-start
// ==/UserScript==

//edited from http://javascript.ruanyifeng.com/dom/mutationobserver.html
(function (win) {
    'use strict';

    var listeners = [];
    //var doc = window.document;
    //var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
    var observer;

    function ready(selector, fn) {
        // 储存选择器和回调函数
        listeners.push({
            selector: selector,
            fn: fn
        });
        if (!observer) {
            // 监听document变化
            observer = new MutationObserver(check);

            observer.observe(document.documentElement, {
                childList: true,
                subtree: true,
                attributes:true,
                attributeFilter:['style', 'class']
            });
        }
        // 检查该节点是否已经在DOM中
        check();
    }

    function check() {
        // 检查是否匹配已储存的节点
        for (var i = 0; i < listeners.length; i++) {
            var listener = listeners[i];
            // 检查指定节点是否有匹配
            var elements = document.querySelectorAll(listener.selector);
            for (var j = 0; j < elements.length; j++) {
                var element = elements[j];
                // 确保回调函数只会对该元素调用一次
                //if (!element.ready) {
                //    element.ready = true;
                //    // 对该节点调用回调函数
                    listener.fn.call(element, element);
                //}
            }
        }
    }

    // 对外暴露ready
    win.ready = ready;

})(window);

const canvasReplacer=elem=>{
    if (!(elem && elem.className && elem.className.match('VagueImage-canvas') &&
          elem.parentNode && elem.parentNode.parentNode)) return;
    const src=elem.parentNode.getAttribute('data-src');
    if (!(src && src.match('http'))) return;
    let img = document.createElement('img');
    img.src = src;
    img.classList = 'origin_image zh-lightbox-thumb lazy';
    elem.parentNode.parentNode.replaceChild(img, elem.parentNode);
};

(function() {
    'use strict';
    [...document.getElementsByClassName('VagueImage-canvas')].forEach(canvasReplacer);
    ready('.VagueImage-canvas', canvasReplacer);
    // Your code here...
})();