Advertisement
scar17off

OWOP / OurWorldOfPixels Image Overlay

May 23rd, 2024
462
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 3.21 KB | Source Code | 0 0
  1. // ==UserScript==
  2. // @name         Image Overlay
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2024-05-23
  5. // @description  Adds an overlay to the game that allows you to select colors from the overlayed image. Made in 5 minutes. Ctrl + LMB to select color.
  6. // @usage        addOverlayImage("URL", 0, 0, 512, 512, 0.5);
  7. // @author       scar17off
  8. // @match        *://ourworldofpixels.com/*
  9. // @icon         https://www.google.com/s2/favicons?sz=64&domain=ourworldofpixels.com
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. function addOverlayImage(imageUrl, x, y, width, height, opacity = 0.5) {
  14.     var elem = document.createElement('div');
  15.     var shown = false;
  16.     var ismag = false;
  17.     elem.style.position = 'fixed';
  18.     elem.style.transformOrigin = 'left top 0px';
  19.     elem.style.overflow = 'hidden';
  20.     elem.style.width = (width * OWOP.camera.zoom) + 'px';
  21.     elem.style.height = (height * OWOP.camera.zoom) + 'px';
  22.     elem.style.backgroundImage = `url("${imageUrl}")`;
  23.     elem.style.opacity = opacity.toString();
  24.     elem.style.backgroundSize = 'contain';
  25.  
  26.     var move = function() {
  27.         var sc = OWOP.camera.zoom / 16;
  28.         var tx = ((-OWOP.camera.x + x) * OWOP.camera.zoom);
  29.         var ty = ((-OWOP.camera.y + y) * OWOP.camera.zoom);
  30.  
  31.         if (sc > 1.0 && !ismag) {
  32.             ismag = true;
  33.             elem.style.imageRendering = 'pixelated';
  34.         } else if (sc <= 1.0 && ismag) {
  35.             ismag = false;
  36.             elem.style.imageRendering = 'auto';
  37.         }
  38.  
  39.         elem.style.transform = 'matrix(' + sc + ',0,0,' + sc + ',' + Math.round(tx) + ',' + Math.round(ty) + ')';
  40.         elem.style.marginLeft = tx < 0 ? Math.abs(tx) + 'px' : '0px';
  41.         elem.style.marginTop = ty < 0 ? Math.abs(ty) + 'px' : '0px';
  42.  
  43.         // Ensure the element's position is fixed at the top left corner of the viewport
  44.         elem.style.marginTop = '0px';
  45.         elem.style.marginLeft = '0px';
  46.  
  47.         if (!shown) {
  48.             OWOP.elements.viewport.appendChild(elem);
  49.             shown = true;
  50.         }
  51.     };
  52.  
  53.     var getColorFromImage = function(event) {
  54.         var canvas = document.createElement('canvas');
  55.         var context = canvas.getContext('2d');
  56.         var img = new Image();
  57.         img.crossOrigin = "Anonymous"; // Set cross-origin attribute to handle CORS
  58.         img.onload = function() {
  59.             canvas.width = img.width;
  60.             canvas.height = img.height;
  61.             context.drawImage(img, 0, 0, img.width, img.height);
  62.             var x = event.clientX - elem.getBoundingClientRect().left;
  63.             var y = event.clientY - elem.getBoundingClientRect().top;
  64.             var pixel;
  65.             try {
  66.                 pixel = context.getImageData(x, y, 1, 1).data;
  67.                 OWOP.player.selectedColor = [pixel[0], pixel[1], pixel[2]];
  68.             } catch (e) {
  69.                 console.error("Failed to get image data:", e);
  70.             }
  71.         };
  72.         img.src = imageUrl;
  73.     };
  74.  
  75.     elem.addEventListener('click', function(event) {
  76.         if (event.ctrlKey) {
  77.             getColorFromImage(event);
  78.         }
  79.     });
  80.  
  81.     if (OWOP.events.camMoved) {
  82.         OWOP.on(OWOP.events.camMoved, move);
  83.         move();
  84.     }
  85. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement