/**
* Flips an image horizontally or vertically.
*
* @param {HTMLImageElement} originalImg The original image element to process.
* @param {string} direction The direction to flip the image. Can be 'horizontal' or 'vertical'. Defaults to 'horizontal'.
* @returns {HTMLCanvasElement} A new canvas element with the flipped image.
*/
function processImage(originalImg, direction = 'horizontal') {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const w = originalImg.naturalWidth || originalImg.width;
const h = originalImg.naturalHeight || originalImg.height;
canvas.width = w;
canvas.height = h;
// Save the current context state
ctx.save();
if (direction === 'vertical') {
// Translate to the center of the canvas vertically and flip
ctx.translate(0, h);
ctx.scale(1, -1);
} else { // Default to horizontal flip for any other value
// Translate to the center of the canvas horizontally and flip
ctx.translate(w, 0);
ctx.scale(-1, 1);
}
// Draw the image
// The image will now be drawn flipped
ctx.drawImage(originalImg, 0, 0);
// Restore the context to its original state
ctx.restore();
return canvas;
}Image Flipper is a tool that allows users to flip images either horizontally or vertically. This functionality can be useful in various scenarios, such as correcting the orientation of a photo, creating mirrored effects for artistic purposes, or preparing images for graphic design projects. The tool processes images efficiently, providing a quick way to alter their orientation while maintaining quality.