Звісно, цей скрипт не обмежується мангою, він працює із будь-якими “неприхованими” картинками, але від початку я згенерував його для зручнішого читання манги на сайті, де скани не розтягувалися пропорційно за шириною екрану, а подавалися просто по висоті, отже, роздивитися деталі на моніторі, прочитати текст, без лупи практично неможливо.
Зауваж: скрипт від початку й до кінця згенеровано штучним роботом.
Як працює скрипт?
Навівши курсор миші на картинку і натиснувши 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 = '';
}
}
})();
