Image Propeller Tool

function processImage(originalImg, bladeCount = 4, speedSeconds = 2) {
    // Create a square container canvas to prevent clipping during rotation
    const side = Math.min(originalImg.width, originalImg.height);
    const canvas = document.createElement('canvas');
    canvas.width = side;
    canvas.height = side;
    const ctx = canvas.getContext('2d');
    
    // Propeller parameters
    const cx = side / 2;
    const cy = side / 2;
    const radius = side / 2 * 0.95; // Small margin to fit the stroke
    const blades = parseInt(bladeCount) || 4;
    
    ctx.beginPath();
    
    // Draw the central hub
    ctx.arc(cx, cy, radius * 0.15, 0, 2 * Math.PI);
    
    // Draw propeller blades
    for (let i = 0; i < blades; i++) {
        const angle = (i * 2 * Math.PI) / blades;
        ctx.save();
        ctx.translate(cx, cy);
        ctx.rotate(angle);
        
        ctx.moveTo(0, 0);
        // Outward curve
        ctx.quadraticCurveTo(radius * 0.4, radius * 0.4, radius, 0);
        // Return curve
        ctx.quadraticCurveTo(radius * 0.6, -radius * 0.4, 0, 0);
        
        ctx.restore();
    }
    
    ctx.save();
    // Use the drawn shape as a clipping mask
    ctx.clip();
    
    // Draw centered, cropped rectangular portion of the original image
    const offsetX = (originalImg.width - side) / 2;
    const offsetY = (originalImg.height - side) / 2;
    ctx.drawImage(originalImg, offsetX, offsetY, side, side, 0, 0, side, side);
    
    // Add rim outline to highlight the blades
    ctx.lineWidth = Math.max(side * 0.008, 1);
    ctx.strokeStyle = 'rgba(0, 0, 0, 0.7)';
    ctx.stroke();
    
    // Add a center pin hardware detail
    ctx.beginPath();
    ctx.arc(cx, cy, radius * 0.04, 0, 2 * Math.PI);
    ctx.fillStyle = '#4a4a4a';
    ctx.fill();
    ctx.strokeStyle = '#222';
    ctx.stroke();
    
    ctx.restore();
    
    // Wrap the canvas inside a container for CSS-based spinning animation
    const container = document.createElement('div');
    container.style.display = 'inline-block';
    container.style.width = `${side}px`;
    container.style.height = `${side}px`;
    container.style.overflow = 'hidden';
    container.style.borderRadius = '50%'; // Keep a clean boundary
    
    // Assign a customized unique animation name
    const animId = 'spinPropeller_' + Math.random().toString(36).slice(2, 8);
    canvas.style.animation = `${animId} ${speedSeconds}s linear infinite`;
    canvas.style.display = 'block';
    
    const style = document.createElement('style');
    style.textContent = `
        @keyframes ${animId} {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    `;
    
    container.appendChild(style);
    container.appendChild(canvas);
    
    return container;
}