User:Kxx/fix images.js

(() => {
    const srcRegex =
        /^((?:https?:)?\/\/upload\.wikimedia\.org\/.*)\/thumb(\/.*\/)(\d{14}%21|)(.*)\/(\d+)px-\4(.*)$/;
    $('img').each((index, elem) => {
        let img = $(elem);
        let matches = srcRegex.exec(img.attr('src'));
        if (!matches) {
            return;
        }
        if (/\.svg$/i.test(matches[4]) && matches[6] === '.png') {
            let img2 = $('<img>').insertAfter(img);
            img2.attr('src', matches.slice(1, 5).join(''));
            img2.on('load', () => {
                let div = $('<div>');
                div.attr('class', img.attr('class'));
                div.css({
                    display: 'inline-block',
                    overflow: 'clip',
                    verticalAlign: img.css('vertical-align')
                });
                div.width(img.width()).height(img.height());
                let div2 = $('<div>').appendTo(div);
                let scaleX = img.width() / img2.width();
                let scaleY = img.height() / img2.height();
                div2.css({
                    transformOrigin: 'top left',
                    scale: `${scaleX} ${scaleY}`
                });
                let obj = $('<object type="image/svg+xml">').appendTo(div2);
                obj.attr('data', matches.slice(1, 5).join(''));
                img.replaceWith(div);
                img2.remove();
            });
        } else if (matches[6] === '' && devicePixelRatio !== 1) {
            let width = Math.round(img.width() * devicePixelRatio);
            img.attr('src', `${matches[1]}/thumb${matches.slice(2, 5).join('')}/${width}px-${matches[4]}`);
            img.on('error', () => {
                img.attr('src', matches.slice(1, 5).join(''));
                img.off('error');
            });
        }
        img.removeAttr('srcset');
    });
})();