Some more tools around Android icons

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();
+});