function processImage(originalImg, aspectRatio = "2:1") {
// Create the output canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Parse the aspect ratio. If the cryptic "22-1-" is passed, default to 2:1
let targetRatio = 2 / 1;
if (aspectRatio !== "22-1-") {
// Supports formats like "2:1", "2-1", or "2/1"
const parts = aspectRatio.split(/[:\-\/]/);
if (parts.length >= 2) {
const widthRatio = parseFloat(parts[0]);
const heightRatio = parseFloat(parts[1]);
if (!isNaN(widthRatio) && !isNaN(heightRatio) && heightRatio !== 0) {
targetRatio = widthRatio / heightRatio;
}
}
}
const imgWidth = originalImg.width;
const imgHeight = originalImg.height;
const currentRatio = imgWidth / imgHeight;
let cropWidth = imgWidth;
let cropHeight = imgHeight;
let offsetX = 0;
let offsetY = 0;
// Calculate dimensions to neatly crop the image to the target aspect ratio
if (currentRatio > targetRatio) {
// Image is wider than the target ratio; crop the left and right sides
cropWidth = imgHeight * targetRatio;
offsetX = (imgWidth - cropWidth) / 2;
} else if (currentRatio < targetRatio) {
// Image is taller than the target ratio; crop the top and bottom
cropHeight = imgWidth / targetRatio;
offsetY = (imgHeight - cropHeight) / 2;
}
// Set canvas dimensions to the cropped size bounds
canvas.width = cropWidth;
canvas.height = cropHeight;
// Draw the centered portion of the original image onto the canvas
ctx.drawImage(
originalImg,
offsetX, offsetY, cropWidth, cropHeight, // Source coordinates & dimensions
0, 0, cropWidth, cropHeight // Destination coordinates & dimensions
);
return canvas;
}The Image 22-1- Tool is an aspect ratio cropping utility that allows users to resize their images to specific proportions. By automatically centering the crop, the tool ensures that the most relevant part of the image is preserved while trimming the excess width or height to meet a desired ratio. This is particularly useful for social media content creation, where images must fit specific frame dimensions, or for preparing consistent image assets for web design and digital layouts.