Image Split Field Filter Effect Tool

function processImage(originalImg, numFields = 2, orientation = 'horizontal', color1 = 'rgba(255, 165, 0, 0.3)', color2 = 'rgba(0, 0, 255, 0.3)', blendMode = 'source-over') {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for intrinsic dimensions, fallback to width/height if natural* are 0 (e.g. for canvas source)
    let imgWidth = originalImg.naturalWidth || originalImg.width;
    let imgHeight = originalImg.naturalHeight || originalImg.height;
    
    // If dimensions are still 0 (e.g., image not loaded or 0x0 image), create a 1x1 canvas to avoid errors.
    if (imgWidth === 0) imgWidth = 1;
    if (imgHeight === 0) imgHeight = 1;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // Draw the original image first
    // Check if originalImg has content (width/height > 0) before drawing
    if (originalImg.width > 0 && originalImg.height > 0) {
         ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    } else {
        // If originalImg is empty or not loaded, fill canvas with a default color (e.g., transparent or white)
        // This makes it clear that the input was empty or problematic.
        // For this tool, drawing nothing on an empty image might be fine.
        // Let's leave it as is; an empty image will result in an empty canvas (or tiny canvas due to 1x1 minimum).
    }


    // Ensure numFields is a positive integer
    numFields = Math.max(1, Math.floor(numFields));
    
    const originalGCO = ctx.globalCompositeOperation; // Save original GCO
    
    // Set the desired blend mode for filter overlays. This will apply to all fillRect operations.
    ctx.globalCompositeOperation = blendMode;

    for (let i = 0; i < numFields; i++) {
        let fieldX, fieldY, fieldW, fieldH;
        const currentColor = (i % 2 === 0) ? color1 : color2;

        // Check if color is valid (not null, not empty string, not 'transparent')
        // Also ensure it's a string, as other types would cause errors.
        if (currentColor && typeof currentColor === 'string' && currentColor.toLowerCase() !== 'transparent' && currentColor.trim() !== '') {
            if (orientation.toLowerCase() === 'horizontal') {
                fieldW = imgWidth;
                // Calculate height for this strip
                // Note: `i * (imgHeight / numFields)` accumulates floating point errors less than re-adding `imgHeight / numFields`
                fieldY = Math.round(i * imgHeight / numFields);
                // Calculate the Y coordinate of the next strip to determine current strip's height
                let nextFieldY = Math.round((i + 1) * imgHeight / numFields);
                fieldH = nextFieldY - fieldY;
                fieldX = 0;
                
                // Ensure the last strip covers exactly to the image boundary
                if (i === numFields - 1) {
                    fieldH = imgHeight - fieldY;
                }

            } else { // Vertical orientation
                fieldH = imgHeight;
                // Calculate width for this strip
                fieldX = Math.round(i * imgWidth / numFields);
                let nextFieldX = Math.round((i + 1) * imgWidth / numFields);
                fieldW = nextFieldX - fieldX;
                fieldY = 0;

                // Ensure the last strip covers exactly to the image boundary
                if (i === numFields - 1) {
                    fieldW = imgWidth - fieldX;
                }
            }
            
            // Ensure dimensions are non-negative (can happen if imgWidth/imgHeight is 0 or numFields is extremely large)
            fieldW = Math.max(0, fieldW);
            fieldH = Math.max(0, fieldH);

            if (fieldW > 0 && fieldH > 0) { // Only draw if dimensions are positive
                ctx.fillStyle = currentColor;
                ctx.fillRect(fieldX, fieldY, fieldW, fieldH);
            }
        }
    }

    // Restore GCO to what it was before applying filters (usually 'source-over')
    ctx.globalCompositeOperation = originalGCO; 

    return canvas;
}