58 lines
1.4 KiB
JavaScript
58 lines
1.4 KiB
JavaScript
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();
|
|
});
|