function processImage(originalImg, aspectRatioStr = "1.85:1") {
// Determine the target aspect ratio
let targetAR = 1.85; // Default
if (typeof aspectRatioStr === "number") {
targetAR = aspectRatioStr;
} else if (typeof aspectRatioStr === "string") {
const parts = aspectRatioStr.split(':');
if (parts.length === 2) {
targetAR = parseFloat(parts[0].trim()) / (parseFloat(parts[1].trim()) || 1);
} else {
targetAR = parseFloat(aspectRatioStr.trim()) || 1.85;
}
}
const origW = originalImg.width;
const origH = originalImg.height;
const origAR = origW / origH;
let cropW, cropH, sx, sy;
// Calculate crop dimensions to maintain the target aspect ratio and center the crop
if (origAR > targetAR) {
// Original image is wider than the target aspect ratio (Crop sides)
cropH = origH;
cropW = origH * targetAR;
sx = (origW - cropW) / 2;
sy = 0;
} else {
// Original image is taller than the target aspect ratio (Crop top/bottom)
cropW = origW;
cropH = origW / targetAR;
sx = 0;
sy = (origH - cropH) / 2;
}
// Round values to avoid sub-pixel rendering issues on canvas
cropW = Math.round(cropW);
cropH = Math.round(cropH);
sx = Math.round(sx);
sy = Math.round(sy);
// Create and set up the canvas
const canvas = document.createElement('canvas');
canvas.width = cropW;
canvas.height = cropH;
const ctx = canvas.getContext('2d');
// Draw the cropped portion of the original image onto the new canvas
ctx.drawImage(originalImg, sx, sy, cropW, cropH, 0, 0, cropW, cropH);
return canvas;
}This tool allows users to crop images to specific cinematic aspect ratios, specifically 1.85:1 and 1.38:1. It automatically calculates the necessary dimensions to center the crop, ensuring that the most important part of the image is preserved while fitting the desired frame. This is particularly useful for filmmakers, video editors, or photographers who need to prepare still images or assets to match specific screen formats or theatrical standards.