Prevent Image Scaling

Force full-size gallery viewer to display images at their native resolution, with scaling options.
Version vom 01.04.2025. Aktuellste Version
Stellen Sie eine Frage, veröffentlichen Sie eine Bewertung oder melden Sie das Skript.
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);
})();