☰

Drawaria Image Canvas Importer

Import Images Directly to Drawaria Canvas

作者
YouTubeDrawaria
日安装量
0
总安装量
149
评分
0 0 0
版本
1.1
创建于
2024-08-06
更新于
2024-08-06
大小
1.4 KB
许可证
MIT
适用于

🚀 Drawaria Image Canvas Importer

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

English: This script enhances Drawaria by allowing users to import images directly onto the game canvas using drag-and-drop functionality. It also resizes the canvas to a fixed dimension, potentially for better image consistency. Users can drag an image file onto the game window, and the script will load and display it on the canvas, overwriting any existing drawing. This feature is useful for quickly transferring reference images or creating artwork directly within the Drawaria environment.

Español: Este script mejora Drawaria permitiendo a los usuarios importar imágenes directamente en el lienzo del juego utilizando la funcionalidad de arrastrar y soltar. También redimensiona el lienzo a una dimensión fija, potencialmente para una mejor consistencia de imagen. Los usuarios pueden arrastrar un archivo de imagen a la ventana del juego, y el script lo cargará y mostrará en el lienzo, sobrescribiendo cualquier dibujo existente. Esta función es útil para transferir rápidamente imágenes de referencia o crear arte directamente dentro del entorno de Drawaria.

✨ Features / Características

Direct Image Importing
  • 🔧 Fixed Canvas Resize - Resizes the Drawaria canvas to a fixed dimension (780x650).
  • ⚡ Drag-and-Drop Importing - Allows users to drag image files directly onto the canvas.
  • 🎨 Image Display - Loads the dropped image and draws it onto the canvas.
  • 🚀 File Type Validation - Only accepts image files (PNG, JPG) for import.
  • 💡 User-Friendly Interface - Simple and intuitive way to get images onto the canvas.
  • 🔒 Overwrites Existing Drawing - Imported images replace any current drawing on the canvas.

Español:

  • 🔧 Redimensionamiento Fijo del Lienzo - Redimensiona el lienzo de Drawaria a una dimensión fija (780x650).
  • ⚡ Importación por Arrastrar y Soltar - Permite a los usuarios arrastrar archivos de imagen directamente al lienzo.
  • 🎨 Visualización de Imagen - Carga la imagen arrastrada y la dibuja en el lienzo.
  • 🚀 Validación de Tipo de Archivo - Solo acepta archivos de imagen (PNG, JPG) para importar.
  • 💡 Interfaz Fácil de Usar - Manera simple e intuitiva de poner imágenes en el lienzo.
  • 🔒 Sobrescribe Dibujo Existente - Las imágenes importadas reemplazan cualquier dibujo actual en el lienzo.

📥 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. The canvas will resize upon page load, and drag-and-drop functionality will be active.
  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. El lienzo se redimensionará al cargar la página y la funcionalidad de arrastrar y soltar estará activa.

🎮 How to Use / Cómo Usar

  • 🔵 Step 1: Go to the Drawaria website. The canvas will automatically resize.
    Paso 1: Ve al sitio web de Drawaria. El lienzo se redimensionará automáticamente.
  • 🟢 Step 2: Prepare an image file (PNG or JPG) on your computer.
    Paso 2: Prepara un archivo de imagen (PNG o JPG) en tu computadora.
  • 🟣 Step 3: Drag the image file directly onto the Drawaria canvas.
    Paso 3: Arrastra el archivo de imagen directamente al lienzo de Drawaria.
  • 🟠 Step 4: Release the image. It will be loaded and displayed on the canvas, replacing any previous drawing.
    Paso 4: Suelta la imagen. Se cargará y se mostrará en el lienzo, reemplazando cualquier dibujo previo.

🛠️ Technical Details / Detalles Técnicos

Feature / Característica Details / Detalles
Canvas Resizing Directly modifies the `height` and `width` attributes of the canvas element.
Drag-and-Drop API Utilizes the `dragover` and `drop` events on the canvas element.
File Reader API Reads the dropped file as a data URL to be used as an image source.
Canvas Rendering Uses the 2D rendering context (`getContext('2d')`) to draw the image onto the canvas.

⚠️ Important Warnings / Advertencias Importantes
  • 🚨 Resizing the canvas might interfere with other scripts or game functionalities that rely on the original canvas dimensions.
  • 🚨 Ensure the image files you import are within reasonable size limits to avoid performance issues.
  • 🚨 The imported image replaces the current canvas content. There is no undo functionality provided by this script.
  • 🚨 If Drawaria updates its canvas element or structure, this script might need adjustments.

Español:

  • 🚨 Redimensionar el lienzo podría interferir con otros scripts o funcionalidades del juego que dependan de las dimensiones originales del lienzo.
  • 🚨 Asegúrate de que los archivos de imagen que importas estén dentro de límites de tamaño razonables para evitar problemas de rendimiento.
  • 🚨 La imagen importada reemplaza el contenido actual del lienzo. Este script no proporciona funcionalidad de deshacer.
  • 🚨 Si Drawaria actualiza su elemento de lienzo o estructura, este script podría necesitar ajustes.

🔧 Troubleshooting / Solución de Problemas

✅ The canvas resizes correctly, and images can be successfully dragged and dropped onto it.
✅ El lienzo se redimensiona correctamente y las imágenes se pueden arrastrar y soltar en él con éxito.
⚠️ If the canvas doesn't resize or drag-and-drop doesn't work, ensure Tampermonkey is enabled and the script is correctly installed. Check the browser console for errors.
⚠️ Si el lienzo no se redimensiona o el arrastrar y soltar no funciona, asegúrate de que Tampermonkey esté habilitado y el script esté instalado correctamente. Revisa la consola del navegador en busca de errores.
❌ If dropped images do not appear or are distorted, check the image file type and size. Ensure it's a supported format (PNG/JPG) and not excessively large.
❌ Si las imágenes arrastradas no aparecen o están distorsionadas, verifica el tipo y tamaño del archivo de imagen. Asegúrate de que sea un formato compatible (PNG/JPG) y no excesivamente grande.

📊 Compatibility / Compatibilidad

✅ Compatible Browsers / Navegadores Compatibles ✅ Required Extensions / Extensiones Requeridas
Chrome, Firefox, Edge, Opera
(Browsers supporting HTML5 Canvas and Drag-and-Drop 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 Canvas Importer", and disable or delete it.

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

Method 2 - Remove Script Code:

You can edit the script and comment out or remove the lines that resize the canvas and add the event listeners.

Método 2 - Eliminar Código del Script: Puedes editar el script y comentar o eliminar las líneas que redimensionan el lienzo y añaden los listeners de eventos.

💡 Pro Tips / Consejos Profesionales

  • Adjust Canvas Size: Modify the `canvas.height` and `canvas.width` values in the script to change the canvas dimensions to your preference.
  • Add File Type Validation: Improve the script by adding checks for specific image file extensions (e.g., `.png`, `.jpg`, `.jpeg`).
  • Integrate with Chat: Combine this with a chat image sender script to automatically send the imported image URL to the chat after importing.
  • Handle Multiple Files: Extend the drag-and-drop functionality to allow importing multiple images at once, perhaps in a sequential manner or as layers.
  • Error Handling for Images: Add more specific error handling for corrupted image files or unsupported image formats.

Español:

  • Ajusta el Tamaño del Lienzo: Modifica los valores de `canvas.height` y `canvas.width` en el script para cambiar las dimensiones del lienzo a tu gusto.
  • Añade Validación de Tipo de Archivo: Mejora el script añadiendo verificaciones de extensiones de archivo de imagen específicas (ej. `.png`, `.jpg`, `.jpeg`).
  • Integra con el Chat: Combina esto con un script de envío de imágenes al chat para enviar automáticamente la URL de la imagen importada al chat después de la importación.
  • Maneja Múltiples Archivos: Extiende la funcionalidad de arrastrar y soltar para permitir la importación de múltiples imágenes a la vez, quizás de forma secuencial o como capas.
  • Manejo de Errores para Imágenes: Agrega un manejo de errores más específico para archivos de imagen corruptos o formatos de imagen no admitidos.

🎉 Ready to Use! / ¡Listo para Usar!

Easily bring your artwork onto the Drawaria canvas with drag-and-drop image importing!

¡Trae fácilmente tus obras de arte al lienzo de Drawaria con la importación de imágenes por arrastrar y soltar!

🎨 🚀 ✨ 💫 🌟

Author: YouTubeDrawaria | Version: 1.1 | License: MIT
Support: Report issues in the comments below | Additional Info: Allows direct image importing onto the Drawaria canvas via drag-and-drop.