☰

Agar.io image to custom skin

Upload image for custom skin

  1. // ==UserScript==
  2. // @name         Agar.io image to custom skin
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.7
  5. // @description  Upload image for custom skin
  6. // @author       New Jack 🕹️
  7. // @match        agar.io/*
  8. // @grant        none
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.   'use strict';
  14.  
  15.   // Create and return a new file input element
  16.   function createButton() {
  17.     const button = document.createElement("input");
  18.     button.type = "file";
  19.     button.accept = "image/*";
  20.     button.id = "customImageUpload";
  21.     return button;
  22.   }
  23.  
  24.   // Insert the given button into a new div element, and insert the div as a child element of the "color-option" element
  25.   function insertButton(button, target) {
  26.     if (target) {
  27.       const newDiv = document.createElement("div");
  28.       newDiv.style.marginTop = "5px"; // Add some space between the divs
  29.       newDiv.appendChild(button);
  30.       target.querySelector(".clear").appendChild(newDiv);
  31.     }
  32.   }
  33.  
  34.   // Convert the uploaded image to a base64 string and draw it on the canvas
  35.   function convertImageToBase64(event) {
  36.     const file = event.target.files[0];
  37.     const reader = new FileReader();
  38.  
  39.     reader.onloadend = function () {
  40.       const base64 = reader.result;
  41.       drawImage(base64);
  42.     };
  43.  
  44.     reader.readAsDataURL(file);
  45.   }
  46.  
  47.   // Draw the given base64 image on the canvas, resizing it to 512x512
  48.   function drawImage(base64) {
  49.     const canvas = document.getElementById("skin-editor-canvas");
  50.     const context = canvas.getContext("2d");
  51.     const image = new Image();
  52.  
  53.     image.onload = function () {
  54.       canvas.width = 512;
  55.       canvas.height = 512;
  56.       context.drawImage(image, 0, 0, 512, 512);
  57.       context.save();
  58.     };
  59.  
  60.     image.src = base64;
  61.   }
  62.  
  63.   // Check for the target element every 5 seconds (5000 milliseconds)
  64.   function checkForTarget() {
  65.     const target = document.querySelector(".left-tools");
  66.  
  67.     if (target) {
  68.       const button = createButton();
  69.       insertButton(button, target);
  70.       button.addEventListener("change", convertImageToBase64);
  71.       clearInterval(checkInterval); // Clear the interval once the button is added
  72.     }
  73.   }
  74.  
  75.   // Start checking for the target element
  76.   const checkInterval = setInterval(checkForTarget, 1000);
  77. })();