R/Place Custom Image loader

userscript.user.js

// ==UserScript==

// @name r/place imageLoader

// @namespace http://tampermonkey.net/

// @version 1.0

// @description Loads an overlay image on the canvas on r/place!

// @author Igneom

// @match https://hot-potato.reddit.com/embed*

// @icon https://www.google.com/s2/favicons?sz=64&domain=reddit.com

// @grant none

// ==/UserScript==

// Inspired and adapted from https://gist.github.com/oralekin/240d536d13d0a87ecf2474658115621b and https://github.com/lobcog/reddit-place-tracer

if (window.top !== window.self) {

	window.addEventListener('load', () => {

		const imageOverlay = document.createElement("img");
		imageOverlay.id = "CustomOverlayImage"
		imageOverlay.onload = () => {
			imageOverlay.style = `position: absolute; left: 0; top: 0; width: ${imageOverlay.naturalWidth / 3}px; height: ${imageOverlay.naturalHeight / 3}px; image-rendering: pixelated; z-index: 1`;
		};

		const monaLisaCamera = document.getElementsByTagName("mona-lisa-embed")[0].shadowRoot.children[0];

		const monaLisaCanvas = monaLisaCamera.getElementsByTagName("mona-lisa-canvas")[0].shadowRoot.children[0];

		monaLisaCanvas.appendChild(imageOverlay);

		// Add a style to put a hole in the pixel preview (to see the current or desired color)
		const waitForPreview = setInterval(() => {
			const preview = monaLisaCamera.querySelector("mona-lisa-pixel-preview");
			if (preview) {
				clearInterval(waitForPreview);
				const style = document.createElement('style')
				style.innerHTML = '.pixel { clip-path: polygon(-20% -20%, -20% 120%, 37% 120%, 37% 37%, 62% 37%, 62% 62%, 37% 62%, 37% 120%, 120% 120%, 120% -20%); }'
				preview.shadowRoot.appendChild(style);
			}
		}, 100);

		// A div to hold the custom elements.
		const bottomDivElements = document.createElement("div");
		bottomDivElements.id = "CustomOverlayElements";
		bottomDivElements.style = "position: absolute; display: flex; flex-flow: row; justify-content: flex-end; margin: 0.75em; margin-left: 5em; bottom: 1em; gap: 0.75%";

		monaLisaCamera.appendChild(bottomDivElements);

		const inputDiv = document.createElement("div");
		inputDiv.style = "min-width: 155px; height: 24px; display: flex; justify-content: center; align-items: center; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); border-radius: 26px; font-size: 14px; font-weight: 700; line-height: 17px; box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 10px; font-family: var(--mona-lisa-font-sans); width: 21em;";

		bottomDivElements.appendChild(inputDiv);

		const urlLabel = document.createElement("label");
		urlLabel.innerHTML = "Overlay URL";
		urlLabel.style = "margin-right: .5em;";

		inputDiv.appendChild(urlLabel);

		const inputUrl = document.createElement("input");

		inputDiv.appendChild(inputUrl);

		const loadImageButton = document.createElement("button");
		loadImageButton.innerHTML = "Load Image";
		loadImageButton.style = "min-width: 100px; height: 24px; display: flex;	justify-content: center; align-items: center; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); border-radius: 26px; font-size: 14px; font-weight: 700; line-height: 17px; box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 10px; font-family: var(--mona-lisa-font-sans);";
		loadImageButton.onclick = function () { LoadImage(inputUrl.value, true) };

		bottomDivElements.appendChild(loadImageButton);

		const removeImageButton = document.createElement("button");
		removeImageButton.innerHTML = "Remove Image";
		removeImageButton.style = "min-width: 120px; height: 24px; display: flex;	justify-content: center; align-items: center; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); border-radius: 26px; font-size: 14px; font-weight: 700; line-height: 17px; box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 10px; font-family: var(--mona-lisa-font-sans);";
		removeImageButton.onclick = function () { RemoveImage() };

		bottomDivElements.appendChild(removeImageButton);

		const imageUrlValue = "imageUrl";

		let imageUrlSaved = localStorage.getItem(imageUrlValue);

		if (imageUrlSaved) {
			LoadImage(imageUrlSaved, false);
		}

		function LoadImage(imageUrl, setValue) {

			let isImage = CheckIfImageURL(imageUrl);

			if (!isImage) {
				window.alert("Url may not be an image.");
				return;
			}

			if (setValue) {
				localStorage.setItem(imageUrlValue, imageUrl);
			}

			imageOverlay.src = imageUrl;
		}

		function RemoveImage() {

			localStorage.setItem(imageUrlValue, null);

			imageOverlay.src = "#";
		}

	}, false);
}

function CheckIfImageURL(url) {
	return (url.match(/\.(jpeg|jpg|gif|png)$/) != null);
}

A input field and a button is added to the bottom of the canvas, just add the URL of the image and hit load image button.
The image persists between reloads as well.

Images at the moment should be at least with 1000px tall. If reddit adds another canvas below. I will update it to support it properly.

BTW, I don't know jack about javascript, html or css, but it works.