☰

Drawaria Image Chat Importer!

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

当前为 2024-06-02 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Drawaria Image Chat Importer!
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Allows you to select and upload an image from your computer to the chatbox.
  6. // @author       YouTubeDrawaria
  7. // @match        https://drawaria.online/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=drawaria.online
  9. // @license      MIT
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Función para crear un elemento de imagen con la fuente de la imagen seleccionada
  17.     function createImageElement(src) {
  18.         var img = document.createElement('img');
  19.         img.src = src;
  20.         img.style.maxWidth = '100%'; // Ajusta el tamaño de la imagen al tamaño del contenedor
  21.         return img;
  22.     }
  23.  
  24.     // Función para agregar un mensaje de chat con una imagen al chatbox
  25.     function addChatMessageWithImage(imageSrc, imageUrl) {
  26.         var chatbox = document.getElementById('chatbox_messages');
  27.         if (!chatbox) {
  28.             console.error('Chatbox element not found.');
  29.             return;
  30.         }
  31.  
  32.         var messageDiv = document.createElement('div');
  33.         messageDiv.className = 'chatmessage playerchatmessage-highlightable';
  34.         messageDiv.dataset.playerid = '1';
  35.         messageDiv.dataset.ts = Date.now();
  36.  
  37.         // Elemento para la imagen visible solo para el usuario
  38.         var imageElement = createImageElement(imageSrc);
  39.         messageDiv.appendChild(imageElement);
  40.  
  41.         // Elemento de enlace para los otros jugadores
  42.         var linkElement = document.createElement('a');
  43.         linkElement.href = imageUrl;
  44.         linkElement.textContent = '';
  45.         linkElement.target = '_blank';
  46.         messageDiv.appendChild(linkElement);
  47.  
  48.         chatbox.appendChild(messageDiv);
  49.         chatbox.scrollTop = chatbox.scrollHeight; // Scroll to the bottom
  50.     }
  51.  
  52.     /**
  53.      * Utility :
  54.      * Easily upload an Image for your Avatar
  55.      */
  56.     function uploadToAvatar(img, callback) {
  57.         fetch(window.LOGGEDIN ? 'https://drawaria.online/saveavatar' : 'https://drawaria.online/uploadavatarimage', {
  58.             method: 'POST',
  59.             body: 'imagedata=' + encodeURIComponent(img) + '&fromeditor=true',
  60.             headers: {
  61.                 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
  62.                 Accept: 'text/plain, */*; q=0.01',
  63.                 'X-Requested-With': 'XMLHttpRequest',
  64.             },
  65.         }).then((response) => {
  66.             if (response.ok) {
  67.                 const imageUrl = 'https://drawaria.online/avatar/cache/' + encodeURIComponent(img);
  68.                 callback(null, imageUrl);
  69.             } else {
  70.                 callback(response.statusText);
  71.             }
  72.         }).catch((error) => {
  73.             callback('Upload error: ' + error.message);
  74.         });
  75.     }
  76.  
  77.     /**
  78.      * Socket event emitters
  79.      */
  80.     const emits = {
  81.         chatmsg: function (message) {
  82.             let data = ['chatmsg', message];
  83.             return `${42}${JSON.stringify(data)}`;
  84.         }
  85.     };
  86.  
  87.     // Agrega un botón al lado del botón secundario
  88.     var secondaryButton = document.getElementById('gesturespickerbutton');
  89.     if (!secondaryButton) {
  90.         console.error('Secondary button not found.');
  91.         return;
  92.     }
  93.  
  94.     var uploadButton = document.createElement('button');
  95.     uploadButton.textContent = 'Upload Image';
  96.     uploadButton.style.marginLeft = '5px'; // Espacio entre el botón secundario y el nuevo botón
  97.  
  98.     // Event listener para el botón de carga de imagen
  99.     uploadButton.addEventListener('click', function() {
  100.         var fileInput = document.createElement('input');
  101.         fileInput.type = 'file';
  102.         fileInput.accept = 'image/png, image/jpeg';
  103.         fileInput.click();
  104.  
  105.         fileInput.addEventListener('change', function() {
  106.             var file = fileInput.files[0];
  107.             if (!file) {
  108.                 console.error('No file selected.');
  109.                 return;
  110.             }
  111.  
  112.             var reader = new FileReader();
  113.             reader.onload = function(e) {
  114.                 var imageSrc = e.target.result;
  115.  
  116.                 // Subir la imagen al servidor
  117.                 uploadToAvatar(imageSrc, function(error, imageUrl) {
  118.                     if (error) {
  119.                         console.error(error);
  120.                         return;
  121.                     }
  122.  
  123.                     // Agregar el mensaje de chat con la imagen y el enlace
  124.                     addChatMessageWithImage(imageSrc, imageUrl);
  125.  
  126.                     // Emitir el mensaje de chat con el enlace para otros jugadores
  127.                     const socket = io(); // Asumiendo que `io` está disponible en el ámbito global para conectarse al socket
  128.                     socket.emit('chatmsg', emits.chatmsg(imageUrl));
  129.                 });
  130.             };
  131.             reader.readAsDataURL(file);
  132.         });
  133.     });
  134.  
  135.     secondaryButton.parentNode.insertBefore(uploadButton, secondaryButton.nextSibling);
  136.  
  137.     // Elimina el botón de gestos
  138.     secondaryButton.remove();
  139. })();