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. })();