Image And Video Management Tool

/**
 * A multi-purpose image processing function that can resize, crop, rotate, or apply filters.
 *
 * @param {Image} originalImg The original Image object to be processed.
 * @param {string} action The operation to perform. Can be 'resize', 'crop', 'rotate', or 'filter'. Defaults to 'resize'.
 * @param {number | string} width For 'resize': the new width. Defaults to 150.
 * @param {number | string} height For 'resize': the new height. Defaults to 150.
 * @param {number | string} cropX For 'crop': the x-coordinate of the top-left corner of the crop area. Defaults to 10.
 * @param {number | string} cropY For 'crop': the y-coordinate of the top-left corner of the crop area. Defaults to 10.
 * @param {number | string} cropWidth For 'crop': the width of the crop area. Defaults to 100.
 * @param {number | string} cropHeight For 'crop': the height of the crop area. Defaults to 100.
 * @param {number | string} angle For 'rotate': the angle of rotation in degrees (clockwise). Defaults to 90.
 * @param {string} filterName For 'filter': the name of the filter to apply. Can be 'grayscale', 'sepia', 'invert', or 'blur'. Defaults to 'grayscale'.
 * @returns {HTMLCanvasElement} A new canvas element containing the processed image.
 */
function processImage(
    originalImg,
    action = 'resize',
    width = 150,
    height = 150,
    cropX = 10,
    cropY = 10,
    cropWidth = 100,
    cropHeight = 100,
    angle = 90,
    filterName = 'grayscale'
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    switch (action) {
        case 'resize':
            {
                const newWidth = parseInt(width, 10);
                const newHeight = parseInt(height, 10);
                canvas.width = newWidth;
                canvas.height = newHeight;
                ctx.drawImage(originalImg, 0, 0, newWidth, newHeight);
                break;
            }
        case 'crop':
            {
                const x = parseInt(cropX, 10);
                const y = parseInt(cropY, 10);
                const cw = parseInt(cropWidth, 10);
                const ch = parseInt(cropHeight, 10);
                canvas.width = cw;
                canvas.height = ch;
                ctx.drawImage(originalImg, x, y, cw, ch, 0, 0, cw, ch);
                break;
            }
        case 'rotate':
            {
                const angleInRad = parseInt(angle, 10) * Math.PI / 180;
                const sin = Math.abs(Math.sin(angleInRad));
                const cos = Math.abs(Math.cos(angleInRad));

                const newWidth = originalImg.width * cos + originalImg.height * sin;
                const newHeight = originalImg.width * sin + originalImg.height * cos;

                canvas.width = newWidth;
                canvas.height = newHeight;

                ctx.translate(newWidth / 2, newHeight / 2);
                ctx.rotate(angleInRad);
                ctx.drawImage(originalImg, -originalImg.width / 2, -originalImg.height / 2);
                break;
            }
        case 'filter':
            {
                canvas.width = originalImg.width;
                canvas.height = originalImg.height;
                let filterValue = '';
                switch (filterName) {
                    case 'grayscale':
                        filterValue = 'grayscale(100%)';
                        break;
                    case 'sepia':
                        filterValue = 'sepia(100%)';
                        break;
                    case 'invert':
                        filterValue = 'invert(100%)';
                        break;
                    case 'blur':
                        filterValue = 'blur(5px)';
                        break;
                    default:
                        // No filter
                        break;
                }
                if (filterValue) {
                    ctx.filter = filterValue;
                }
                ctx.drawImage(originalImg, 0, 0);
                break;
            }
        default:
            // If action is unknown, just draw the original image
            canvas.width = originalImg.width;
            canvas.height = originalImg.height;
            ctx.drawImage(originalImg, 0, 0);
            break;
    }

    return canvas;
}