☰

Image Upload Tool for Drawaria

Adds an interactive menu for uploading or dragging-and-dropping images to Drawaria

Author
YouTubeDrawaria
Daily installs
0
Total installs
752
Ratings
0 0 1
Version
1.4
Created
2023-06-04
Updated
2025-08-17
Size
10 KB
License
MIT
Applies to

🚀 Image Upload Tool for Drawaria

Watch the Video: https://youtu.be/nrJyjOw7kaY
And Subscribe: https://www.youtube.com/@YouTubeDrawaria

🎯 What does this script do? / ¿Qué hace este script?

English: This script adds an interactive menu to Drawaria that allows users to easily upload or drag-and-drop images directly onto the canvas. It provides a visual container for image preview and input, along with fields for image prompts and style selection. The tool integrates with the game's drawing functionality, allowing uploaded images to be rendered on the canvas. It also includes controls to start or stop image generation based on prompts and selected styles, effectively acting as a tool to bring user-generated images into the game's drawing environment.

Español: Este script añade un menú interactivo a Drawaria que permite a los usuarios cargar o arrastrar y soltar fácilmente imágenes directamente en el lienzo. Proporciona un contenedor visual para la previsualización y entrada de imágenes, junto con campos para prompts de imagen y selección de estilo. La herramienta se integra con la funcionalidad de dibujo del juego, permitiendo que las imágenes cargadas se rendericen en el lienzo. También incluye controles para iniciar o detener la generación de imágenes basada en prompts y estilos seleccionados, actuando efectivamente como una herramienta para incorporar imágenes generadas por el usuario en el entorno de dibujo del juego.

✨ Features / Características

Image Integration & Generation
  • 🔧 Image Upload & Drag-and-Drop - Easily add images via file selection or by dragging them onto the designated area.
  • ⚡ Visual Preview & Styling - Preview uploaded images and select from various artistic styles.
  • 🎨 Image Generation Controls - Input prompts and set intervals to generate images using the tool.
  • 🚀 Canvas Rendering - Renders the uploaded or generated images onto the Drawaria canvas.
  • 💡 Collapsible Menu - A toggle button allows you to show or hide the image tool menu.
  • 🔒 Floating & Movable Panel - The tool's interface floats on the screen and can be repositioned.

Español:

  • 🔧 Carga y Arrastrar-Soltar Imágenes - Añade fácilmente imágenes mediante selección de archivo o arrastrándolas al área designada.
  • ⚡ Previsualización Visual y Estilo - Previsualiza imágenes cargadas y selecciona entre varios estilos artísticos.
  • 🎨 Controles de Generación de Imágenes - Introduce prompts y establece intervalos para generar imágenes usando la herramienta.
  • 🚀 Renderizado en Lienzo - Renderiza las imágenes cargadas o generadas en el lienzo de Drawaria.
  • 💡 Menú Colapsable - Un botón de alternancia permite mostrar u ocultar el menú de la herramienta de imágenes.
  • 🔒 Panel Flotante y Móvil - La interfaz de la herramienta flota en la pantalla y se puede reposicionar.

📥 Installation / Instalación

🇺🇸 English Instructions 🇪🇸 Instrucciones en Español
  1. Install the Tampermonkey extension (or a similar userscript manager) in your browser.
  2. Create a new userscript and paste the provided code into the editor.
  3. Save the script.
  4. Navigate to any Drawaria page (e.g., https://drawaria.online/).
  5. The image tool menu will appear on the right side of the screen.
  6. Use the toggle button to show or hide the menu.
  1. Instala la extensión Tampermonkey (o un gestor de userscripts similar) en tu navegador.
  2. Crea un nuevo userscript y pega el código proporcionado en el editor.
  3. Guarda el script.
  4. Navega a cualquier página de Drawaria (ej. https://drawaria.online/).
  5. El menú de la herramienta de imágenes aparecerá en el lado derecho de la pantalla.
  6. Usa el botón de alternancia para mostrar u ocultar el menú.

🎮 How to Use / Cómo Usar

  • 🔵 Step 1: Click the "Old Image Script NOT WOKRING" button to reveal the image tool menu.
    Paso 1: Haz clic en el botón "Old Image Script NOT WOKRING" para revelar el menú de la herramienta de imágenes.
  • 🟢 Step 2: Drag an image file into the image container or click it to upload via file browser.
    Paso 2: Arrastra un archivo de imagen al contenedor de imágenes o haz clic en él para subirlo a través del explorador de archivos.
  • 🟣 Step 3: Enter a description in the "Describe the image" field and optionally select a style.
    Paso 3: Introduce una descripción en el campo "Describe the image" y opcionalmente selecciona un estilo.
  • 🟠 Step 4: Click "Begin Drawing" to start generating and drawing the image based on your inputs. Use "Wait" to stop the process.
    Paso 4: Haz clic en "Begin Drawing" para comenzar a generar y dibujar la imagen según tus entradas. Usa "Wait" para detener el proceso.

🛠️ Technical Details / Detalles Técnicos

Feature / Característica Details / Detalles
DOM Manipulation Creates and inserts UI elements (menu, inputs, buttons) into the Drawaria page using JavaScript.
File Handling Utilizes FileReader API for handling image uploads and drag-and-drop events.
Canvas Drawing Interacts with the HTML5 canvas element to draw the uploaded or generated images.
Event Listeners Attaches event listeners for clicks, changes, drag events, and interval timing.

⚠️ Important Warnings / Advertencias Importantes
  • 🚨 Image generation functionality (based on prompts/styles) is dependent on external services or game features not included in this script. This script primarily facilitates image upload.
  • 🚨 Ensure that the Drawaria website's structure (element IDs, class names) remains consistent, as script functionality may break with updates.
  • 🚨 Use uploaded images responsibly and adhere to Drawaria's community guidelines regarding content.
  • 🚨 The script's appearance and functionality are client-side; they affect how you see and interact with the page.

Español:

  • 🚨 La funcionalidad de generación de imágenes (basada en prompts/estilos) depende de servicios externos o características del juego no incluidas en este script. Este script facilita principalmente la carga de imágenes.
  • 🚨 Asegúrate de que la estructura del sitio web de Drawaria (IDs de elementos, nombres de clases) se mantenga consistente, ya que la funcionalidad del script puede romperse con las actualizaciones.
  • 🚨 Usa las imágenes cargadas de manera responsable y cumple con las directrices de la comunidad de Drawaria sobre el contenido.
  • 🚨 La apariencia y funcionalidad del script son del lado del cliente; afectan cómo ves e interactúas con la página.

🔧 Troubleshooting / Solución de Problemas

✅ The image tool menu appears correctly, and images can be uploaded and displayed on the canvas.
✅ El menú de la herramienta de imágenes aparece correctamente, y las imágenes se pueden cargar y mostrar en el lienzo.
⚠️ If the menu is not visible, ensure Tampermonkey is enabled and the script is active. Check the browser console for errors.
⚠️ Si el menú no es visible, asegúrate de que Tampermonkey esté habilitado y el script activo. Revisa la consola del navegador en busca de errores.
❌ If uploaded images do not appear on the canvas, verify that the canvas element (`#canvas`) is correctly identified and that the image rendering logic is functioning.
❌ Si las imágenes cargadas no aparecen en el lienzo, verifica que el elemento del lienzo (`#canvas`) esté identificado correctamente y que la lógica de renderizado de imágenes esté funcionando.

📊 Compatibility / Compatibilidad

✅ Compatible Browsers / Navegadores Compatibles ✅ Required Extensions / Extensiones Requeridas
Chrome, Firefox, Edge, Opera
(Browsers supporting userscripts and File API) 		Tampermonkey or similar userscript manager
(Required for script execution)

🔄 How to Disable / Cómo Desactivar

Method 1 - Script Manager:

Open your userscript manager (e.g., Tampermonkey), find "Image Upload Tool for Drawaria", and disable or delete it.

Método 1 - Gestor de Scripts: Abre tu gestor de userscripts (ej. Tampermonkey), busca "Image Upload Tool for Drawaria" y desactívalo o elimínalo.

Method 2 - Toggle Menu Button:

Click the "Old Image Script NOT WOKRING" button to hide the menu. This does not disable the script's functionality.

Método 2 - Botón de Alternancia de Menú: Haz clic en el botón "Old Image Script NOT WOKRING" para ocultar el menú. Esto no deshabilita la funcionalidad del script.

💡 Pro Tips / Consejos Profesionales

  • Enhance Image Generation: If Drawaria implements AI image generation, integrate its API here to use prompts directly.
  • Multiple Image Uploads: Modify the script to allow uploading multiple images at once or queueing them for drawing.
  • Custom Style Integration: Add more style options or allow users to define custom CSS classes for image rendering.
  • Adjust Drawing Interval: Fine-tune the interval for "Begin Drawing" to control the speed at which uploaded images appear on the canvas.
  • Error Handling: Improve error messages for file type validation, upload failures, or canvas drawing issues.

Español:

  • Mejora la Generación de Imágenes: Si Drawaria implementa generación de imágenes con IA, integra su API aquí para usar los prompts directamente.
  • Carga de Múltiples Imágenes: Modifica el script para permitir la carga de varias imágenes a la vez o ponerlas en cola para dibujar.
  • Integración de Estilo Personalizado: Añade más opciones de estilo o permite a los usuarios definir clases CSS personalizadas para la renderización de imágenes.
  • Ajusta el Intervalo de Dibujo: Ajusta finamente el intervalo para "Begin Drawing" para controlar la velocidad a la que aparecen las imágenes cargadas en el lienzo.
  • Manejo de Errores: Mejora los mensajes de error para la validación de tipos de archivo, fallos de carga o problemas de dibujo en el lienzo.

🎉 Ready to Use! / ¡Listo para Usar!

Easily bring your own images into Drawaria with this versatile upload tool!

¡Trae fácilmente tus propias imágenes a Drawaria con esta versátil herramienta de carga!

🎨 🚀 ✨ 💫 🌟

Author: YouTubeDrawaria | Version: 1.3 | License: MIT
Support: Report issues in the comments below | Additional Info: Facilitates image uploading and basic generation features for Drawaria.