Agar.io - Subir Imagen como Skin Personalizada con Borde

Sube una imagen como skin personalizada y aplica color de borde (blanco, negro, otros).
安裝腳本 ?
換行
// ==UserScript==
// @name         Agar.io - Subir Imagen como Skin Personalizada con Borde
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Sube una imagen como skin personalizada y aplica color de borde (blanco, negro, otros).
// @author       GPT Pro
// @match        *://agar.io/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // Esperar a que el DOM cargue completamente
    const waitForTarget = setInterval(() => {
        const saveButton = document.querySelector('button[class*="save"]');
        const colorPicker = document.querySelector('div[class*="ColorPicker-module__container"]');

        if (saveButton && colorPicker) {
            clearInterval(waitForTarget);

            // Crear botón de subir imagen
            const uploadBtn = document.createElement("input");
            uploadBtn.type = "file";
            uploadBtn.accept = "image/*";
            uploadBtn.style.marginLeft = "12px";
            uploadBtn.title = "Subir imagen como skin";
            uploadBtn.style.cursor = "pointer";

            // Insertar el botón al lado del botón Save
            saveButton.parentNode.insertBefore(uploadBtn, saveButton.nextSibling);

            // Escuchar cuando se sube la imagen
            uploadBtn.addEventListener("change", function (event) {
                const file = event.target.files[0];
                if (!file) return;

                const reader = new FileReader();
                reader.onload = function (e) {
                    const imageData = e.target.result;

                    // Detectar color de borde
                    const colorIndex = [...colorPicker.querySelectorAll("button")].findIndex(btn => btn.classList.contains("selected")) + 1;
                    let borderColor = "#FF0000"; // por defecto rojo

                    if (colorIndex === 1) borderColor = "#FFFFFF"; // blanco
                    else if (colorIndex === 2) borderColor = "#000000"; // negro

                    // Crear skin circular con borde en canvas
                    const canvas = document.createElement("canvas");
                    const size = 256;
                    canvas.width = size;
                    canvas.height = size;
                    const ctx = canvas.getContext("2d");

                    const img = new Image();
                    img.onload = function () {
                        // Dibujar borde
                        ctx.beginPath();
                        ctx.arc(size / 2, size / 2, size / 2 - 2, 0, 2 * Math.PI);
                        ctx.fillStyle = borderColor;
                        ctx.fill();

                        // Crear máscara circular
                        ctx.save();
                        ctx.beginPath();
                        ctx.arc(size / 2, size / 2, size / 2 - 8, 0, 2 * Math.PI);
                        ctx.clip();

                        // Dibujar imagen dentro del círculo
                        ctx.drawImage(img, 0, 0, size, size);
                        ctx.restore();

                        // Convertir a base64
                        const finalImage = canvas.toDataURL("image/png");

                        // Insertar skin en el editor
                        const preview = document.querySelector('canvas');
                        if (preview) {
                            const previewCtx = preview.getContext("2d");
                            const skin = new Image();
                            skin.onload = function () {
                                previewCtx.clearRect(0, 0, preview.width, preview.height);
                                previewCtx.drawImage(skin, 0, 0, preview.width, preview.height);
                            };
                            skin.src = finalImage;
                        }

                        // Guardar skin automáticamente
                        localStorage.setItem("customSkinImage", finalImage);
                    };
                    img.src = imageData;
                };
                reader.readAsDataURL(file);
            });
        }
    }, 1000);
})();
欢迎访问Greasy Fork镜像
