Image Magnifying Glass Filter Effect Tool

function processImage(originalImg, zoomFactor = 2, lensRadius = 50, lensCenterX = -1, lensCenterY = -1) {
    const imgWidth = originalImg.width;
    const imgHeight = originalImg.height;

    // Process parameters: convert to number and apply defaults or validation
    let workingZoomFactor = Number(zoomFactor);
    if (isNaN(workingZoomFactor) || workingZoomFactor <= 0) {
        workingZoomFactor = 2; // Default zoom factor if invalid (e.g., 0, negative, or non-numeric string)
    }

    let workingLensRadius = Number(lensRadius);
    if (isNaN(workingLensRadius) || workingLensRadius <= 0) {
        workingLensRadius = 50; // Default lens radius if invalid
    }

    let finalLensX, finalLensY;

    // Determine lens center X coordinate
    // User can pass -1 (default) to center it, or provide a specific coordinate.
    // If a non-numeric string (other than what Number() can parse) is passed, it will also default to center.
    let parsedLensCenterX = Number(lensCenterX);
    if (lensCenterX === -1 || isNaN(parsedLensCenterX)) { // Check original lensCenterX param for -1 sentinel
        finalLensX = imgWidth / 2;
    } else {
        finalLensX = parsedLensCenterX;
    }

    // Determine lens center Y coordinate
    let parsedLensCenterY = Number(lensCenterY);
    if (lensCenterY === -1 || isNaN(parsedLensCenterY)) { // Check original lensCenterY param for -1 sentinel
        finalLensY = imgHeight / 2;
    } else {
        finalLensY = parsedLensCenterY;
    }

    // Create a new canvas
    const canvas = document.createElement('canvas');
    canvas.width = imgWidth;
    canvas.height = imgHeight;
    const ctx = canvas.getContext('2d');

    // 1. Draw the original image onto the canvas. This forms the base layer.
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // 2. Apply the magnifying glass effect
    
    // Save the current canvas context state (transformations, clipping paths, etc.)
    ctx.save();

    // Create a circular clipping path for the lens
    // Only what's drawn inside this path will be visible for the magnified part.
    ctx.beginPath();
    ctx.arc(finalLensX, finalLensY, workingLensRadius, 0, Math.PI * 2);
    ctx.closePath(); // Close the path for the circle
    ctx.clip();

    // Calculate the source rectangle from the original image to be magnified.
    // This is the area in the original image that will appear magnified inside the lens.
    // Its size is determined by the lens radius and the zoom factor.
    const srcRectVisualRadius = workingLensRadius / workingZoomFactor; 
    
    const sx = finalLensX - srcRectVisualRadius; // Top-left X of source rectangle
    const sy = finalLensY - srcRectVisualRadius; // Top-left Y of source rectangle
    const sWidth = srcRectVisualRadius * 2;      // Width of source rectangle
    const sHeight = srcRectVisualRadius * 2;     // Height of source rectangle

    // Calculate the destination rectangle on the canvas.
    // This is where the magnified source rectangle will be drawn, usually centered on the lens position.
    // Its size is determined by the lens radius.
    const dx = finalLensX - workingLensRadius;   // Top-left X of destination rectangle
    const dy = finalLensY - workingLensRadius;   // Top-left Y of destination rectangle
    const dWidth = workingLensRadius * 2;        // Width of destination rectangle (lens diameter)
    const dHeight = workingLensRadius * 2;       // Height of destination rectangle (lens diameter)
    
    // Draw the magnified portion of the image.
    // The `drawImage` function takes the small `sWidth`x`sHeight` portion from `originalImg`
    // and scales it up to `dWidth`x`dHeight` on the canvas.
    // The clipping path ensures this scaled drawing is confined to the circular lens shape.
    ctx.drawImage(originalImg, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
    
    // Restore the canvas context state to what it was before save()
    // This removes the clipping path, so subsequent drawings are not affected.
    ctx.restore();

    // 3. (Optional but recommended for visual clarity) Draw the border of the lens.
    // This is drawn after restoring the context, so it's not clipped.
    ctx.beginPath();
    ctx.arc(finalLensX, finalLensY, workingLensRadius, 0, Math.PI * 2);
    ctx.closePath();
    ctx.strokeStyle = 'rgba(128, 128, 128, 0.8)'; // Semi-transparent gray for the border
    // Make border width adaptive to lens size, with a minimum of 1px.
    ctx.lineWidth = Math.max(1, workingLensRadius * 0.05); // e.g., 5% of lens radius
    ctx.stroke();

    // Return the canvas with the magnifying glass effect applied
    return canvas;
}