Photo Artificial Pattern Generator For Deepfake Bypass

/**
 * Applies a subtle artificial pattern to an image, a technique sometimes used
 * to attempt to bypass deepfake or facial recognition detectors by adding
 * high-frequency noise that can confuse machine learning models.
 *
 * @param {Image} originalImg The original JavaScript Image object.
 * @param {string} [patternType='noise'] The type of pattern to apply. Can be 'noise', 'checkerboard', or 'grid'.
 * @param {number} [intensity=0.05] The strength of the pattern, from 0 (none) to 1 (very strong). Controls the amount of pixel color alteration.
 * @param {number} [scale=4] The size of the pattern elements. For 'checkerboard' and 'grid', this is the size of the squares/cells in pixels.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with a canvas element containing the modified image.
 */
async function processImage(originalImg, patternType = 'noise', intensity = 0.05, scale = 4) {
    // 1. Create a canvas and get its 2D rendering context.
    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } can optimize repeated getImageData/putImageData calls.
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });

    // 2. Set canvas dimensions to match the source image.
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

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

    // 4. Get the ImageData object to allow for direct pixel manipulation.
    // This can throw a security error if the image is from a different origin (CORS).
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, width, height);
    } catch (e) {
        console.error("Could not get image data. This may be due to a cross-origin (CORS) issue.", e);
        // Draw an error message on the canvas as a fallback.
        ctx.clearRect(0, 0, width, height);
        ctx.fillStyle = '#CCCCCC';
        ctx.fillRect(0, 0, width, height);
        ctx.fillStyle = '#000000';
        ctx.font = '16px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('Error: Cannot process cross-origin image.', width / 2, height / 2);
        return canvas;
    }

    const data = imageData.data;

    // 5. Sanitize and prepare parameters.
    const numIntensity = Math.max(0, Math.min(1, Number(intensity))); // Clamp intensity between 0 and 1.
    const numScale = Math.max(1, Math.floor(Number(scale))); // Scale must be an integer >= 1.
    const modificationValue = 255 * numIntensity;

    // 6. Iterate over each pixel to apply the selected pattern.
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            // Calculate the index of the red component of the pixel in the data array.
            const i = (y * width + x) * 4;
            let adjustment = 0;

            switch (patternType) {
                case 'checkerboard':
                    const tileX = Math.floor(x / numScale);
                    const tileY = Math.floor(y / numScale);
                    // Alternate between lightening and darkening based on tile position.
                    adjustment = ((tileX + tileY) % 2 === 0) ? modificationValue / 2 : -modificationValue / 2;
                    break;

                case 'grid':
                    // Darken pixels that fall on the grid lines.
                    if (x % numScale === 0 || y % numScale === 0) {
                        adjustment = -modificationValue;
                    }
                    break;

                case 'noise':
                default:
                    // Add random noise. adjustment is between [-modificationValue, +modificationValue].
                    adjustment = (Math.random() - 0.5) * 2 * modificationValue;
                    break;
            }

            // Apply the adjustment to the R, G, and B channels of the pixel.
            if (adjustment !== 0) {
                // Clamp each channel's value to the valid 0-255 range.
                data[i] = Math.max(0, Math.min(255, data[i] + adjustment)); // Red
                data[i + 1] = Math.max(0, Math.min(255, data[i + 1] + adjustment)); // Green
                data[i + 2] = Math.max(0, Math.min(255, data[i + 2] + adjustment)); // Blue
                // The alpha channel (data[i + 3]) is left unchanged.
            }
        }
    }

    // 7. Put the modified pixel data back onto the canvas.
    ctx.putImageData(imageData, 0, 0);

    // 8. Return the canvas with the resulting image.
    return canvas;
}