OWOP / OurWorldOfPixels Image Overlay

// ==UserScript==
// @name         Image Overlay
// @namespace    http://tampermonkey.net/
// @version      2024-05-23
// @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.
// @usage        addOverlayImage("URL", 0, 0, 512, 512, 0.5);
// @author       scar17off
// @match        *://ourworldofpixels.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=ourworldofpixels.com
// @grant        none
// ==/UserScript==

function addOverlayImage(imageUrl, x, y, width, height, opacity = 0.5) {
    var elem = document.createElement('div');
    var shown = false;
    var ismag = false;
    elem.style.position = 'fixed';
    elem.style.transformOrigin = 'left top 0px';
    elem.style.overflow = 'hidden';
    elem.style.width = (width * OWOP.camera.zoom) + 'px';
    elem.style.height = (height * OWOP.camera.zoom) + 'px';
    elem.style.backgroundImage = `url("${imageUrl}")`;
    elem.style.opacity = opacity.toString();
    elem.style.backgroundSize = 'contain';

    var move = function() {
        var sc = OWOP.camera.zoom / 16;
        var tx = ((-OWOP.camera.x + x) * OWOP.camera.zoom);
        var ty = ((-OWOP.camera.y + y) * OWOP.camera.zoom);

        if (sc > 1.0 && !ismag) {
            ismag = true;
            elem.style.imageRendering = 'pixelated';
        } else if (sc <= 1.0 && ismag) {
            ismag = false;
            elem.style.imageRendering = 'auto';
        }

        elem.style.transform = 'matrix(' + sc + ',0,0,' + sc + ',' + Math.round(tx) + ',' + Math.round(ty) + ')';
        elem.style.marginLeft = tx < 0 ? Math.abs(tx) + 'px' : '0px';
        elem.style.marginTop = ty < 0 ? Math.abs(ty) + 'px' : '0px';

        // Ensure the element's position is fixed at the top left corner of the viewport
        elem.style.marginTop = '0px';
        elem.style.marginLeft = '0px';

        if (!shown) {
            OWOP.elements.viewport.appendChild(elem);
            shown = true;
        }
    };

    var getColorFromImage = function(event) {
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        var img = new Image();
        img.crossOrigin = "Anonymous"; // Set cross-origin attribute to handle CORS
        img.onload = function() {
            canvas.width = img.width;
            canvas.height = img.height;
            context.drawImage(img, 0, 0, img.width, img.height);
            var x = event.clientX - elem.getBoundingClientRect().left;
            var y = event.clientY - elem.getBoundingClientRect().top;
            var pixel;
            try {
                pixel = context.getImageData(x, y, 1, 1).data;
                OWOP.player.selectedColor = [pixel[0], pixel[1], pixel[2]];
            } catch (e) {
                console.error("Failed to get image data:", e);
            }
        };
        img.src = imageUrl;
    };

    elem.addEventListener('click', function(event) {
        if (event.ctrlKey) {
            getColorFromImage(event);
        }
    });

    if (OWOP.events.camMoved) {
        OWOP.on(OWOP.events.camMoved, move);
        move();
    }
}