function processImage(originalImg, scaleFactor = 0.25, preserveOriginalSize = "false") {
// Ensure scaleFactor is a valid number between 0.01 and 1
let scale = Number(scaleFactor);
if (isNaN(scale) || scale <= 0) scale = 0.25;
if (scale > 1) scale = 1;
// Check if we should scale back up for a pixelated look at the original size
const preserve = String(preserveOriginalSize).toLowerCase() === "true";
// Calculate downscaled dimensions
const smWidth = Math.max(1, Math.floor(originalImg.width * scale));
const smHeight = Math.max(1, Math.floor(originalImg.height * scale));
// Create a small canvas to downscale the image
const smallCanvas = document.createElement('canvas');
smallCanvas.width = smWidth;
smallCanvas.height = smHeight;
const smallCtx = smallCanvas.getContext('2d');
// Draw the original image onto the smaller canvas (this shrinks and loses detail)
smallCtx.drawImage(originalImg, 0, 0, smWidth, smHeight);
// If the user wants to retain the original dimensions (creates a pixelated "low-res" aesthetic)
if (preserve) {
const outCanvas = document.createElement('canvas');
outCanvas.width = originalImg.width;
outCanvas.height = originalImg.height;
const outCtx = outCanvas.getContext('2d');
// Disable image smoothing to retain crisp, blocky pixels when scaled up
outCtx.imageSmoothingEnabled = false;
outCtx.mozImageSmoothingEnabled = false;
outCtx.webkitImageSmoothingEnabled = false;
outCtx.msImageSmoothingEnabled = false;
// Draw the shrunk image stretched back over the original sized canvas
outCtx.drawImage(smallCanvas, 0, 0, smWidth, smHeight, 0, 0, outCanvas.width, outCanvas.height);
return outCanvas;
}
// Otherwise, just return the physically smaller image canvas
return smallCanvas;
}The Low Resolution Image Downscaler allows users to reduce the resolution of an image by applying a customizable scale factor. The tool provides the option to either output a physically smaller file or to upscale the downscaled image back to its original dimensions with smoothing disabled. This is useful for creating pixel art aesthetics, achieving a retro ‘low-res’ look for digital designs, or reducing image file sizes for faster web loading.