Image Slimming Tool For Male Subjects

/**
 * Applies a slimming (horizontal squeeze) effect to an image, centered on a specific point.
 * This is effectively a "liquify" or "pinch" tool applied horizontally to make a subject appear slimmer.
 *
 * @param {Image} originalImg The original JavaScript Image object.
 * @param {number} [strength=30] The intensity of the slimming effect. Recommended range is 0-100. Higher values create a more pronounced effect.
 * @param {number} [focusX=0.5] The horizontal center of the effect, as a fraction of the image width (e.g., 0.5 for the exact center).
 * @param {number} [radius=0.4] The radius of the effect, as a fraction of the image width. This determines how wide the slimming area is.
 * @returns {HTMLCanvasElement} A new canvas element with the slimmed image.
 */
function processImage(originalImg, strength = 30, focusX = 0.5, radius = 0.4) {
    const canvas = document.createElement('canvas');
    // The 'willReadFrequently' hint can optimize performance for repeated getImageData/putImageData calls.
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

    // Draw the original image to the canvas to access its pixel data.
    ctx.drawImage(originalImg, 0, 0, width, height);
    const srcData = ctx.getImageData(0, 0, width, height);
    const srcPixels = srcData.data;

    // Create a new ImageData object to store the manipulated pixels.
    const destData = ctx.createImageData(width, height);
    const destPixels = destData.data;

    // Convert normalized parameters to pixel values for calculation.
    const scale = strength / 100.0;
    const centerX = focusX * width;
    const effectRadius = radius * width;

    // Iterate over each pixel in the destination image.
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            let sx, sy;

            // Calculate the horizontal distance from the center of the effect.
            const dx = x - centerX;
            const distance = Math.abs(dx);

            if (distance >= effectRadius) {
                // If the pixel is outside the effect radius, no distortion is applied.
                sx = x;
                sy = y;
            } else {
                // If the pixel is inside the effect radius, calculate the warped source coordinate.
                const normalizedDistance = distance / effectRadius;
                
                // Use a smooth easing function for a natural falloff of the effect.
                // (1 - d)^2 provides a nice curve that is strong in the center and weak at the edges.
                const squeezeFactor = scale * Math.pow(1 - normalizedDistance, 2);

                // Calculate the source x-coordinate by sampling from a point "stretched" outwards from the center.
                // This pulls the surrounding pixels towards the distorted area, creating a slimming effect.
                sx = centerX + dx * (1.0 + squeezeFactor);
                sy = y; // No vertical distortion is applied.
            }

            // --- Bilinear Interpolation ---
            // To get a smooth color value from non-integer source coordinates (sx, sy).

            const x_floor = Math.floor(sx);
            const y_floor = Math.floor(sy);
            const x_ceil = x_floor + 1;
            const y_ceil = y_floor + 1;
            
            const destIndex = (y * width + x) * 4;

            // Check if the four surrounding source pixels are within the image boundaries for interpolation.
            if (x_floor >= 0 && x_ceil < width && y_floor >= 0 && y_ceil < height) {
                const fx = sx - x_floor;
                const fy = sy - y_floor;

                // Indices of the four surrounding source pixels
                const p1_idx = (y_floor * width + x_floor) * 4;
                const p2_idx = (y_floor * width + x_ceil) * 4;
                const p3_idx = (y_ceil * width + x_floor) * 4;
                const p4_idx = (y_ceil * width + x_ceil) * 4;

                // Interpolate for each color channel (R, G, B, A).
                for (let i = 0; i < 4; i++) {
                    const p1 = srcPixels[p1_idx + i];
                    const p2 = srcPixels[p2_idx + i];
                    const p3 = srcPixels[p3_idx + i];
                    const p4 = srcPixels[p4_idx + i];

                    const top_val = p1 * (1 - fx) + p2 * fx;
                    const bottom_val = p3 * (1 - fx) + p4 * fx;

                    destPixels[destIndex + i] = top_val * (1 - fy) + bottom_val * fy;
                }
            } else {
                // Fallback for pixels near the edge where interpolation isn't possible.
                // Simply copy the original pixel from the destination's coordinate.
                const srcIndex = (y * width + x) * 4;
                destPixels[destIndex] = srcPixels[srcIndex];
                destPixels[destIndex + 1] = srcPixels[srcIndex + 1];
                destPixels[destIndex + 2] = srcPixels[srcIndex + 2];
                destPixels[destIndex + 3] = srcPixels[srcIndex + 3];
            }
        }
    }

    // Put the manipulated pixel data back onto the canvas.
    ctx.putImageData(destData, 0, 0);

    return canvas;
}