I developed the Automated Aspect Ratio Calculator which supports image upload and live preview with changed dimensions to provide a simple and fast tool for calculating and converting aspect ratios. With this tool, you can upload an image and instantly preview the new dimensions, making it ideal for adjustments in social media and design projects.
I wanted to convert my image's pixel dimension for my video project which was in 1080x1920.
Here's the original Image:
And here's the resized image for my video project:
Why I Created This Tool
When adjusting the ratio of images or videos, a precise aspect ratio is often needed. Incorrect ratios can lead to stretched or compressed images, so I created this tool to assist in accurate dimension conversions.
Usage Guide
1. Enter or Select Current Dimensions: Input the width and height of your image or video, or select from preset ratios.
2. Choose New Aspect Ratio or Dimensions: Either enter the desired aspect ratio directly in the input box or select a preset ratio.
3. Preview Calculated Dimensions: The new dimensions are automatically calculated and can be previewed in real-time.
4. Fine-tune: Adjust the dimensions as needed while keeping the ratio consistent.
5. Apply or Download: Once satisfied with the new size, save the image or apply the adjustment in your editing software.
Features
Quick Calculation: Instantly displays new dimensions at the ideal ratio.
Preset Options: Common aspect ratios are available.
Device Compatibility: Optimized for use on both mobile and desktop.
Aspect Ratio Calculator Live: www.shinesfox.com/p/aspect-ratio-calculator.html
Technical Overview
1. debounce(func, delay)
This function manages repeated calls to a function within a specified delay period. Debouncing improves performance for rapid events, like user input or window resizing.
function debounce(func, delay) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), delay);
};
}
2. setPreset()
This function sets the pixel width, height, and aspect ratio based on the selected preset. Depending on the choice, it fills input fields with the appropriate values and updates the results.
function setPreset() {
const preset = document.querySelector('#preset-select').value;
if (preset === '16:9') {
widthInput.value = 1920;
heightInput.value = 1080;
} else if (preset === '4:3') {
widthInput.value = 1600;
heightInput.value = 1200;
}
updateResult(widthInput.value, heightInput.value);
}
3. checkAndSetPreset()
This function checks which preset should be selected based on the input pixel width and height. If a match is found, it sets the corresponding preset.
function checkAndSetPreset() {
const width = parseInt(widthInput.value);
const height = parseInt(heightInput.value);
if (width / height === 16 / 9) {
presetSelect.value = '16:9';
} else if (width / height === 4 / 3) {
presetSelect.value = '4:3';
}
}
4. calculateHeight()
This function calculates the height based on a given aspect ratio. Triggered when the pixel width is changed, it updates the height and reflects the result.
function calculateHeight() {
const width = parseInt(widthInput.value);
const ratio = 16 / 9; // Example: 16:9 aspect ratio
heightInput.value = Math.round(width / ratio);
updateResult(width, heightInput.value);
}
5. calculateWidth()
This function calculates the width based on a given aspect ratio. Triggered when the pixel height is changed, it updates the width and reflects the result.
function calculateWidth() {
const height = parseInt(heightInput.value);
const ratio = 16 / 9; // Example: 16:9 aspect ratio
widthInput.value = Math.round(height * ratio);
updateResult(widthInput.value, height);
}
6. updateResult(width, height, ratioWidth, ratioHeight)
This function displays the current dimensions and aspect ratio. Using the provided width and height, a simplified aspect ratio is calculated and displayed.
function updateResult(width, height) {
const aspectRatio = (width / height).toFixed(2);
resultDisplay.textContent = Width: ${width}, Height: ${height}, Aspect Ratio: ${aspectRatio};
}
7. loadImage(event)
This function is called when a user uploads an image. It retrieves the width and height of the selected image, calculates the aspect ratio based on it, and updates the result.
function loadImage(event) {
const file = event.target.files[0];
const img = new Image();
img.onload = function() {
widthInput.value = img.width;
heightInput.value = img.height;
updateResult(img.width, img.height);
};
img.src = URL.createObjectURL(file);
}
8. downloadImage()
This function is used to download the currently displayed image. It saves the updated image in PNG format at the user-specified width and height.
function downloadImage() {
const canvas = document.createElement('canvas');
canvas.width = widthInput.value;
canvas.height = heightInput.value;
const ctx = canvas.getContext('2d');
ctx.drawImage(currentImage, 0, 0, canvas.width, canvas.height);
canvas.toBlob(function(blob) {
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'image.png';
link.click();
});
}
Use Cases
The primary use case for this tool is resizing for social media or adjusting images for different devices. This calculator optimizes images for different media formats without compromising quality.