Greasy Fork is available in English.
Overlay for Wplace
当前为
// ==UserScript==
// @name Missão Wplace Overlay no DF
// @namespace http://tampermonkey.net/
// @version 0.1.2
// @description Overlay for Wplace
// @author llucarius - modified by lzdavi
// @match https://wplace.live/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=partidomissao.com
// @license MIT
// @grant none
// ==/UserScript==
(async function() {
'use strict';
const [chunk1, chunk2] = ["750", "1115"]
const OVERLAY_MODES = ["overlay", "original"];
let overlayMode = OVERLAY_MODES[0];
let darken = false;
const chunksString = `/${chunk1}/${chunk2}.png`
let cachedOverlayImagePromise = null;
const overlayImage = await getOverlayImage();
const overlayCanvas = new OffscreenCanvas(1000, 1000);
const overlayCtx = overlayCanvas.getContext("2d");
overlayCtx.drawImage(overlayImage, 351, 473, 1000, 1000);
const overlayData = overlayCtx.getImageData(0, 0, 1000, 1000);
fetch = new Proxy(fetch, {
apply: async (target, thisArg, argList) => {
const urlString = typeof argList[0] === "object" ? argList[0].url : argList[0];
let url;
try {
url = new URL(urlString);
} catch (e) {
throw new Error("Invalid URL provided to fetch");
}
if (url.hostname === "backend.wplace.live" && url.pathname.startsWith("/files/") && url.pathname.endsWith(chunksString)) {
if (overlayMode !== "original") {
const originalResponse = await target.apply(thisArg, argList);
const originalBlob = await originalResponse.blob();
const originalImage = await blobToImage(originalBlob);
const width = originalImage.width;
const height = originalImage.height;
const canvas = new OffscreenCanvas(width, height);
const ctx = canvas.getContext("2d");
ctx.drawImage(originalImage, 0, 0, width, height);
const originalData = ctx.getImageData(0, 0, width, height);
const resultData = ctx.getImageData(0, 0, width, height);
const d1 = originalData.data;
const d2 = overlayData.data;
const dr = resultData.data;
for (let i = 0; i < d1.length; i += 4) {
const isTransparent =
d2[i] === 0 &&
d2[i + 1] === 0 &&
d2[i + 2] === 0 &&
d2[i + 3] === 0;
const samePixel =
d1[i] === d2[i] &&
d1[i + 1] === d2[i + 1] &&
d1[i + 2] === d2[i + 2] &&
d1[i + 3] === d2[i + 3];
if (samePixel && !isTransparent) {
dr[i] = 0;
dr[i + 1] = 255;
dr[i + 2] = 0;
dr[i + 3] = 255;
} else if (!isTransparent) {
dr[i] = d2[i];
dr[i + 1] = d2[i + 1];
dr[i + 2] = d2[i + 2];
dr[i + 3] = d2[i + 3];
}
}
ctx.putImageData(resultData, 0, 0);
const mergedBlob = await canvas.convertToBlob();
return new Response(mergedBlob, {
headers: { "Content-Type": "image/png" }
});
}
}
return target.apply(thisArg, argList);
}
});
function blobToImage(blob) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = URL.createObjectURL(blob);
});
}
function loadImage(src) {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = "anonymous";
img.onload = () => resolve(img);
img.onerror = reject;
img.src = src;
});
}
function getOverlayImage() {
if (!cachedOverlayImagePromise) {
cachedOverlayImagePromise = loadImage("data:image/png;base64,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")
}
return cachedOverlayImagePromise;
}
function patchUI() {
if (document.getElementById("overlay-blend-button")) {
return;
}
let blendButton = document.createElement("button");
blendButton.id = "overlay-blend-button";
blendButton.textContent = overlayMode.charAt(0).toUpperCase() + overlayMode.slice(1);
blendButton.style.backgroundColor = "#0e0e0e7f";
blendButton.style.color = "white";
blendButton.style.border = "solid";
blendButton.style.borderColor = "#1d1d1d7f";
blendButton.style.borderRadius = "4px";
blendButton.style.padding = "5px 10px";
blendButton.style.cursor = "pointer";
blendButton.style.backdropFilter = "blur(2px)";
blendButton.addEventListener("click", () => {
overlayMode = OVERLAY_MODES[(OVERLAY_MODES.indexOf(overlayMode) + 1) % OVERLAY_MODES.length];
blendButton.textContent = `${overlayMode.charAt(0).toUpperCase() + overlayMode.slice(1)}`;
});
const buttonContainer = document.querySelector("div.gap-4:nth-child(1) > div:nth-child(2)");
const leftSidebar = document.querySelector("html body div div.disable-pinch-zoom.relative.h-full.overflow-hidden.svelte-6wmtgk div.absolute.right-2.top-2.z-30 div.flex.flex-col.gap-4.items-center");
if (buttonContainer) {
buttonContainer.appendChild(blendButton);
buttonContainer.classList.remove("items-center");
buttonContainer.classList.add("items-end");
}
if (leftSidebar) {
leftSidebar.classList.add("items-end");
leftSidebar.classList.remove("items-center");
}
}
const observer = new MutationObserver(() => {
patchUI();
});
observer.observe(document.querySelector("div.gap-4:nth-child(1)"), {
childList: true,
subtree: true
});
patchUI();
})();