Agar.io Custom Skin with Border (White/Black)

Subir una imagen y añadir borde blanco o negro en Agar.io
换行
// ==UserScript==
// @name         Agar.io Custom Skin with Border (White/Black)
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Subir una imagen y añadir borde blanco o negro en Agar.io
// @author       YourName
// @match        *://agar.io/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // Agregar estilos para la interfaz dentro del juego (cerca del selector de color de skin)
    GM_addStyle(`
        #upload-skin-container {
            position: absolute;
            top: 50px; /* Ajustar esta posición si es necesario */
            left: 50px; /* Ajustar esta posición si es necesario */
            z-index: 9999;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 10px;
            border-radius: 5px;
            color: white;
        }
        #upload-skin-container input[type="file"] {
            margin-right: 10px;
        }
        #upload-skin-container select {
            margin-right: 10px;
        }
        #upload-skin-container button {
            margin-left: 10px;
            cursor: pointer;
        }
        #uploaded-image {
            margin-top: 10px;
            max-width: 200px;
            max-height: 200px;
            display: block;
        }
    `);

    // Crear la interfaz para cargar imagen y seleccionar el borde
    const uploadSkinContainer = document.createElement('div');
    uploadSkinContainer.id = 'upload-skin-container';
    uploadSkinContainer.innerHTML = `
        <input type="file" id="imageUpload" accept="image/*">
        <select id="borderSelect">
            <option value="none">Elegir borde (Negro o Blanco)</option>
            <option value="white">Borde blanco</option>
            <option value="black">Borde negro</option>
        </select>
        <button id="applySkinBtn">Aplicar skin</button>
        <img id="uploaded-image" src="" alt="Imagen cargada" style="display: none;">
    `;
    document.body.appendChild(uploadSkinContainer);

    let image = null;
    let borderColor = 'none';

    // Mostrar la imagen cargada
    document.getElementById('imageUpload').addEventListener('change', (event) => {
        const reader = new FileReader();
        reader.onload = function() {
            const img = new Image();
            img.onload = function() {
                image = img;
                const uploadedImageElement = document.getElementById('uploaded-image');
                uploadedImageElement.src = reader.result;
                uploadedImageElement.style.display = 'block';
            };
            img.src = reader.result;
        };
        reader.readAsDataURL(event.target.files[0]);
    });

    // Selección del color de borde
    document.getElementById('borderSelect').addEventListener('change', (event) => {
        borderColor = event.target.value;
    });

    // Función para aplicar la skin con borde
    document.getElementById('applySkinBtn').addEventListener('click', () => {
        if (image) {
            applySkinWithBorder(image, borderColor);
        } else {
            alert('Por favor, carga una imagen primero.');
        }
    });

    // Función para aplicar borde a la imagen usando canvas
    function applySkinWithBorder(img, borderColor) {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        const radius = Math.min(img.width, img.height) / 2;
        canvas.width = img.width;
        canvas.height = img.height;

        ctx.beginPath();
        ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, 2 * Math.PI);
        ctx.clip();

        // Dibujar la imagen recortada al círculo
        ctx.drawImage(img, 0, 0, img.width, img.height);

        // Aplicar borde si es necesario
        if (borderColor !== 'none') {
            ctx.lineWidth = 10;
            ctx.strokeStyle = borderColor;
            ctx.stroke();
        }

        // Convertir el canvas a imagen y aplicarla como skin
        const skinImage = new Image();
        skinImage.src = canvas.toDataURL();
        skinImage.onload = function() {
            // Aquí aplicar la imagen al juego
            // Suponiendo que hay una función para aplicar la skin en Agar.io
            applyCustomSkin(skinImage);
        };
    }

    // Función hipotética para aplicar la skin al juego (deberás adaptarla según el juego)
    function applyCustomSkin(skin) {
        // Aquí el código para aplicar la skin al juego (dependiendo de cómo Agar.io permita hacerlo)
        console.log('Aplicando skin personalizada al juego...', skin);
    }

    // Esperar a que el juego cargue para mostrar los botones
    function checkGameLoaded() {
        const gameCanvas = document.getElementById('canvas');
        if (gameCanvas) {
            // El juego se ha cargado, mostrar los botones
            uploadSkinContainer.style.display = 'block';
        } else {
            // El juego aún no se ha cargado, seguir esperando
            setTimeout(checkGameLoaded, 1000);
        }
    }

    // Llamar a la función que espera el juego cargado
    checkGameLoaded();
})();
欢迎访问Greasy Fork镜像
