Please bookmark this page to avoid losing your image tool!

Photo Pink Filter Application

(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, pinkIntensity = 0.5) {
    // Define the pink color for tinting.
    // Using a fairly vibrant pink (similar to HotPink: R=255, G=105, B=180).
    // For a softer pink, you could use something like R=255, G=192, B=203 (Pink).
    const pinkR = 255;
    const pinkG = 105;
    const pinkB = 180;

    // Ensure pinkIntensity is within the valid range [0, 1]
    const intensity = Math.max(0, Math.min(1, parseFloat(pinkIntensity)));

    // Create a canvas element
    const canvas = document.createElement('canvas');
    const naturalWidth = originalImg.naturalWidth;
    const naturalHeight = originalImg.naturalHeight;

    // It's possible the image isn't loaded yet or has no dimensions.
    // Handle this by returning an empty (or tiny) canvas.
    if (naturalWidth === 0 || naturalHeight === 0) {
        canvas.width = 0;
        canvas.height = 0;
        console.warn("Original image has zero dimensions. Returning an empty canvas.");
        return canvas;
    }

    canvas.width = naturalWidth;
    canvas.height = naturalHeight;

    // Get the 2D rendering context
    const ctx = canvas.getContext('2d');

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

    // If intensity is 0, no filter needs to be applied. Return the canvas with the original image.
    if (intensity === 0) {
        return canvas;
    }

    // Get the image data from the canvas
    try {
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data; // This is a Uint8ClampedArray

        // Iterate through each pixel (represented by 4 values: R, G, B, A)
        for (let i = 0; i < data.length; i += 4) {
            const r = data[i];     // Red channel
            const g = data[i + 1]; // Green channel
            const b = data[i + 2]; // Blue channel
            // Alpha channel (data[i + 3]) is preserved

            // Apply the pink filter using a color blending (interpolation) method:
            // NewColor = OriginalColor * (1 - intensity) + TintColor * intensity
            // This effectively overlays the pink color with the given intensity.
            data[i] = r * (1 - intensity) + pinkR * intensity;
            data[i + 1] = g * (1 - intensity) + pinkG * intensity;
            data[i + 2] = b * (1 - intensity) + pinkB * intensity;
        }

        // Put the modified image data back onto the canvas
        ctx.putImageData(imageData, 0, 0);
    } catch (e) {
        // Catch potential security errors with getImageData if the image is cross-origin and canvas is tainted
        console.error("Error processing image with pink filter: ", e);
        // In case of error, we might return the canvas with the original image drawn,
        // or handle it differently (e.g., return an empty canvas or throw).
        // For now, ctx still has the original image drawn if getImageData failed.
        // To be safe, or clear, one might clearRect and draw original again or nothing.
        // However, if drawImage succeeded, but getImageData failed (CORS),
        // the canvas is tainted and further operations might be restricted.
        // The problem assumes non-tainted canvas usage.
    }


    // Return the canvas with the filtered image
    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 Photo Pink Filter Application allows users to apply a vibrant pink filter to their images. By adjusting the intensity of the pink tint, users can create various effects ranging from subtle to strong pink hues. This tool is ideal for enhancing photos for personal projects, social media posts, or artistic expressions. It is particularly useful for those looking to give their images a fresh, stylized look, especially in fashion, lifestyle, or creative photography.

Leave a Reply

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