Please bookmark this page to avoid losing your image tool!

Image Zodiac Sign Filter Effect Tool

(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.
function processImage(
    originalImg,
    zodiacSign = "Aries",
    symbolColor = "rgba(255, 255, 255, 0.8)",
    symbolSizeScale = 0.2, // Relative to min(imageWidth, imageHeight)
    symbolXPercent = 50,   // Horizontal position as percentage (0-100)
    symbolYPercent = 50    // Vertical position as percentage (0-100)
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure image dimensions are valid
    const imgWidth = originalImg.naturalWidth || originalImg.width || 0;
    const imgHeight = originalImg.naturalHeight || originalImg.height || 0;

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

    // Draw the original image onto the canvas
    // Do not draw if image dimensions are zero
    if (imgWidth > 0 && imgHeight > 0) {
        ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    } else {
        // If image is 0x0, there's nothing to draw or process.
        // Still return a canvas of 0x0 as per function signature.
        return canvas;
    }

    // Define Zodiac symbols
    const ZODIAC_SYMBOLS = {
        "aries": "♈",   // U+2648
        "taurus": "♉",  // U+2649
        "gemini": "♊",  // U+264A
        "cancer": "♋",  // U+264B
        "leo": "♌",     // U+264C
        "virgo": "♍",   // U+264D
        "libra": "♎",   // U+264E
        "scorpio": "♏", // U+264F
        "sagittarius": "♐", // U+2650
        "capricorn": "♑", // U+2651
        "aquarius": "♒", // U+2652
        "pisces": "♓"    // U+2653
    };

    // Normalize zodiacSign input
    const normalizedSign = String(zodiacSign).trim().toLowerCase();
    const symbol = ZODIAC_SYMBOLS[normalizedSign] || ZODIAC_SYMBOLS["aries"]; // Default to Aries

    // Validate and parse numeric parameters
    let finalSymbolSizeScale = Number(symbolSizeScale);
    if (isNaN(finalSymbolSizeScale) || finalSymbolSizeScale < 0) {
        finalSymbolSizeScale = 0.2; // Default if invalid (from original default)
    }

    let finalSymbolXPercent = Number(symbolXPercent);
    if (isNaN(finalSymbolXPercent)) {
        finalSymbolXPercent = 50; // Default if invalid
    }

    let finalSymbolYPercent = Number(symbolYPercent);
    if (isNaN(finalSymbolYPercent)) {
        finalSymbolYPercent = 50; // Default if invalid
    }
    
    // Validate symbolColor parameter
    let finalSymbolColor = symbolColor;
    if (typeof symbolColor !== 'string' || symbolColor.trim() === "") {
        finalSymbolColor = "rgba(255, 255, 255, 0.8)"; // Default if invalid
    }


    // Calculate properties for the symbol
    const baseSize = Math.min(imgWidth, imgHeight);
    const fontSize = baseSize * finalSymbolSizeScale;

    // Prevent drawing symbol if its size is effectively zero
    if (fontSize <= 0) {
        return canvas; // Return canvas with only the original image drawn
    }
    
    const x = imgWidth * (finalSymbolXPercent / 100);
    const y = imgHeight * (finalSymbolYPercent / 100);

    // Set text properties for drawing the symbol
    ctx.font = `${fontSize}px sans-serif`; // A generic font family is likely to support Unicode symbols
    ctx.fillStyle = finalSymbolColor;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";

    // Draw the symbol
    ctx.fillText(symbol, x, y);

    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 Zodiac Sign Filter Effect Tool allows users to add a personalized zodiac sign symbol to their images. Users can select from various zodiac signs, adjust the size and color of the symbol, and position it anywhere on the image. This tool is ideal for creating customized social media posts, enhancing personal photos, or adding a unique flair to digital artwork. Whether for astrological purposes or simply for fun, this tool provides an easy way to enrich images with zodiac symbolism.

Leave a Reply

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