/**
* Flips an image horizontally, vertically, or both.
*
* @param {Image} originalImg The original javascript Image object to be flipped.
* @param {string} direction The direction to flip the image. Can be 'horizontal', 'vertical', or 'both'. Defaults to 'horizontal'.
* @returns {HTMLCanvasElement} A new canvas element with the flipped image.
*/
function processImage(originalImg, direction = 'horizontal') {
// Create a new canvas element
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Set 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 untransformed context state
ctx.save();
// Apply the transformation based on the flip direction
switch (direction) {
case 'horizontal':
// Move the origin to the right edge, then scale by -1 to flip horizontally
ctx.translate(width, 0);
ctx.scale(-1, 1);
break;
case 'vertical':
// Move the origin to the bottom edge, then scale by -1 to flip vertically
ctx.translate(0, height);
ctx.scale(1, -1);
break;
case 'both':
// Move the origin to the bottom-right corner, then scale by -1 on both axes
ctx.translate(width, height);
ctx.scale(-1, -1);
break;
}
// Draw the image onto the transformed context
ctx.drawImage(originalImg, 0, 0, width, height);
// Restore the context to its original state (good practice)
ctx.restore();
// Return the canvas with the flipped image
return canvas;
}The Image Flipper Tool allows users to easily flip images in different directions: horizontally, vertically, or both. This tool is beneficial for various use cases such as correcting image orientation, creating mirrored effects, or designing visually engaging content for social media. By flipping images, users can enhance their graphics, produce creative photo compositions, and tailor images to better fit their desired layouts.