Please bookmark this page to avoid losing your image tool!

Image Cross-Process 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.
async function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the image is loaded and has dimensions
    // A more robust solution might involve waiting for originalImg.onload if it's not yet complete,
    // but typically for a function like this, a loaded image is expected.
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    if (width === 0 || height === 0) {
        // Return an empty canvas if image has no dimensions
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

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

    ctx.drawImage(originalImg, 0, 0, width, height);

    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // S-curve contrast enhancement and color mixing coefficients for cross-processing
    const k_contrast = 6; // Steepness of S-curve for contrast

    // Coefficients for color mixing (R_new = C1r*R_s + C1g*G_s + C1b*B_s, etc.)
    const C1r = 0.5, C1g = 0.7, C1b = 0.2; // For final Red channel
    const C2r = 0.2, C2g = 0.5, C2b = 0.7; // For final Green channel
    const C3r = 0.7, C3g = 0.2, C3b = 0.5; // For final Blue channel

    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];

        // 1. Apply S-curve for contrast enhancement to each channel
        let r_norm = r / 255;
        let g_norm = g / 255;
        let b_norm = b / 255;

        let r_s = (1 / (1 + Math.exp(-k_contrast * (r_norm - 0.5)))) * 255;
        let g_s = (1 / (1 + Math.exp(-k_contrast * (g_norm - 0.5)))) * 255;
        let b_s = (1 / (1 + Math.exp(-k_contrast * (b_norm - 0.5)))) * 255;
        
        // Clamp intermediate s-curve results to be safe, though logistic output should be mostly within range
        r_s = Math.max(0, Math.min(255, r_s));
        g_s = Math.max(0, Math.min(255, g_s));
        b_s = Math.max(0, Math.min(255, b_s));

        // 2. Apply color mixing
        let final_r = C1r * r_s + C1g * g_s + C1b * b_s;
        let final_g = C2r * r_s + C2g * g_s + C2b * b_s;
        let final_b = C3r * r_s + C3g * g_s + C3b * b_s;

        // Clamp final values to [0, 255]
        data[i] = Math.max(0, Math.min(255, final_r));
        data[i + 1] = Math.max(0, Math.min(255, final_g));
        data[i + 2] = Math.max(0, Math.min(255, final_b));
        // Alpha channel (data[i + 3]) remains unchanged
    }

    ctx.putImageData(imageData, 0, 0);
    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 Cross-Process Filter Application is a tool designed to enhance your images through a cross-processing effect. This tool applies a combination of contrast enhancement and color mixing to give your photos a unique, stylized look. Ideal for photographers and graphic designers, it can be used to create artistic effects, enhance visual appeal, or add a creative touch to images. Users can transform their images for social media, marketing materials, or personal projects with this simple yet effective image processing utility.

Leave a Reply

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