Subir imagen de rompecabezas

Agrega un botón para subir una imagen de rompecabezas a una página web.
当前为 2025-02-15 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Subir imagen de rompecabezas
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Agrega un botón para subir una imagen de rompecabezas a una página web.
// @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 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);

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

    // Evento para cargar la imagen
    fileInput.addEventListener("change", function(event) {
        let file = event.target.files[0];
        if (file) {
            let reader = new FileReader();
            reader.onload = function(e) {
                let img = document.createElement("img");
                img.src = e.target.result;
                img.style.position = "absolute";
                img.style.top = "50px";
                img.style.left = "50px";
                img.style.width = "300px"; // Ajusta según necesites
                img.style.border = "2px solid black";
                img.style.cursor = "move";
                img.draggable = true;

                // Permitir mover la imagen
                img.addEventListener("mousedown", function(e) {
                    let shiftX = e.clientX - img.getBoundingClientRect().left;
                    let shiftY = e.clientY - img.getBoundingClientRect().top;

                    function moveAt(pageX, pageY) {
                        img.style.left = pageX - shiftX + "px";
                        img.style.top = pageY - shiftY + "px";
                    }

                    function onMouseMove(event) {
                        moveAt(event.pageX, event.pageY);
                    }

                    document.addEventListener("mousemove", onMouseMove);

                    img.addEventListener("mouseup", function() {
                        document.removeEventListener("mousemove", onMouseMove);
                    }, { once: true });
                });

                document.body.appendChild(img);
            };
            reader.readAsDataURL(file);
        }
    });
})();
欢迎访问Greasy Fork镜像
