Agar.io image to custom skin (modificado con bordes)

Subir imagen como skin personalizada y aplicar color de borde (negro, blanco, otros)
当前为 2025-06-15 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Agar.io image to custom skin (modificado con bordes)
// @namespace    http://tampermonkey.net/
// @version      0.8
// @description  Subir imagen como skin personalizada y aplicar color de borde (negro, blanco, otros)
// @author       New Jack 🕹️ + modificado por ChatGPT
// @match        https://agar.io/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // Esperar a que cargue el editor de skins
    const interval = setInterval(() => {
        const skinEditor = document.querySelector('.skin-editor-content');
        const saveButton = document.querySelector('.skin-editor-content button.save');

        if (skinEditor && saveButton && !document.getElementById('uploadImageButton')) {
            clearInterval(interval);

            // Crear input de imagen
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';
            input.style.display = 'none';

            // Agregar input al body
            document.body.appendChild(input);

            // Botón "Subir imagen"
            const uploadBtn = document.createElement('button');
            uploadBtn.textContent = 'Subir imagen';
            uploadBtn.id = 'uploadImageButton';
            uploadBtn.style.marginLeft = '8px';
            uploadBtn.style.padding = '6px 10px';
            uploadBtn.style.fontSize = '14px';

            saveButton.parentNode.insertBefore(uploadBtn, saveButton.nextSibling);

            uploadBtn.addEventListener('click', () => {
                input.click();
            });

            input.addEventListener('change', (event) => {
                const file = event.target.files[0];
                if (!file) return;

                const reader = new FileReader();
                reader.onload = (e) => {
                    const img = new Image();
                    img.onload = () => {
                        const canvas = document.querySelector('.skin-editor-canvas canvas');
                        const ctx = canvas.getContext('2d');

                        const size = canvas.width;
                        ctx.clearRect(0, 0, size, size);

                        // Dibujar borde según color seleccionado
                        const selectedColor = document.querySelector('.skin-editor-colors .selected');
                        const colorStyle = getComputedStyle(selectedColor).backgroundColor;

                        // Dibujar borde
                        ctx.beginPath();
                        ctx.arc(size / 2, size / 2, size / 2 - 2, 0, 2 * Math.PI);
                        ctx.fillStyle = colorStyle;
                        ctx.fill();

                        // Dibujar imagen encima
                        const circleRadius = size * 0.4;
                        ctx.save();
                        ctx.beginPath();
                        ctx.arc(size / 2, size / 2, circleRadius, 0, 2 * Math.PI);
                        ctx.clip();

                        ctx.drawImage(img, size * 0.1, size * 0.1, size * 0.8, size * 0.8);
                        ctx.restore();
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(file);
            });
        }
    }, 500);
})();