Image Assistant Tool

function processImage(originalImg, gridSpacing = 100, guideColor = "rgba(0, 255, 255, 0.6)", showRuleOfThirds = "true", showDimensions = "true") {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set dimensions based on the original image
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    canvas.width = width;
    canvas.height = height;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, width, height);

    const spacing = parseInt(gridSpacing, 10);

    // Assistant feature 1: Ruler/Grid overlay
    if (!isNaN(spacing) && spacing > 0) {
        ctx.beginPath();
        ctx.strokeStyle = guideColor;
        ctx.lineWidth = 1;

        // Vertical grid lines
        for (let x = spacing; x < width; x += spacing) {
            ctx.moveTo(x, 0);
            ctx.lineTo(x, height);
        }

        // Horizontal grid lines
        for (let y = spacing; y < height; y += spacing) {
            ctx.moveTo(0, y);
            ctx.lineTo(width, y);
        }
        ctx.stroke();
    }

    // Assistant feature 2: Composition Rule of Thirds guides
    if (String(showRuleOfThirds).toLowerCase() === "true" || showRuleOfThirds === "1") {
        ctx.beginPath();
        ctx.strokeStyle = "rgba(255, 50, 50, 0.8)";
        ctx.lineWidth = 2;
        ctx.setLineDash([8, 8]); // Dashed lines for clarity

        // Vertical guides
        ctx.moveTo(width / 3, 0);
        ctx.lineTo(width / 3, height);
        ctx.moveTo((width / 3) * 2, 0);
        ctx.lineTo((width / 3) * 2, height);

        // Horizontal guides
        ctx.moveTo(0, height / 3);
        ctx.lineTo(width, height / 3);
        ctx.moveTo(0, (height / 3) * 2);
        ctx.lineTo(width, (height / 3) * 2);

        ctx.stroke();
        ctx.setLineDash([]); // Reset line dash
        
        // Add center center crosshair
        ctx.beginPath();
        ctx.strokeStyle = "rgba(255, 255, 0, 0.9)";
        ctx.moveTo((width / 2) - 15, height / 2);
        ctx.lineTo((width / 2) + 15, height / 2);
        ctx.moveTo(width / 2, (height / 2) - 15);
        ctx.lineTo(width / 2, (height / 2) + 15);
        ctx.stroke();
    }

    // Assistant feature 3: Dimension & Data visualizer
    if (String(showDimensions).toLowerCase() === "true" || showDimensions === "1") {
        const text = `Image Assistant: ${width}w x ${height}h px`;
        ctx.font = "bold 14px Arial, sans-serif";
        const padding = 10;
        const textMetrics = ctx.measureText(text);
        const boxWidth = textMetrics.width + (padding * 2);
        const boxHeight = 34;

        // Draw semi-transparent background box for readability
        ctx.fillStyle = "rgba(0, 0, 0, 0.75)";
        ctx.fillRect(10, 10, boxWidth, boxHeight);
        
        // Draw inner border
        ctx.strokeStyle = "rgba(255, 255, 255, 0.3)";
        ctx.lineWidth = 1;
        ctx.strokeRect(12, 12, boxWidth - 4, boxHeight - 4);

        // Draw text
        ctx.fillStyle = "#FFFFFF";
        ctx.textBaseline = "middle";
        ctx.fillText(text, 10 + padding, 10 + (boxHeight / 2));
    }

    return canvas;
}