Drawaria Texture changer by 𝘣𝘢𝘳𝘴𝘪𝘬 𝘩𝘢𝘤𝘬𝘦𝘳

Adds a draggable rainbow panel to drawaria.online for selecting and applying custom background textures to page elements
当前为 2025-06-20 提交的版本，查看最新版本。
安装此脚本？
提问、发表评价或者举报此脚本。
换行
// ==UserScript==
// @name         Drawaria Texture changer by 𝘣𝘢𝘳𝘴𝘪𝘬 𝘩𝘢𝘤𝘬𝘦𝘳
// @namespace    https://gf.qytechs.cn/
// @version      1.1
// @description  Adds a draggable rainbow panel to drawaria.online for selecting and applying custom background textures to page elements
// @author       𝘣𝘢𝘳𝘴𝘪𝘬 𝘩𝘢𝘤𝘬𝘦𝘳
// @match        https://drawaria.online/*
// @icon         https://drawaria.online/favicon.ico
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==

(function () {
    'use strict';

    // Create panel
    const panel = document.createElement('div');
    panel.id = 'drawaria-ui-panel';
    panel.innerHTML = `
        <div id="drawaria-ui-header">Texture Replacer</div>
        <div id="drawaria-spinner"></div>
        <div class="content" style="display: none;">
            <label>Target CSS Selector:</label><br>
            <input type="text" id="texture-selector" value="canvas, body"><br><br>
            <label>Select Image File:</label><br>
            <input type="file" id="texture-file" accept="image/*"><br><br>
            <button id="apply-texture-button">Apply Texture</button>
        </div>
    `;
    document.body.appendChild(panel);

    GM_addStyle(`
        #drawaria-ui-panel {
            position: fixed;
            top: 100px;
            right: 30px;
            width: 260px;
            background: linear-gradient(270deg, #ff9a9e, #fad0c4, #a1c4fd, #c2e9fb, #d4fc79, #96e6a1);
            background-size: 1800% 1800%;
            animation: rainbow 20s ease infinite;
            border: 2px solid #333;
            border-radius: 12px;
            z-index: 10000;
            font-family: Arial, sans-serif;
            color: white;
            box-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
            opacity: 1;
        }

        @keyframes rainbow {
            0% {background-position: 0% 50%;}
            50% {background-position: 100% 50%;}
            100% {background-position: 0% 50%;}
        }

        #drawaria-ui-header {
            padding: 12px;
            font-weight: bold;
            font-size: 16px;
            text-align: center;
            background: rgba(0, 0, 0, 0.3);
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            cursor: move;
        }

        #drawaria-ui-panel .content {
            padding: 12px;
            opacity: 0;
            animation: fadeIn 1s ease-out forwards;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        #drawaria-ui-panel input[type="text"],
        #drawaria-ui-panel input[type="file"] {
            width: 100%;
            padding: 6px;
            border-radius: 6px;
            border: 1px solid #aaa;
            background: #1e1e1e;
            color: white;
        }

        #apply-texture-button {
            width: 100%;
            margin-top: 8px;
            padding: 8px;
            background-color: #222;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
        }

        #apply-texture-button:hover {
            background-color: #444;
        }

        #drawaria-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid rgba(255,255,255,0.3);
            border-top: 4px solid #ffffff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 30px auto;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    `);

    // Show panel after 3s
    setTimeout(() => {
        const spinner = document.getElementById('drawaria-spinner');
        const content = panel.querySelector('.content');
        spinner.remove();
        content.style.display = 'block';
    }, 3000);

    // Dragging
    const header = document.getElementById('drawaria-ui-header');
    let offsetX = 0, offsetY = 0, isDragging = false;

    header.addEventListener('mousedown', function (e) {
        isDragging = true;
        offsetX = e.clientX - panel.offsetLeft;
        offsetY = e.clientY - panel.offsetTop;
        document.body.style.userSelect = 'none';
    });

    document.addEventListener('mousemove', function (e) {
        if (isDragging) {
            panel.style.left = (e.clientX - offsetX) + 'px';
            panel.style.top = (e.clientY - offsetY) + 'px';
            panel.style.right = 'auto';
        }
    });

    document.addEventListener('mouseup', function () {
        isDragging = false;
        document.body.style.userSelect = '';
    });

    // Apply texture
    document.getElementById('apply-texture-button').addEventListener('click', function () {
        const fileInput = document.getElementById('texture-file');
        const selector = document.getElementById('texture-selector').value;

        const file = fileInput.files[0];
        if (!file) {
            alert('Please select an image file first.');
            return;
        }

        const reader = new FileReader();
        reader.onload = function (e) {
            const imageDataUrl = e.target.result;
            document.querySelectorAll(selector).forEach(el => {
                el.style.backgroundImage = `url(${imageDataUrl})`;
                el.style.backgroundSize = 'cover';
                el.style.backgroundRepeat = 'no-repeat';
            });
        };
        reader.readAsDataURL(file);
    });
})();
欢迎访问Greasy Fork镜像
