Gather Town Capture

Capture screen without UI on gather.town in just a press.

当前为 2022-01-28 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         Gather Town Capture
// @namespace    https://www.moontai0724.tw
// @version      0.2
// @description  Capture screen without UI on gather.town in just a press.
// @author       moontai0724
// @match        https://gather.town/*
// @icon         https://www.google.com/s2/favicons?domain=gather.town
// @grant        MIT
// ==/UserScript==

(function () {
  "use strict";
  const elementsId = [
    "canvas",
    "canvas-entities",
    "canvas-players",
    "canvas-foreground",
    "canvas-private-areas",
    "canvas-names",
  ];

  const settings = {
    scale: undefined,
    cellNumber: {
      height: undefined,
      width: undefined,
    },
  };

  const originalSize = {
    canvasHeight: undefined,
    canvasWidth: undefined,
    containerHeight: undefined,
    containerWidth: undefined,
  };

  function download(changeSize = false) {
    setVariables();
    if (changeSize) changeCanvasSize();
    const canvas = document.createElement("canvas");
    const { height, width } = document.getElementById("canvas");
    canvas.height = height;
    canvas.width = width;

    const sources = document.getElementsByTagName("canvas");
    setTimeout(
      () =>
        Promise.all(
          Array.from(sources).map((element) => {
            return new Promise(function (resolve, reject) {
              const image = new Image();
              image.src = element.toDataURL();
              image.addEventListener("load", (onImageLoadEvent) => {
                const imageData = onImageLoadEvent.target;
                const context = canvas.getContext("2d");
                context.drawImage(imageData, 0, 0);
                resolve();
              });
            });
          })
        ).then(() => {
          const link = document.createElement("a");
          link.download = `${document.title.slice(0, -9)} - ${getTime()}.png`;
          link.href = canvas.toDataURL();
          link.click();
          if (changeSize) recoverCanvasSize();
        }),
      1000
    );
  }

  function setVariables() {
    settings.scale = localStorage.manualCanvasZoom;
    settings.cellNumber.height = gameSpace.maps[gameSpace.mapId].dimensions[0];
    settings.cellNumber.width = gameSpace.maps[gameSpace.mapId].dimensions[1];
    const canvas = document.getElementById("canvas");
    originalSize.canvasHeight = canvas.height;
    originalSize.canvasWidth = canvas.width;
    originalSize.containerHeight = canvas.style.height;
    originalSize.containerWidth = canvas.style.width;
  }

  function getTime() {
    const time = new Date();
    const year = time.getFullYear();
    const month = (time.getMonth() + 1).toString().padStart(2, "0");
    const date = time.getDate().toString().padStart(2, "0");
    const hour = time.getHours().toString().padStart(2, "0");
    const minute = time.getMinutes().toString().padStart(2, "0");
    const second = time.getSeconds().toString().padStart(2, "0");
    const millisecond = time.getMilliseconds();
    return `${year}-${month}-${date}_${hour}-${minute}-${second}.${millisecond}`;
  }

  function recoverCanvasSize() {
    elementsId.forEach((elementId) => {
      const element = document.getElementById(elementId);
      element.width = originalSize.canvasWidth;
      element.height = originalSize.canvasHeight;
      element.style.width = originalSize.containerWidth;
      element.style.height = originalSize.containerHeight;
    });
  }

  function changeCanvasSize() {
    elementsId.forEach((elementId) => {
      const element = document.getElementById(elementId);
      const height = settings.cellNumber.height * settings.scale * 32;
      const canvasRatio = element.width / element.height;
      element.width = height * canvasRatio;
      element.height = height;
      const containerRatio =
        parseInt(element.style.width) / parseInt(element.style.height);
      element.style.width = height * containerRatio;
      element.style.height = height;
    });
  }

  document.addEventListener("keydown", function (keydownEvent) {
    if (!keydownEvent.shiftKey) return;
    if (!(keydownEvent.code === "KeyF" || keydownEvent.code === "KeyP")) return;

    download(keydownEvent.code === "KeyF");
  });
})();