Please bookmark this page to avoid losing your image tool!

Image Golden Ratio Calculator

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
async function processImage(originalImg, overlayType = 'spiral', startCorner = 'top-left', lineColor = '#ffffff', lineWidth = 2) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const w = originalImg.width;
    const h = originalImg.height;
    canvas.width = w;
    canvas.height = h;

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

    // Set styles for the overlay
    ctx.strokeStyle = lineColor;
    ctx.lineWidth = lineWidth;
    ctx.lineCap = 'round';

    const phi = (1 + Math.sqrt(5)) / 2;

    // Helper function to draw the Golden Spiral
    const drawGoldenSpiral = (startX, startY, width, height, corner) => {
        let rotation = 0; // 0 for Counter-Clockwise, 1 for Clockwise
        let cutDir = 0; // 0:Left, 1:Top, 2:Right, 3:Bottom

        // Determine initial state based on the starting corner
        switch (corner) {
            case 'top-left':
                rotation = 0; // CCW
                cutDir = w >= h ? 0 : 1;
                break;
            case 'top-right':
                rotation = 1; // CW
                cutDir = w >= h ? 2 : 1;
                break;
            case 'bottom-right':
                rotation = 0; // CCW
                cutDir = w >= h ? 2 : 3;
                break;
            case 'bottom-left':
                rotation = 1; // CW
                cutDir = w >= h ? 0 : 3;
                break;
            default: // Default to top-left
                rotation = 0;
                cutDir = w >= h ? 0 : 1;
                break;
        }

        ctx.beginPath();
        let currentX = startX;
        let currentY = startY;
        let currentW = width;
        let currentH = height;

        for (let i = 0; i < 16; i++) {
            if (currentW < 0.5 || currentH < 0.5) break;

            let squareSize, arcCenterX, arcCenterY, startAngle, endAngle;

            if (currentW >= currentH) { // Wide rectangle, cut Left or Right
                squareSize = currentH;
                if (cutDir === 0) { // Cut from Left
                    arcCenterX = currentX + squareSize;
                    arcCenterY = currentY;
                    startAngle = 0.5 * Math.PI;
                    endAngle = Math.PI;
                    currentX += squareSize;
                    currentW -= squareSize;
                    cutDir = rotation === 0 ? 1 : 3; // Next is Top(CCW) or Bottom(CW)
                } else { // Cut from Right (cutDir === 2)
                    arcCenterX = currentX + currentW - squareSize;
                    arcCenterY = currentY + squareSize;
                    startAngle = 1.5 * Math.PI;
                    endAngle = 2 * Math.PI;
                    currentW -= squareSize;
                    cutDir = rotation === 0 ? 3 : 1; // Next is Bottom(CCW) or Top(CW)
                }
            } else { // Tall rectangle, cut Top or Bottom
                squareSize = currentW;
                if (cutDir === 1) { // Cut from Top
                    arcCenterX = currentX + squareSize;
                    arcCenterY = currentY + squareSize;
                    startAngle = Math.PI;
                    endAngle = 1.5 * Math.PI;
                    currentY += squareSize;
                    currentH -= squareSize;
                    cutDir = rotation === 0 ? 2 : 0; // Next is Right(CCW) or Left(CW)
                } else { // Cut from Bottom (cutDir === 3)
                    arcCenterX = currentX;
                    arcCenterY = currentY + currentH - squareSize;
                    startAngle = 0;
                    endAngle = 0.5 * Math.PI;
                    currentH -= squareSize;
                    cutDir = rotation === 0 ? 0 : 2; // Next is Left(CCW) or Right(CW)
                }
            }
             ctx.arc(arcCenterX, arcCenterY, squareSize, startAngle, endAngle);
        }
        ctx.stroke();
    };

    // Draw the overlays based on the selected type
    if (overlayType === 'grid' || overlayType === 'both') {
        ctx.beginPath();
        // Vertical lines dividing width by the golden ratio
        ctx.moveTo(w / phi, 0);
        ctx.lineTo(w / phi, h);
        ctx.moveTo(w - (w / phi), 0);
        ctx.lineTo(w - (w / phi), h);

        // Horizontal lines dividing height by the golden ratio
        ctx.moveTo(0, h / phi);
        ctx.lineTo(w, h / phi);
        ctx.moveTo(0, h - (h / phi));
        ctx.lineTo(w, h - (h / phi));
        ctx.stroke();
    }

    if (overlayType === 'spiral' || overlayType === 'both') {
        drawGoldenSpiral(0, 0, w, h, startCorner);
    }

    return canvas;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image Golden Ratio Calculator is a web-based tool designed to analyze and enhance your images by overlaying the golden ratio. This tool allows users to visualize the golden ratio through spiral and grid overlays, helping to create aesthetically pleasing compositions. It is particularly useful for photographers, graphic designers, and artists who want to improve their work’s visual balance and harmony. By applying the golden ratio, users can refine their image layouts for better engagement and artistic appeal.

Leave a Reply

Your email address will not be published. Required fields are marked *