Prevent Image Scaling

Force full-size gallery viewer to display images at their native resolution, with scaling options.
Verze ze dne 01. 04. 2025. Zobrazit nejnovější verzi.
Zeptejte se na otázku, přidejte recenzi nebo skript nahlašte.
Wrap lines
// ==UserScript==
// @name         Prevent Image Scaling
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Force full-size gallery viewer to display images at their native resolution, with scaling options.
// @author       Taka_Sakagami
// @match        https://bsky.app/*
// @grant        GM_addStyle
// ==/UserScript==

GM_addStyle(`
    div[style*="background-image"] {
        background-size: auto !important;
        background-repeat: no-repeat !important;
        transform: scale(var(--zoom-scale, 1)) translate(var(--translate-x, 0px), var(--translate-y, 0px)) !important;
        cursor: grab;
        image-rendering: var(--image-scaling, auto) !important;
        height: 1000%;
        width: 1000%;
        left: -450%;
        top: -450%;
    }

    .css-9pa8cd {
        object-fit: none !important;
        transform: scale(var(--zoom-scale, 1)) translate(var(--translate-x, 0px), var(--translate-y, 0px)) !important;
        cursor: grab;
        image-rendering: var(--image-scaling, auto) !important;
    }

    .zoom-controls {
        position: fixed;
        bottom: 20px;
        right: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
        user-select: none;
    }

    .zoom-button {
        width: 32px;
        height: 32px;
        background-color: #007bff;
        color: white;
        border: none;
        cursor: pointer;
        font-size: 16px;
        border-radius: 5px;
        user-select: none;
    }

    .zoom-button:hover {
        background-color: #0056b3;
    }

    .zoom-label {
        width: 50px;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        color: #333;
        user-select: none;
        display: inline-block;
    }
`);


(function() {
    let zoomLevel = 1;
    let zooming = 0;
    let translateX = 0;
    let translateY = 0;
    let isDragging = false;
    let startX, startY;
    let isNearestNeighbor = false;

    function updateZoom(scale) {
        if (zooming !== 0) {
            zoomLevel = scale;
            document.documentElement.style.setProperty("--zoom-scale", zoomLevel);
            document.getElementById("zoom-label").textContent = `${Math.round(zoomLevel * 100)}%`;
        }
    }
    function updatePosition(x, y) {
        if (zooming !== 0) {
            translateX = x;
            translateY = y;
            document.documentElement.style.setProperty("--translate-x", `${translateX}px`);
            document.documentElement.style.setProperty("--translate-y", `${translateY}px`);
        }
    }

    function startDrag(event) {
        if (event.button !== 0) {
            isDragging = true;
            startX = event.clientX - translateX;
            startY = event.clientY - translateY;
        }
        else {
            if (zooming === 0) {
                translateX = 0;
                translateY = 0;
                startX = 0;
                startY = 0;
                document.documentElement.style.setProperty("--translate-x", `${translateX}px`);
                document.documentElement.style.setProperty("--translate-y", `${translateY}px`);
                zoomLevel = 1;
                document.documentElement.style.setProperty("--zoom-scale", zoomLevel);
                document.getElementById("zoom-label").textContent = `${Math.round(zoomLevel * 100)}%`;
            }
            zooming = 0;
        }
    }

    function dragImage(event) {
        if (isDragging) {
            updatePosition(event.clientX - startX, event.clientY - startY);
        }
    }

    function stopDrag() {
        isDragging = false;
    }

    document.addEventListener("mousedown", startDrag);
    document.addEventListener("mousemove", dragImage);
    document.addEventListener("mouseup", stopDrag);

    function toggleScaling() {
        zooming = 1;
        isNearestNeighbor = !isNearestNeighbor;
        document.documentElement.style.setProperty("--image-scaling", isNearestNeighbor ? "pixelated" : "auto");
        document.getElementById("scaling-toggle").textContent = isNearestNeighbor ? "O" : "ロ";
    }

    const container = document.createElement("div");
    container.className = "zoom-controls";

    const zoomOutButton = document.createElement("button");
    zoomOutButton.className = "zoom-button";
    zoomOutButton.textContent = "-";
    zoomOutButton.addEventListener("click", function() {
        zooming = 1; updateZoom(zoomLevel - 0.25);
    });

    const zoomLabel = document.createElement("span");
    zoomLabel.className = "zoom-label";
    zoomLabel.id = "zoom-label";
    zoomLabel.textContent = `100%`;

    const zoomInButton = document.createElement("button");
    zoomInButton.className = "zoom-button";
    zoomInButton.textContent = "+";
    zoomInButton.addEventListener("click", function() {
        zooming = 1; updateZoom(zoomLevel + 0.25);
    });

    const scalingToggle = document.createElement("button");
    scalingToggle.className = "zoom-button";
    scalingToggle.id = "scaling-toggle";
    scalingToggle.textContent = "ロ";
    scalingToggle.addEventListener("click", toggleScaling);

    container.appendChild(zoomOutButton);
    container.appendChild(zoomLabel);
    container.appendChild(zoomInButton);
    container.appendChild(scalingToggle);
    document.body.appendChild(container);
})();