Image Aspect Ratio 2.55:1 Converter

function processImage(originalImg, mode = 'crop', backgroundColor = '#000000') {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  
  // Target aspect ratio is 2.55:1
  const targetRatio = 2.55;
  const imgRatio = originalImg.width / originalImg.height;

  let finalWidth, finalHeight;

  if (mode === 'crop') {
    // In crop mode, we fill the 2.55:1 area completely, trimming excess parts
    if (imgRatio > targetRatio) {
      // Image is wider than 2.55:1, crop the left and right sides
      finalWidth = originalImg.height * targetRatio;
      finalHeight = originalImg.height;
    } else {
      // Image is taller than 2.55:1, crop the top and bottom
      finalWidth = originalImg.width;
      finalHeight = originalImg.width / targetRatio;
    }
    
    canvas.width = Math.round(finalWidth);
    canvas.height = Math.round(finalHeight);
    
    const sourceX = (originalImg.width - finalWidth) / 2;
    const sourceY = (originalImg.height - finalHeight) / 2;
    
    ctx.drawImage(
      originalImg, 
      sourceX, sourceY, finalWidth, finalHeight, 
      0, 0, canvas.width, canvas.height
    );
    
  } else if (mode === 'pad') {
    // In pad mode, we fit the entire image inside a 2.55:1 area, adding letterboxes/pillarboxes
    if (imgRatio > targetRatio) {
      // Image is wider than 2.55:1, pad the top and bottom
      finalWidth = originalImg.width;
      finalHeight = originalImg.width / targetRatio;
    } else {
      // Image is taller than 2.55:1, pad the left and right
      finalWidth = originalImg.height * targetRatio;
      finalHeight = originalImg.height;
    }
    
    canvas.width = Math.round(finalWidth);
    canvas.height = Math.round(finalHeight);
    
    // Fill background for padding
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    const drawX = (canvas.width - originalImg.width) / 2;
    const drawY = (canvas.height - originalImg.height) / 2;
    
    ctx.drawImage(originalImg, drawX, drawY, originalImg.width, originalImg.height);
    
  } else {
    // Fallback 'stretch' mode, forcefully resize image to exactly 2.55:1 without maintaining original proportions
    canvas.width = originalImg.width;
    canvas.height = Math.round(originalImg.width / targetRatio);
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
  }

  return canvas;
}