Please bookmark this page to avoid losing your image tool!

Image Investigation Of The Mask Of Persuasion

(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.
/**
 * Applies a series of glitch and CRT-style effects to an image,
 * inspired by the surreal visuals associated with the "Mask of Persuasion".
 * This function simulates:
 * 1. Chromatic Aberration: Splitting and shifting color channels.
 * 2. Glitch Slicing: Horizontally displacing random slices of the image.
 * 3. Scan Lines: Overlaying faint horizontal lines to mimic a CRT screen.
 *
 * @param {HTMLImageElement} originalImg The source image object.
 * @param {number} glitchIntensity A number from 0 to 100 controlling the amount and intensity of horizontal slice glitching. Defaults to 50.
 * @param {number} scanlineOpacity A number from 0 to 1 for the opacity of the scan lines. Defaults to 0.1.
 * @param {number} channelShift The number of pixels to shift the red and blue color channels for the chromatic aberration effect. Defaults to 5.
 * @returns {HTMLCanvasElement} A new canvas element with the effects applied.
 */
function processImage(originalImg, glitchIntensity = 50, scanlineOpacity = 0.1, channelShift = 5) {
    // 1. Canvas Setup
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    canvas.width = width;
    canvas.height = height;

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

    // Get initial image data for manipulation
    const originalImageData = ctx.getImageData(0, 0, width, height);
    
    // Clamp and validate parameters
    const safeChannelShift = Math.max(0, Number(channelShift) || 0);
    const safeGlitchIntensity = Math.max(0, Math.min(100, Number(glitchIntensity) || 0));
    const safeScanlineOpacity = Math.max(0, Math.min(1, Number(scanlineOpacity) || 0));

    // 2. Chromatic Aberration (Channel Shift)
    if (safeChannelShift > 0) {
        const originalData = originalImageData.data;
        const newImageData = ctx.createImageData(width, height);
        const newData = newImageData.data;

        for (let y = 0; y < height; y++) {
            for (let x = 0; x < width; x++) {
                const i = (y * width + x) * 4;

                // Red channel from a bit to the left
                const r_x = Math.max(0, x - safeChannelShift);
                const r_i = (y * width + r_x) * 4;
                newData[i] = originalData[r_i];

                // Green channel from the original position
                newData[i + 1] = originalData[i + 1];

                // Blue channel from a bit to the right
                const b_x = Math.min(width - 1, x + safeChannelShift);
                const b_i = (y * width + b_x) * 4;
                newData[i + 2] = originalData[b_i + 2];

                // Alpha channel
                newData[i + 3] = originalData[i + 3];
            }
        }
        // Replace the canvas content with the aberrated version
        ctx.putImageData(newImageData, 0, 0);
    }

    // 3. Glitch Slices (Horizontal Shift)
    if (safeGlitchIntensity > 0) {
        const numGlitches = Math.floor((safeGlitchIntensity / 100) * 30); // Max 30 slices

        for (let i = 0; i < numGlitches; i++) {
            // Pick a random starting y and height for the slice
            const y = Math.random() * height;
            const h = Math.random() * (height / 15) + 1;

            // Ensure the slice doesn't go past the bottom of the canvas
            const sliceY = y;
            const sliceH = Math.min(h, height - y);

            if (sliceH <= 0) continue;

            try {
                // Grab the slice of the image
                const sliceData = ctx.getImageData(0, sliceY, width, sliceH);

                // Shift it horizontally by a random amount
                const shift = (Math.random() - 0.5) * (width * 0.15);

                // Draw the shifted slice back onto the canvas
                ctx.putImageData(sliceData, shift, sliceY);
            } catch (e) {
                // This might happen with tainted canvases, but should be safe here.
                console.error("Error creating image glitch slice:", e);
            }
        }
    }


    // 4. Scan Lines
    if (safeScanlineOpacity > 0) {
        ctx.fillStyle = `rgba(0, 0, 0, ${safeScanlineOpacity})`;
        for (let y = 0; y < height; y += 2) {
            ctx.fillRect(0, y, width, 1);
        }
    }

    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 Investigation of the Mask of Persuasion tool allows users to apply a range of glitch and CRT-style effects to images, creating visually striking modifications. This tool is ideal for artists, designers, and anyone interested in digital aesthetics, enabling them to create unique visuals with effects such as chromatic aberration, glitch slicing, and scan lines. Possible use cases include enhancing digital art, creating captivating social media posts, or exploring creative expressions in multimedia projects.

Leave a Reply

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