Rompecabezas Automático

Sube una imagen, genera un rompecabezas y lo recompone automáticamente.
当前为 2025-02-15 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Rompecabezas Automático
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  Sube una imagen, genera un rompecabezas y lo recompone automáticamente.
// @author       Tú
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Crear botón para subir imagen
    let uploadButton = document.createElement("button");
    uploadButton.innerText = "Subir imagen";
    uploadButton.style.position = "fixed";
    uploadButton.style.top = "10px";
    uploadButton.style.right = "10px";
    uploadButton.style.zIndex = "9999";
    uploadButton.style.padding = "10px";
    uploadButton.style.background = "blue";
    uploadButton.style.color = "white";
    uploadButton.style.border = "none";
    uploadButton.style.cursor = "pointer";
    document.body.appendChild(uploadButton);

    // Crear botón para descargar la imagen reconstruida
    let downloadButton = document.createElement("button");
    downloadButton.innerText = "Descargar imagen";
    downloadButton.style.position = "fixed";
    downloadButton.style.top = "50px";
    downloadButton.style.right = "10px";
    downloadButton.style.zIndex = "9999";
    downloadButton.style.padding = "10px";
    downloadButton.style.background = "green";
    downloadButton.style.color = "white";
    downloadButton.style.border = "none";
    downloadButton.style.cursor = "pointer";
    downloadButton.style.display = "none";
    document.body.appendChild(downloadButton);

    // Crear input oculto para seleccionar la imagen
    let fileInput = document.createElement("input");
    fileInput.type = "file";
    fileInput.accept = "image/*";
    fileInput.style.display = "none";
    document.body.appendChild(fileInput);

    // Contenedor del rompecabezas
    let puzzleContainer = document.createElement("div");
    puzzleContainer.style.position = "fixed";
    puzzleContainer.style.top = "100px";
    puzzleContainer.style.left = "50px";
    puzzleContainer.style.width = "400px";
    puzzleContainer.style.height = "400px";
    puzzleContainer.style.border = "2px solid black";
    puzzleContainer.style.display = "grid";
    puzzleContainer.style.zIndex = "9999";
    document.body.appendChild(puzzleContainer);

    // Evento para abrir el selector de archivos
    uploadButton.addEventListener("click", function() {
        fileInput.click();
    });

    // Evento para cargar la imagen y generar el rompecabezas
    fileInput.addEventListener("change", function(event) {
        let file = event.target.files[0];
        if (file) {
            let reader = new FileReader();
            reader.onload = function(e) {
                let img = new Image();
                img.src = e.target.result;
                img.onload = function() {
                    generatePuzzle(img);
                };
            };
            reader.readAsDataURL(file);
        }
    });

    function generatePuzzle(image) {
        let rows = 3;
        let cols = 3;
        let pieceWidth = image.width / cols;
        let pieceHeight = image.height / rows;
        puzzleContainer.style.width = image.width + "px";
        puzzleContainer.style.height = image.height + "px";
        puzzleContainer.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
        puzzleContainer.style.gridTemplateRows = `repeat(${rows}, 1fr)`;
        puzzleContainer.innerHTML = "";

        let pieces = [];

        // Crear piezas del rompecabezas
        for (let row = 0; row < rows; row++) {
            for (let col = 0; col < cols; col++) {
                let canvas = document.createElement("canvas");
                canvas.width = pieceWidth;
                canvas.height = pieceHeight;
                let ctx = canvas.getContext("2d");
                ctx.drawImage(image, col * pieceWidth, row * pieceHeight, pieceWidth, pieceHeight, 0, 0, pieceWidth, pieceHeight);

                let piece = document.createElement("div");
                piece.style.width = `${100 / cols}%`;
                piece.style.height = `${100 / rows}%`;
                piece.style.backgroundImage = `url(${canvas.toDataURL()})`;
                piece.style.backgroundSize = `${cols * 100}% ${rows * 100}%`;
                piece.style.backgroundPosition = `-${col * pieceWidth}px -${row * pieceHeight}px`;
                piece.style.border = "1px solid black";
                piece.dataset.row = row;
                piece.dataset.col = col;

                pieces.push(piece);
            }
        }

        // Desordenar piezas y agregarlas al contenedor
        let shuffledPieces = pieces.slice().sort(() => Math.random() - 0.5);
        shuffledPieces.forEach(piece => puzzleContainer.appendChild(piece));

        // Recomponer automáticamente el rompecabezas después de 3 segundos
        setTimeout(() => {
            puzzleContainer.innerHTML = "";
            pieces.sort((a, b) => (a.dataset.row - b.dataset.row) || (a.dataset.col - b.dataset.col));
            pieces.forEach(piece => puzzleContainer.appendChild(piece));

            // Mostrar botón de descarga
            downloadButton.style.display = "block";
        }, 3000);
    }

    // Descargar la imagen reconstruida
    downloadButton.addEventListener("click", function() {
        let canvas = document.createElement("canvas");
        let ctx = canvas.getContext("2d");

        let img = puzzleContainer.querySelector("div");
        let imgWidth = img.offsetWidth * 3;
        let imgHeight = img.offsetHeight * 3;

        canvas.width = imgWidth;
        canvas.height = imgHeight;

        let pieces = puzzleContainer.querySelectorAll("div");
        let pieceWidth = imgWidth / 3;
        let pieceHeight = imgHeight / 3;

        pieces.forEach(piece => {
            let row = piece.dataset.row;
            let col = piece.dataset.col;
            let image = new Image();
            image.src = piece.style.backgroundImage.replace('url("', "").replace('")', "");

            image.onload = function() {
                ctx.drawImage(image, col * pieceWidth, row * pieceHeight, pieceWidth, pieceHeight);
                if (row == 2 && col == 2) {
                    let link = document.createElement("a");
                    link.href = canvas.toDataURL();
                    link.download = "imagen_reconstruida.png";
                    link.click();
                }
            };
        });
    });

})();
欢迎访问Greasy Fork镜像
