Image Resize Widget

Link to article: Image Resize Widget.

:root {
  --sp_area-max-width: 100vw;
}

#main-content {
  max-width: unset;
  width: 100vw;
}

#page-title,
#page-content > *:not(:has(iframe)),
#page-info-break,
#page-options-container,
#action-area,
#main-content .page-tags {
  max-width: 840px;
  padding-left: 1.5em;
  padding-right: 1.5em;
  margin-left: auto;
  margin-right: auto;
}

#page-content ul {
  padding-left: 5.5em;
}

#header {
  --sp_area-max-width: 960px;
  --sp_area-comp-margin: max(calc((100vw - var(--sp_area-max-width))/2), var(--sp_area-min-margin))
}

(none)

```
horizontal
```
```
selected
```
```
">Paste/Drag
```
```
Image</button>
<button
```
```
id=
```
```
">Use
```
```
Link</button>
<div
```
```
id=
```
```
settings-grid
```

[[include :scp-wiki:component:sigma-plus]]
[[include :scp-wiki:component:toggle-sidebar]]

[[module css]]
:root {
  --sp_area-max-width: 100vw;
}

#main-content {
  max-width: unset;
  width: 100vw;
}

#page-title,
#page-content > *:not(:has(iframe)),
#page-info-break,
#page-options-container,
#action-area,
#main-content .page-tags {
  max-width: 840px;
  padding-left: 1.5em;
  padding-right: 1.5em;
  margin-left: auto;
  margin-right: auto;
}

#page-content ul {
  padding-left: 5.5em;
}

#header {
  --sp_area-max-width: 960px;
  --sp_area-comp-margin: max(calc((100vw - var(--sp_area-max-width))/2), var(--sp_area-min-margin))
}
[[/module]]

The SCP Wiki [https://scp-wiki.wikidot.com/technical-content-policy#toc0 Technical Content Policy] mandates that images be no more than 800kB in size, and not be significantly larger in resolution than how they would normally appear on the screen. Unfortunately, many images (particularly photographs) are significantly larger in both file size and resolution. This tool was created to assist in downsizing and compressing images such that they are compliant with the policy.

__All image processing occurs locally. No image opened with this tool will leave your device.__

[[html]]
<style>

body {
  min-height: 200px;
}

:root {
  font-family: sans-serif;
}

.horizontal {
  display: flex;
  flex-wrap: wrap;

  > * {
    padding: 10px;
  }
}

@media (max-width: 600px) {
  .horizontal {
    flex-direction: column;
  }
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  > label {
    margin-left: 10px;
  }
  
  > * {
    margin-bottom: 6px;
  }
}

#downloadimg {
  margin-top: 6px;
  border: 1px solid #999;
  background-color: #ddd;
  color: black;
  cursor: pointer;
  width: fit-content;
  text-decoration: none;
  font-size: 200%;
  margin-left: 10px;
}

#filecontainer, #linkcontainer {
  width: 180px;
}

#filecontainer input[type=file] {
  max-width: 100%;
}

button.selected {
  border: 2px solid black;
  border-radius: 3px;
}

#scaledisplay {
  margin-bottom: 6px;
}

#errorcontainer {
  max-width: 50%;
}

body.loading::after {
  content: "Loading...";
  font-size: 300%;
  background-color: white;
  color: black;
  padding: 20px;
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 0 0 10px #0007;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

body.loading > * {
  opacity: 0.5;
}

.horizontal {
  margin: auto;
  width: min(840px, 100vw);
}

#imagepreview {
  margin: auto;
  border: 1px solid black;
  margin-bottom: 5px;
}

#pastecontainer {
  font-style: italic;
  color: #666;
}

</style>
<div style="display: none;" id="resistfingerprintingmsg">
<span style="color: #c00;">Warning:</span> This tool will likely not work for you because you have the <code>resistFingerprinting</code> configuration option enabled on Firefox. This configuration option breaks this tool because this tool uses an HTML5 <code>&lt;canvas&gt;</code> element to resize and reformat its images. While this tool's use of the <code>&lt;canvas&gt;</code> is harmless, other sites use the <code>&lt;canvas&gt;</code> in a more nefarious way &mdash; by detecting minute differences in how the <code>&lt;canvas&gt;</code> draws images across different browsers, they are able to uniquely identify you and track you for advertising purposes, a process known as "fingerprinting". To counteract this, <code>resistFingerprinting</code> prevents websites from retrieving any coherent data from <code>&lt;canvas&gt;</code> elements, instead replacing it with random data. However, this also makes it impossible for this tool to extract the resized image from the <code>&lt;canvas&gt;</code> for you to download, even though it does not do any fingerprinting.

To counteract this, you have several options:
<ul>
  <li>Resize images with a different tool, such as <a target="_parent" href="https://imagemagick.org/script/download.php"> ImageMagick</a> or another project listed below.</li>
  <li>Temporarily disable <code>resistFingerprinting</code> in <code>about:config</code></li>
  <li>Use a different browser, such as Brave, Chrome, or Safari.</li>
</ul>
</div>
<div class="horizontal">
<div>
<button id="usefile" class="selected">Use File</button>
<button id="pasteimage" class="">Paste/Drag Image</button>
<button id="uselink" class="">Use Link</button>
<div id="linkcontainer" style="display: none;">
<br>
<label>Image Link:</label>
<br>
<textarea id="imglink" style="width: 100%; height:130px;" placeholder="Paste an image link into this text box. Note that some websites may not load links due to CORS restrictions."></textarea>
<br>
</div>
<div id="pastecontainer" style="display: none;">
<p>Ctrl+V to paste. Alternatively, click and drag an image here.</p>
</div>
<div id="filecontainer" style="">
<br>
<label>Image File:</label>
<br>
<input id="imgfile" type="file" accept="image/*">
<br>
</div>
</div>
<div id="errorcontainer" style="color: #cc0000;"></div>
<div id="showonimageload" style="display: none;">
<div class="settings-grid">
<select id="imageformat" value="image/webp">
  <option value="image/webp">WebP (Recommended)</option>
  <option value="image/jpeg">JPG</option>
  <option value="image/png">PNG (Not Recommended)</option>
</select>
<label>Output Format</label>
<input id="scaleinput" type="range" min="0.03" max="1" value="1" step="0.001">
<label>Scale</label>
<input id="qualityinput" type="range" min="0.0" max="1" value="0.8" step="0.001">
<label id="qualitylabel">Quality</label>
<div>
<div id="scaledisplay"></div>
<div id="sizedisplay"></div>
</div>
<a id="downloadimg">Download</a>
</div>
</div>
</div>
<br>
<img id="imagepreview">
<canvas id="img" style="display: none;"></canvas>

<script>
function setHeight(d) {
   document.body.style.height = `${d}px`;
  if (iframe) iframe.parentElement.removeChild(iframe);
  iframe = document.createElement("iframe");
  document.body.appendChild(iframe);
  iframe.src = `https://scp-sandbox-3.wikidot.com/common--javascript/resize-iframe.html#${d}/${window.location.pathname.split("/").at(-3)}`;
  iframe.style.display = "none";
}

function isResistFingerprintingEnabled() {
  const dummy = document.createElement("canvas");
  const ctx = dummy.getContext("2d");
  ctx.fillStyle = "#000000";
  ctx.fillRect(-1, -1, 3, 3);

  const imageData = ctx.getImageData(0, 0, 1, 1).data;
  return imageData[0] !== 0 || imageData[1] !== 0 || imageData[2] !== 0;
}

if (isResistFingerprintingEnabled()) resistfingerprintingmsg.style.display = "block";

const ctx = img.getContext("2d");

const exts = {
  "image/webp": ".webp",
  "image/jpeg": ".jpg",
  "image/png": ".png"
}

let resultingsize = Infinity;

let imageSrc;
let scale = 1;
let imgname;
const updateImage = throttle(function () {
    let lastImageUrl;
    img.width = imageSrc.width * scale;
    img.height = imageSrc.height * scale;
    ctx.drawImage(imageSrc, 0, 0, imageSrc.width * scale, imageSrc.height * scale);
    return new Promise((resolve, reject) => {
    img.toBlob((blob) => {
       if (lastImageUrl) {
         URL.revokeObjectURL(lastImageUrl);
         lastImageUrl = undefined;
       }
       scaledisplay.innerText = `Dimensions: ${img.width}x${img.height}`;
       const percent = (blob.size / ogfile.size * 100);
       sizedisplay.innerText = `Size: ${Math.round(blob.size/1000)}kB (${percent.toPrecision(3)}% of original size)`;
       resultingsize = percent;
       sizedisplay.style.color = percent > 100 ? "red" : "black";
       lastImageUrl = URL.createObjectURL(blob);
       imagepreview.src = lastImageUrl;
       downloadimg.href = lastImageUrl;
       downloadimg.download = imgname + exts[imageformat.value];
       onSuccess();
       resolve();
       
    }, imageformat.value, Number(qualityinput.value)); });
}, { limits: [], maxConcurrentRequests: 1 });

qualityinput.oninput = () => {
  updateImage();
}

imageformat.oninput = () => {
  updateImage();
  if (imageformat.value === "image/png") {
    qualityinput.style.display = "none";
    qualitylabel.style.display = "none";
  } else {
    qualityinput.style.display = "block";
    qualitylabel.style.display = "block";
  }
}

scaleinput.oninput = () => {
  scale = scaleinput.value;
  updateImage();
}

function onError() {
   showonimageload.style.display = "none";
  imagepreview.style.display = "none";
}

function onSuccess() {
  showonimageload.style.display = "block";
  imagepreview.style.display = "block";
  pastecontainer.style.display = "none";
  errorcontainer.innerText = "";
}

async function registerImageUpdated() {
    errorcontainer.innerText = "";
    scaleinput.value = Math.min(1, 600 / imageSrc.width);
    scale = scaleinput.value;
    qualityinput.value = 0.8;
    await updateImage();
    const lossysize = resultingsize;
    qualityinput.value = 1;
    await updateImage();
    const losslesssize = resultingsize;
    if (losslesssize > lossysize) {
      qualityinput.value = 0.8;
      await updateImage();
    }
}

imglink.oninput= () => {
  try {
    new URL(imglink.value);
  } catch (e) {
    errorcontainer.innerText = `This is not a valid URL.`;
    onError();
    return;
  }

  imageSrc = new Image();
  imageSrc.crossOrigin = "anonymous";
  imageSrc.onload = async () => {
    ogfile = await (await fetch(imglink.value)).blob();
    registerImageUpdated();
  }
  imageSrc.onerror = (e) => {
    console.error(e);
    if (imglink.value.startsWith("https://commons.wikimedia.org")) {
      errorcontainer.innerText = `This is a link to a web page, not a link to an image. Try right-clicking the image to get its link, or clicking "Original file" below the image.`;
    } else {
      errorcontainer.innerText = `Failed to load this link. Make sure you are using a link to an image file, not a link to a web page with an image within it. If you're sure that this is a link to an image, the website may not be letting you retrieve the image due to Cross Origin Request Sharing (CORS) restrictions — try copying and pasting the image or downloading it and reuploading as a file.`;
    }
    onError();
  }
  imgname = imglink.value.match(/\/[^/]*?$/g)?.[0].replace(/\.\w+$/g, "").slice(1);
  imageSrc.src = imglink.value;
}

imgfile.onchange = () => {
  if (imgfile.files[0]) {
    imgname = imgfile.files[0].name.replace(/\.\w+$/g, "");
    loadImage(imgfile.files[0]);
  }
}

let ogfile;
function loadImage(file) {
  ogfile = file;
  imageSrc = new Image();
  document.body.className = "loading";
  imageSrc.onload = () => {
    document.body.className = "";
    registerImageUpdated();
  }
  imageSrc.onerror = (e) => {
    document.body.className = "";
    console.error(e);
    errorcontainer.innerText = `Failed to load this file. It may be corrupted or not an image.`;
    onError();
  }
  imageSrc.src = URL.createObjectURL(file);
}

document.addEventListener("keydown", (e) => {
  if (e.target.tagName === "TEXTAREA" || e.target.tagName === "INPUT") return;
  if (e.key === "v" && e.ctrlKey) {
    document.body.className = "loading";
  }
});

function loadDataTransfer(dt, errmsg) {
  let file = dt.files[0];
  
  if (!file) {
    for (const item of dt.items) {
      if (item.kind === "other") {
        file = item.getAsFile();
        break;
      }
    }
  }
  if (!file) {
    for (const item of dt.items) {
      if (item.kind === "string") {
        item.getAsString(str => {
          imglink.value = str.split("\n")[0];
          uselink.click();
          imglink.oninput();
        });
        return;
      }
    }
  }
  if (!file || !file.type.startsWith("image")) {
    window.alert(errmsg);
    document.body.className = "";
    return false;
  }

  imgname = file.name.replace(/\.\w+$/g, "");

  loadImage(file);
  return true;
}

window.addEventListener("paste", (e) => {
  document.body.className = "loading";
  console.log(e.target.tagName);
  if (e.target.tagName === "TEXTAREA" || e.target.tagName === "INPUT") {
    document.body.className = "";
    return;
  }
  
  if (!loadDataTransfer(e.clipboardData, "You don't have an image in your clipboard.")) return;
  pasteimage.click();
});

let dragDoneTime = 0;

setInterval(() => {
  if (Date.now() > dragDoneTime)
    document.body.style.backgroundColor = "transparent";
}, 50);

document.body.addEventListener("dragover", (e) => {
  document.body.style.backgroundColor = "#dfd";
  e.preventDefault();
  dragDoneTime = Date.now() + 200;
});

document.body.addEventListener("dragend", () => {
  document.body.style.backgroundColor = "transparent";
});

document.body.addEventListener("drop", (e) => {
  document.body.style.backgroundColor = "transparent";
  e.preventDefault();

  if (!loadDataTransfer(e.dataTransfer, "File was unable to be converted into an image.")) return;

  pasteimage.click();
});

uselink.onclick = () => {
  linkcontainer.style.display = "block";
  filecontainer.style.display = "none";
  pastecontainer.style.display = "none";
  uselink.className = "selected";
  usefile.className = "";
  pasteimage.className = "";
}
usefile.onclick = () => {
  linkcontainer.style.display = "none";
  filecontainer.style.display = "block";
  pastecontainer.style.display = "none";
  uselink.className = "";
  usefile.className = "selected";
  pasteimage.className = "";
}
pasteimage.onclick = () => {
  linkcontainer.style.display = "none";
  filecontainer.style.display = "none";
  pastecontainer.style.display = "block";
  uselink.className = "";
  usefile.className = "";
  pasteimage.className = "selected";
}

document.body.addEventListener("resize", () => {
  setHeight(document.body.getBoundingClientRect().height);
});

function throttle(callback, options) {
  let queue = [];
  const requestHistorySize = options.limits.reduce(
    (prev, curr) => Math.max(prev, curr.duration),
    0
  );
  let requestHistory = [];
  const pendingRequests = /* @__PURE__ */ new Set();
  setInterval(() => {
    while (true) {
      const req = queue.at(0);
      if (!req) return;
      const time = Date.now();
      requestHistory = requestHistory.filter(
        (h) => (time - h.time) / 1e3 <= requestHistorySize
      );
      if (pendingRequests.size >= options.maxConcurrentRequests) return;
      for (const l of options.limits) {
        let reqCount = 0;
        for (const h of requestHistory) {
          const secondsAgo = (time - h.time) / 1e3;
          if (secondsAgo <= l.duration) {
            reqCount++;
          }
        }
        if (reqCount >= l.maxRequests) {
          return;
        }
      }
      queue.shift();
      requestHistory.push({
        time: Date.now()
      });
      const responsePromise = callback(...req.params);
      pendingRequests.add(responsePromise);
      (async () => {
        const response = await responsePromise;
        req.callback(response);
        pendingRequests.delete(responsePromise);
      })();
    }
  });
  const fn = (...params) => {
    return new Promise((resolve, reject) => {
      queue.push({
        params,
        callback: (rt) => {
          resolve(rt);
        }
      });
    });
  };
  fn._throttled = true;
  return fn;
}

</script>
[[/html]]

If this tool does not do what you need, consider using the following alternatives:
* [https://imagemagick.org/ ImageMagick] (Cross-Platform)
* [https://www.photopea.com/ Photopea] (Cross-Platform; No Download)
* [https://getpaint.net/ Paint.NET] (Windows)

If you find a bug with this tool, please contact [[*user radian628]] or another member of the [https://05command.wikidot.com/technical-staff-main Technical Team].

Image Resize Widget

Module Styles

Inline Styles

Includes

CSS Classes

Page Source