Fix Manga Puzzle Page

Reorganiza automáticamente las piezas del manga desordenado, permite subir imágenes y descargar la imagen recompuesta.
当前为 2025-02-15 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Fix Manga Puzzle Page
// @namespace    http://tampermonkey.net/
// @version      1.5
// @description  Reorganiza automáticamente las piezas del manga desordenado, permite subir imágenes y descargar la imagen recompuesta.
// @author       TuNombre
// @match        *://*/*  // Ajusta esto según la URL específica del sitio web
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function fixPuzzle() {
        const container = document.querySelector(".puzzle-container"); // Ajusta este selector según el sitio
        if (!container) return;

        let pieces = Array.from(container.querySelectorAll("img")); // Detecta las piezas de imagen
        
        // Ordenar por un posible atributo de posición o nombre de archivo
        pieces.sort((a, b) => {
            let numA = parseInt(a.src.match(/(\d+)\.jpg/)?.[1] || 0, 10);
            let numB = parseInt(b.src.match(/(\d+)\.jpg/)?.[1] || 0, 10);
            return numA - numB;
        });

        // Limpiar contenedor y reinsertar las piezas en orden
        container.innerHTML = "";
        pieces.forEach(piece => container.appendChild(piece));
    }

    function createUploadUI() {
        let existingContainer = document.getElementById("uploadContainer");
        if (existingContainer) return; // Evitar duplicados

        const uploadContainer = document.createElement("div");
        uploadContainer.id = "uploadContainer";
        uploadContainer.style.position = "fixed";
        uploadContainer.style.top = "20px";
        uploadContainer.style.left = "20px";
        uploadContainer.style.background = "#fff";
        uploadContainer.style.padding = "15px";
        uploadContainer.style.border = "2px solid black";
        uploadContainer.style.borderRadius = "8px";
        uploadContainer.style.zIndex = "10000";
        uploadContainer.style.color = "black";
        uploadContainer.style.display = "flex";
        uploadContainer.style.flexDirection = "column";
        uploadContainer.style.alignItems = "center";
        uploadContainer.style.boxShadow = "0px 4px 10px rgba(0, 0, 0, 0.2)";
        uploadContainer.style.width = "250px";

        const title = document.createElement("h3");
        title.textContent = "Subir Imagen";
        title.style.marginBottom = "10px";
        uploadContainer.appendChild(title);

        const input = document.createElement("input");
        input.type = "file";
        input.accept = "image/*";
        input.style.marginBottom = "10px";
        input.addEventListener("change", handleImageUpload);

        const previewContainer = document.createElement("div");
        previewContainer.id = "previewContainer";
        previewContainer.style.marginTop = "10px";
        previewContainer.style.width = "200px";
        previewContainer.style.height = "200px";
        previewContainer.style.border = "2px solid black";
        previewContainer.style.display = "flex";
        previewContainer.style.alignItems = "center";
        previewContainer.style.justifyContent = "center";
        previewContainer.style.overflow = "hidden";
        previewContainer.style.background = "#f0f0f0";

        const downloadButton = document.createElement("button");
        downloadButton.textContent = "Descargar Imagen";
        downloadButton.style.padding = "5px 10px";
        downloadButton.style.cursor = "pointer";
        downloadButton.style.marginTop = "10px";
        downloadButton.addEventListener("click", downloadImage);

        uploadContainer.appendChild(input);
        uploadContainer.appendChild(previewContainer);
        uploadContainer.appendChild(downloadButton);
        document.body.appendChild(uploadContainer);
    }

    function handleImageUpload(event) {
        const file = event.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = function(e) {
            let existingImg = document.getElementById("recomposedImage");
            if (existingImg) {
                existingImg.src = e.target.result;
            } else {
                const img = new Image();
                img.src = e.target.result;
                img.style.maxWidth = "100%";
                img.style.height = "auto";
                img.id = "recomposedImage";
                
                const previewContainer = document.getElementById("previewContainer");
                previewContainer.innerHTML = ""; // Limpiar anterior
                previewContainer.appendChild(img);
            }
        };
        reader.readAsDataURL(file);
    }

    function downloadImage() {
        const img = document.getElementById("recomposedImage");
        if (!img) {
            alert("No hay imagen para descargar");
            return;
        }
        const link = document.createElement("a");
        link.href = img.src;
        link.download = "recomposed_image.jpg";
        link.click();
    }

    window.addEventListener("load", () => {
        createUploadUI();
        fixPuzzle();
    });
})();
欢迎访问Greasy Fork镜像
