Some more tools around Android icons

2026-03-12 22:52:25 +11:00 · 2026-03-12 22:52:25 +11:00 · c7ff8597aa
commit c7ff8597aa
parent 7f6dcac154
15 changed files with 644 additions and 2 deletions
--- a/site/image-inner-resize/index.html
+++ b/site/image-inner-resize/index.html
@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Image Inner Resize - Tools</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body class="container">
+  <header>
+    <hgroup>
+      <h1>Image Inner Resize</h1>
+      <p>Scale an image within its original dimensions, centered on a transparent background</p>
+    </hgroup>
+  </header>
+  <main class="grid">
+    <section class="controls">
+      <label for="file-input">Select PNG file</label>
+      <input type="file" id="file-input" accept="image/png">
+
+      <label for="scale">Scale: <span id="scale-value">100</span>%</label>
+      <input type="range" id="scale" min="0" max="100" step="5" value="100">
+    </section>
+    <section class="preview">
+      <canvas id="preview-canvas"></canvas>
+      <button id="download-btn" disabled>Download</button>
+    </section>
+  </main>
+  <script src="main.js" type="module"></script>
+</body>
+</html>
--- a/site/image-inner-resize/main.js
+++ b/site/image-inner-resize/main.js
@ -0,0 +1,57 @@
+const fileInput = document.getElementById("file-input");
+const scaleEl = document.getElementById("scale");
+const scaleValueEl = document.getElementById("scale-value");
+const canvas = document.getElementById("preview-canvas");
+const downloadBtn = document.getElementById("download-btn");
+
+let sourceImage = null;
+
+function render() {
+  if (!sourceImage) return;
+
+  const w = sourceImage.naturalWidth;
+  const h = sourceImage.naturalHeight;
+  const scale = parseInt(scaleEl.value) / 100;
+
+  canvas.width = w;
+  canvas.height = h;
+  const ctx = canvas.getContext("2d");
+  ctx.clearRect(0, 0, w, h);
+
+  const sw = w * scale;
+  const sh = h * scale;
+  const sx = (w - sw) / 2;
+  const sy = (h - sh) / 2;
+
+  ctx.drawImage(sourceImage, sx, sy, sw, sh);
+}
+
+fileInput.addEventListener("change", () => {
+  const file = fileInput.files[0];
+  if (!file) return;
+
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    const img = new Image();
+    img.onload = () => {
+      sourceImage = img;
+      downloadBtn.disabled = false;
+      render();
+    };
+    img.src = e.target.result;
+  };
+  reader.readAsDataURL(file);
+});
+
+scaleEl.addEventListener("input", () => {
+  scaleValueEl.textContent = scaleEl.value;
+  render();
+});
+
+downloadBtn.addEventListener("click", () => {
+  if (!sourceImage) return;
+  const link = document.createElement("a");
+  link.download = "resized.png";
+  link.href = canvas.toDataURL("image/png");
+  link.click();
+});
--- a/site/image-inner-resize/style.css
+++ b/site/image-inner-resize/style.css
@ -0,0 +1,23 @@
+.controls {
+  display: flex;
+  flex-direction: column;
+}
+
+.preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+#preview-canvas {
+  max-width: 100%;
+  max-height: 512px;
+  border: 1px solid var(--pico-muted-border-color);
+  border-radius: 4px;
+  background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 16px 16px;
+}
+
+#download-btn {
+  width: 100%;
+}