Const Calculates the aspect ratio of an image from its dimensions.
The width of the image in pixels
The height of the image in pixels
The aspect ratio as a decimal number (width/height)
const ratio = ImageUtils.calculateAspectRatio(1920, 1080); // Returns 1.777...
const isWidescreen = ratio > 1.5; // true for 16:9 ratio
Converts a base64 string to a Blob object.
The base64 string to convert (without data URL prefix)
The MIME type of the image (default: "image/jpeg")
Promise resolving to a Blob object
const blob = await ImageUtils.base64ToBlob(base64String, 'image/png');
const url = URL.createObjectURL(blob);
Converts a Blob to a base64 string (without data URL prefix).
The Blob to convert
Promise resolving to base64 string
const base64 = await ImageUtils.blobToBase64(imageBlob);
console.log('data:image/jpeg;base64,' + base64); // Full data URL
Compresses an image file by reducing its quality while maintaining dimensions.
The image file to compress
Compression quality from 0 (lowest) to 1 (highest, default: 0.7)
Promise resolving to the compressed image as a Blob
const compressed = await ImageUtils.compressImage(largeImage, 0.5);
console.log(`Original: ${largeImage.size} bytes, Compressed: ${compressed.size} bytes`);
Converts a base64 data URL string to a File object.
The base64 data URL string (must include data:image/... prefix)
The name for the resulting file
Promise resolving to File object, or null if base64 is invalid
const file = await ImageUtils.convertBase64ToFile(
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==',
'pixel.png'
);
Creates a thumbnail image with specified maximum dimensions.
The image file to create a thumbnail from
Maximum size in pixels for the longest dimension (default: 200)
Promise resolving to thumbnail as base64 data URL string
const thumbnail = await ImageUtils.createThumbnail(imageFile, 150);
document.getElementById('preview').src = thumbnail;
Crops an image to specified rectangular dimensions.
The image file to crop
Starting x coordinate for the crop (pixels from left)
Starting y coordinate for the crop (pixels from top)
Width of the crop area in pixels
Height of the crop area in pixels
Promise resolving to the cropped image as a Blob
// Crop a 200x200 square from the center of the image
const cropped = await ImageUtils.cropImage(imageFile, 100, 100, 200, 200);
Extracts metadata information from an image file.
The image file to analyze
Promise resolving to object containing width, height, type, and size
const metadata = await ImageUtils.getImageMetadata(imageFile);
console.log(`Image: ${metadata.width}x${metadata.height}, ${metadata.type}, ${metadata.size} bytes`);
Analyzes an image to determine its most dominant color.
The image file to analyze
Promise resolving to the dominant color as a hex string
const dominantColor = await ImageUtils.getDominantColor(imageFile);
console.log(`Dominant color: ${dominantColor}`); // e.g., "#ff5733"
document.body.style.backgroundColor = dominantColor;
Calculates scaled dimensions for an image while maintaining aspect ratio.
The HTML image element to scale
Optional maxWidth: numberOptional maximum width constraint
Optional maxHeight: numberOptional maximum height constraint
Object containing the calculated scaled width and height
const scaled = ImageUtils.getScaledDimensions(imageElement, 800, 600);
console.log(`Scaled dimensions: ${scaled.width}x${scaled.height}`);
Checks if an image exists and is accessible at the given URL.
The URL to check for image availability
Promise resolving to true if the image exists and is accessible
const exists = await ImageUtils.imageExists('https://example.com/image.jpg');
if (exists) {
console.log('Image is available');
}
Validates whether a file is an image based on its MIME type.
The file to check
True if the file is an image, false otherwise
const isImage = ImageUtils.isImageFile(selectedFile);
if (!isImage) {
alert('Please select an image file');
}
Loads an image from a URL and returns the HTMLImageElement.
The URL of the image to load
Promise resolving to HTMLImageElement when image loads successfully
If the image fails to load
try {
const img = await ImageUtils.loadImage('https://example.com/image.jpg');
console.log(`Loaded image: ${img.width}x${img.height}`);
} catch (error) {
console.error('Failed to load image:', error);
}
Loads and decodes an image from a URL with error handling.
The URL of the image to load
Promise resolving to HTMLImageElement or null if loading fails
const img = await ImageUtils.loadImageElement('https://example.com/image.jpg');
if (img) {
document.body.appendChild(img);
} else {
console.log('Failed to load image');
}
Resizes an image file to fit within specified dimensions while maintaining aspect ratio.
The image file to resize
Resize options including max dimensions, quality, and output format
Promise resolving to the resized image as a Blob
const resized = await ImageUtils.resizeImage(originalFile, {
maxWidth: 800,
maxHeight: 600,
quality: 0.9,
format: 'jpeg'
});
Rotates an image by the specified number of degrees around its center.
The image file to rotate
Degrees to rotate (0-360, positive for clockwise)
Promise resolving to the rotated image as a Blob
const rotated90 = await ImageUtils.rotateImage(imageFile, 90);
const rotatedMinus45 = await ImageUtils.rotateImage(imageFile, -45);
Converts a URL to a File object by downloading the content.
The URL to convert to a file
The name for the resulting file
The MIME type for the file
Promise resolving to a File object
const file = await ImageUtils.urlToFile(
'https://example.com/image.jpg',
'downloaded-image.jpg',
'image/jpeg'
);
Validates that image dimensions are within specified limits.
The width to validate
The height to validate
The maximum allowed width
The maximum allowed height
True if dimensions are within limits, false otherwise
const isValid = ImageUtils.validateImageDimensions(1920, 1080, 2000, 2000);
if (!isValid) {
console.log('Image is too large');
}
Applies a grayscale filter to an image by converting all pixels to their average RGB value.