/**
* Flips an image horizontally or vertically.
*
* @param {HTMLImageElement} originalImg The original image object to be flipped.
* @param {string} direction The direction to flip the image. Can be 'horizontal' or 'vertical'. Defaults to 'horizontal'.
* @returns {HTMLCanvasElement} A canvas element with the flipped image.
*/
function processImage(originalImg, direction = 'horizontal') {
// Create a canvas element
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Set the canvas dimensions to match the image
const width = originalImg.naturalWidth || originalImg.width;
const height = originalImg.naturalHeight || originalImg.height;
canvas.width = width;
canvas.height = height;
// Save the current canvas state
ctx.save();
// Apply the transformation based on the specified direction
if (direction === 'vertical') {
// To flip vertically, we translate the canvas down by its height
// and then scale the y-axis by -1.
ctx.translate(0, height);
ctx.scale(1, -1);
} else {
// To flip horizontally (default), we translate the canvas to the right by its width
// and then scale the x-axis by -1.
ctx.translate(width, 0);
ctx.scale(-1, 1);
}
// Draw the image onto the transformed canvas.
// The image is drawn at (0,0) in the transformed coordinate space.
ctx.drawImage(originalImg, 0, 0, width, height);
// Restore the canvas state to what it was before our transformation
ctx.restore();
// Return the canvas with the flipped image
return canvas;
}The Image Flip Tool allows users to flip images either horizontally or vertically, providing a quick way to modify an image’s orientation. This tool is useful for various applications, such as creating mirror effects, adjusting images for design purposes, or simply reorienting photos for social media. Users can easily upload an image and choose the desired flip direction to obtain the modified image instantly.