☰

Drawaria Image Chat Importer!

Allows you to select and upload an image from your computer to the chatbox.

作者
YouTubeDrawaria
今日安裝
1
安裝總數
207
評價
0 0 0
版本
1.0
建立日期
2024-06-02
更新日期
2024-06-02
尺寸
5.0 KB
授權條款
MIT
腳本執行於

🚀 Drawaria Image Chat Importer!

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

English: This script introduces a new "Upload Image" button to the Drawaria chat interface, allowing users to select and upload an image from their computer. Once uploaded, the image is displayed in the chatbox for the user and its URL is sent as a chat message, making it visible to other players. The script handles image uploading to the Drawaria avatar service and then formats the chat message with the image preview and a clickable link.

Español: Este script introduce un nuevo botón "Upload Image" en la interfaz de chat de Drawaria, permitiendo a los usuarios seleccionar y subir una imagen desde su computadora. Una vez subida, la imagen se muestra en el chatbox para el usuario y su URL se envía como un mensaje de chat, haciéndola visible para otros jugadores. El script se encarga de subir la imagen al servicio de avatares de Drawaria y luego formatea el mensaje de chat con la vista previa de la imagen y un enlace clickeable.

✨ Features / Características

Image Chat Functionality
  • 🔧 Image Upload Button - Adds a button next to existing chat controls to initiate image uploads.
  • ⚡ Direct Image Selection - Allows users to choose image files (PNG, JPG) from their computer.
  • 🎨 In-Chat Image Preview - Displays the uploaded image directly within the chatbox for the user.
  • 🚀 Shareable Image Link - Sends the image URL via chat, making it visible and clickable for other players.
  • 💡 Seamless Integration - Appends the button to the existing UI and uses the Drawaria avatar upload system.
  • 🔒 Error Handling - Basic error logging for file selection and upload issues.

Español:

  • 🔧 Botón de Carga de Imágenes - Añade un botón junto a los controles de chat existentes para iniciar la carga de imágenes.
  • ⚡ Selección Directa de Imágenes - Permite a los usuarios elegir archivos de imagen (PNG, JPG) de su computadora.
  • 🎨 Vista Previa de Imagen en el Chat - Muestra la imagen subida directamente en el chatbox para el usuario.
  • 🚀 Enlace de Imagen Compartible - Envía la URL de la imagen a través del chat, haciéndola visible y clickeable para otros jugadores.
  • 💡 Integración Perfecta - Añade el botón a la UI existente y utiliza el sistema de carga de avatares de Drawaria.
  • 🔒 Manejo de Errores - Registro básico de errores para problemas de selección de archivo y carga.

📥 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 the Drawaria website (https://drawaria.online/).
  5. You should see a new "Upload Image" button next to the gestures button in the chat area.
  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 al sitio web de Drawaria (https://drawaria.online/).
  5. Deberías ver un nuevo botón "Upload Image" junto al botón de gestos en el área de chat.

🎮 How to Use / Cómo Usar

  • 🔵 Step 1: Click the "Upload Image" button in the chat interface.
    Paso 1: Haz clic en el botón "Upload Image" en la interfaz del chat.
  • 🟢 Step 2: Select an image file (PNG or JPG) from your computer using the file dialog.
    Paso 2: Selecciona un archivo de imagen (PNG o JPG) de tu computadora usando el diálogo de archivos.
  • 🟣 Step 3: The image will be uploaded, and a preview will appear in your chat history.
    Paso 3: La imagen se subirá y aparecerá una vista previa en tu historial de chat.
  • 🟠 Step 4: The image URL will also be sent as a chat message, visible to others.
    Paso 4: La URL de la imagen también se enviará como un mensaje de chat, visible para otros.

🛠️ Technical Details / Detalles Técnicos

Feature / Característica Details / Detalles
DOM Manipulation Injects a new button into the Drawaria chat UI and manipulates the chatbox to display images.
File Handling Uses FileReader API to read image files selected by the user.
AJAX Upload Sends image data to Drawaria's backend service using fetch API for avatar upload.
Socket Emission Uses the Socket.IO library (assumed global) to emit chat messages containing image URLs.

⚠️ Important Warnings / Advertencias Importantes
  • 🚨 This script relies on Drawaria's current UI structure and backend endpoints for avatar uploads and chat messages. Updates to Drawaria may break functionality.
  • 🚨 Only upload appropriate images that comply with Drawaria's community guidelines.
  • 🚨 The uploaded image is processed via Drawaria's avatar system, which may have file size or format limitations.
  • 🚨 Ensure you have a stable internet connection for uploading images.

Español:

  • 🚨 Este script depende de la estructura de UI actual de Drawaria y los endpoints de backend para la carga de avatares y mensajes de chat. Las actualizaciones de Drawaria pueden afectar la funcionalidad.
  • 🚨 Sube solo imágenes apropiadas que cumplan con las directrices de la comunidad de Drawaria.
  • 🚨 La imagen subida se procesa a través del sistema de avatares de Drawaria, que puede tener limitaciones de tamaño de archivo o formato.
  • 🚨 Asegúrate de tener una conexión a internet estable para subir imágenes.

🔧 Troubleshooting / Solución de Problemas

✅ The "Upload Image" button appears correctly, and selecting an image shows a preview in the chat and sends a link.
✅ El botón "Upload Image" aparece correctamente, y la selección de una imagen muestra una vista previa en el chat y envía un enlace.
⚠️ If the button is missing or doesn't work, ensure Tampermonkey is enabled and the script is correctly installed. Check the browser console for errors related to button placement or file handling.
⚠️ Si el botón falta o no funciona, asegúrate de que Tampermonkey esté habilitado y el script esté instalado correctamente. Revisa la consola del navegador en busca de errores relacionados con la ubicación del botón o el manejo de archivos.
❌ If the image upload fails or no preview appears, check your internet connection and ensure the file is a supported image format (PNG/JPG) within size limits. Verify the console for upload errors.
❌ Si la carga de la imagen falla o no aparece vista previa, verifica tu conexión a internet y asegúrate de que el archivo sea un formato de imagen compatible (PNG/JPG) dentro de los límites de tamaño. Verifica la consola en busca de errores de carga.

📊 Compatibility / Compatibilidad

✅ Compatible Browsers / Navegadores Compatibles ✅ Required Extensions / Extensiones Requeridas
Chrome, Firefox, Edge, Opera
(Browsers supporting userscripts, Fetch API, 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 "Drawaria Image Chat Importer!", and disable or delete it.

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

Method 2 - Remove Button:

You can manually remove the `uploadButton` element from the DOM if you temporarily want to disable its functionality without disabling the entire script.

Método 2 - Eliminar Botón: Puedes eliminar manualmente el elemento `uploadButton` del DOM si deseas deshabilitar temporalmente su funcionalidad sin deshabilitar el script completo.

💡 Pro Tips / Consejos Profesionales

  • Optimize Image Size: Resize images before uploading to ensure they are within Drawaria's limits and load quickly.
  • Improve Chat Display: Modify `addChatMessageWithImage` to better control how images appear in the chat (e.g., adding borders, sizing options).
  • Batch Uploads: Extend the script to allow selecting multiple files at once and uploading them sequentially.
  • Add Error Handling for Socket: Implement more robust error checks for the socket emission part to ensure messages are sent correctly.
  • Custom Chat Message Formatting: Personalize the chat message structure, perhaps adding the player's name or a timestamp.

Español:

  • Optimiza el Tamaño de la Imagen: Redimensiona las imágenes antes de subirlas para asegurarte de que estén dentro de los límites de Drawaria y se carguen rápidamente.
  • Mejora la Visualización del Chat: Modifica `addChatMessageWithImage` para controlar mejor cómo aparecen las imágenes en el chat (por ejemplo, añadiendo bordes, opciones de tamaño).
  • Cargas por Lotes: Extiende el script para permitir la selección de varios archivos a la vez y subirlos secuencialmente.
  • Añade Manejo de Errores para el Socket: Implementa comprobaciones de errores más robustas para la parte de emisión del socket para asegurar que los mensajes se envíen correctamente.
  • Formato Personalizado de Mensajes de Chat: Personaliza la estructura del mensaje de chat, quizás añadiendo el nombre del jugador o una marca de tiempo.

🎉 Ready to Use! / ¡Listo para Usar!

Share your creations and reactions instantly by uploading images directly to the chat!

¡Comparte tus creaciones y reacciones instantáneamente subiendo imágenes directamente al chat!

🎨 🚀 ✨ 💫 🌟

Author: YouTubeDrawaria | Version: 1.0 | License: MIT
Support: Report issues in the comments below | Additional Info: Enables image uploading and sharing directly within the Drawaria chat.