Скрипт для зручного читання манги, що збільшує картинки

Звісно, цей скрипт не обмежується мангою, він працює із будь-якими “неприхованими” картинками, але від початку я згенерував його для зручнішого читання манги на сайті, де скани не розтягувалися пропорційно за шириною екрану, а подавалися просто по висоті, отже, роздивитися деталі на моніторі, прочитати текст, без лупи практично неможливо.

Зауваж: скрипт від початку й до кінця згенеровано штучним роботом.

Як працює скрипт?

Навівши курсор миші на картинку і натиснувши 3-тю кнопку миші (коліщатко) — скрипт розгортає зображення під курсором у зовнішньому DIV на увесь екран, себто на увесь доступний в бравзері простір, водночас картинка розтягується пропорційно — заповнює увесь доступний простір без спотворень, новий простір прокручується.

Як користуватися?

Скрипт тестувався тільки у Firefox, працює через перевірений додаток Violentmonkey (Tampermonkey) для запуску довільних скриптів, тобто для роботи скрипта (javascript) передовсім необхідно встановити вказаний додаток, затим додати в нього скрипт (натиснути на плюсик і скопіпастити скрипт, зберегти та закрити). Тоді скрипт буде активним на всіх сайтах.

Зауваж, що скрипт спрацьовує не завжди, бувають проблеми із намальованим в canvas, і загалом сьогодні чимало сайтів використовують різні засоби захисту контенту від копіювання, тому зважаємо на це.

Якщо ти звиклий до розкривання посилань коліщатком миші, спробуй новий спосіб: затиснувши Ctrl клікай по посиланню ЛКМ, або вимикай додаток на конкретних сайтах.

// ==UserScript==
// @name         Пропорційне збільшення манги (Універсальний Canvas Клон)
// @namespace    http://tampermonkey.net/
// @version      1.7
// @description  Ідеально розгортає і звичайні IMG, і захищені CANVAS по ширині екрана
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let currentHoveredElement = null;
    let overlay = null;

    // Стежимо за мишкою
    document.addEventListener('mouseover', function(e) {
        currentHoveredElement = e.target;
    }, true);

    // Слухаємо клік коліщатком миші
    document.addEventListener('mousedown', function(e) {
        if (e.button === 1) { // Середня кнопка (коліщатко)

            if (overlay) {
                e.preventDefault();
                closeOverlay();
                return;
            }

            if (currentHoveredElement) {
                // Шукаємо сам об'єкт (IMG або CANVAS)
                let sourceElement = findVisualElement(currentHoveredElement);

                if (sourceElement) {
                    e.preventDefault();
                    openOverlayWithElement(sourceElement);
                } else {
                    console.log('Скрипт не знайшов елемента для збільшення:', currentHoveredElement);
                }
            }
        }
    });

    // Функція пошуку: визначаємо, де картинка чи канвас
    function findVisualElement(el) {
        if (el.tagName === 'IMG' || el.tagName === 'CANVAS') return el;

        // Якщо навели на блок-обгортку, перевіряємо що всередині
        let found = el.querySelector('img, canvas');
        if (found) return found;

        // Перевіряємо найближчого сусіда (всередині слайдерів бувають прозорі клік-панелі поверх)
        let parent = el.parentElement;
        if (parent) {
            let siblingFound = parent.querySelector('img, canvas');
            if (siblingFound) return siblingFound;
        }

        return null;
    }

    function openOverlayWithElement(sourceEl) {
        // Створюємо контейнер-оверлей із робочим скролом для Firefox
        overlay = document.createElement('div');
        overlay.style.position = 'fixed';
        overlay.style.top = '0';
        overlay.style.left = '0';
        overlay.style.width = '100vw';
        overlay.style.height = '100vh';
        overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.98)';
        overlay.style.zIndex = '99999999';
        overlay.style.overflowY = 'scroll';
        overlay.style.overflowX = 'hidden';
        overlay.style.scrollbarWidth = 'none';
        overlay.style.display = 'block';

        let displayElement;

        if (sourceEl.tagName === 'CANVAS') {
            // МАГІЯ ДЛЯ CANVAS: Замість читання тексту base64, ми створюємо новий порожній canvas...
            displayElement = document.createElement('canvas');
            displayElement.width = sourceEl.width;
            displayElement.height = sourceEl.height;

            // ...і копіюємо в нього графічні дані безпосередньо з оригінального канвасу!
            let ctx = displayElement.getContext('2d');
            ctx.drawImage(sourceEl, 0, 0);
        } else {
            // ДЛЯ ЗВИЧАЙНИХ IMG: Просто копіюємо тег зі збереженням посилання
            displayElement = document.createElement('img');
            displayElement.src = sourceEl.src;
        }

        // Задаємо однакові стилі відображення (на всю ширину вікна, висота пропорційна)
        displayElement.style.width = '100vw';
        displayElement.style.height = 'auto';
        displayElement.style.display = 'block';

        overlay.appendChild(displayElement);
        document.body.appendChild(overlay);

        // Блокуємо фоновий скрол сайту
        document.body.style.overflow = 'hidden';

        // Закриття правою кнопкою миші
        overlay.addEventListener('contextmenu', function(e) {
            e.preventDefault();
            closeOverlay();
        });
    }

    function closeOverlay() {
        if (overlay) {
            overlay.remove();
            overlay = null;
            document.body.style.overflow = '';
        }
    }
})();