/**
* Calculates and displays the aspect ratio of a given image.
*
* @param {HTMLImageElement} originalImg The original image object.
* @param {number} [fontSize=24] The font size for the output text in pixels.
* @param {string} [fontColor='#000000'] The color of the output text.
* @param {string} [fontFamily='Arial'] The font family for the output text.
* @returns {HTMLDivElement} A div element containing the image's dimensions and aspect ratio.
*/
function processImage(originalImg, fontSize = 24, fontColor = '#000000', fontFamily = 'Arial') {
// Helper function to find the greatest common divisor (GCD) using the Euclidean algorithm.
const gcd = (a, b) => {
if (b === 0) {
return a;
}
return gcd(b, a % b);
};
const width = originalImg.naturalWidth || originalImg.width;
const height = originalImg.naturalHeight || originalImg.height;
// Create the container element for the result.
const resultContainer = document.createElement('div');
resultContainer.style.fontFamily = fontFamily;
resultContainer.style.color = fontColor;
resultContainer.style.fontSize = `${fontSize}px`;
resultContainer.style.textAlign = 'center';
resultContainer.style.padding = '20px';
resultContainer.style.lineHeight = '1.5';
resultContainer.style.boxSizing = 'border-box';
// Handle cases with invalid image dimensions.
if (width === 0 || height === 0) {
resultContainer.style.color = 'red';
resultContainer.textContent = 'Invalid image dimensions (0x0).';
return resultContainer;
}
const divisor = gcd(width, height);
const ratioWidth = width / divisor;
const ratioHeight = height / divisor;
const originalDimensionsText = `Original Dimensions: ${width}px × ${height}px`;
const aspectRatioText = `Aspect Ratio: ${ratioWidth}:${ratioHeight}`;
resultContainer.innerHTML = `${originalDimensionsText}<br>${aspectRatioText}`;
return resultContainer;
}The Image Aspect Ratio Calculator is a tool designed to calculate and display the aspect ratio of a given image. Users can upload an image, and the tool will provide the original dimensions along with the simplified aspect ratio. This tool is useful for graphic designers, web developers, and anyone working with images, as it helps ensure that images maintain their intended proportions across different devices and formats.