Image Corrective Tool

/**
 * Image Corrective Tool (Верное средство)
 * Function adjusts brightness, contrast, saturation, sharpness, and color temperature.
 * 
 * @param {HTMLImageElement} originalImg - The original image to be corrected.
 * @param {number|string} brightness - Brightness adjustment (-100 to 100), default 0.
 * @param {number|string} contrast - Contrast adjustment (-100 to 100), default 0.
 * @param {number|string} saturation - Saturation adjustment (-100 to 100), default 0.
 * @param {number|string} sharpness - Sharpen amount (0 to 100), default 0.
 * @param {number|string} temperature - Color temperature (-100 cooler to 100 warmer), default 0.
 * @returns {HTMLCanvasElement} - A canvas containing the corrected image.
 */
function processImage(originalImg, brightness = 0, contrast = 0, saturation = 0, sharpness = 0, temperature = 0) {
    const width = originalImg.width;
    const height = originalImg.height;
    
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // Parse parameters to numbers
    const b = parseFloat(brightness) || 0;
    const c = parseFloat(contrast) || 0;
    const s = parseFloat(saturation) || 0;
    const sharp = parseFloat(sharpness) || 0;
    const temp = parseFloat(temperature) || 0;

    // Map -100/100 scale to 0%/200% scale for CSS filters
    const bFilter = Math.max(0, 100 + b);
    const cFilter = Math.max(0, 100 + c);
    const sFilter = Math.max(0, 100 + s);

    // native CSS filtering applies hardware-accelerated adjustments upon painting
    ctx.filter = `brightness(${bFilter}%) contrast(${cFilter}%) saturate(${sFilter}%)`;
    ctx.drawImage(originalImg, 0, 0, width, height);

    // If sharpness or color temperature is needed, perform pixel manipulations
    if (sharp > 0 || Math.abs(temp) > 0) {
        const imageData = ctx.getImageData(0, 0, width, height);
        const data = imageData.data;
        
        const isSharpening = sharp > 0;
        let tempData = null;
        let mix = 0, center = 1, edge = 0;

        if (isSharpening) {
            tempData = new Uint8ClampedArray(data);
            mix = Math.min(Math.max(sharp / 100, 0), 1); // Normalize 0 to 1
            center = 1 + 4 * mix;
            edge = -mix;
        }

        for (let y = 0; y < height; y++) {
            for (let x = 0; x < width; x++) {
                const offset = (y * width + x) * 4;
                
                let r = data[offset];
                let g = data[offset + 1];
                let b = data[offset + 2];

                if (isSharpening) {
                    r = g = b = 0;
                    
                    // Top neighbor
                    if (y > 0) {
                        const idx = offset - width * 4;
                        r += tempData[idx] * edge;
                        g += tempData[idx + 1] * edge;
                        b += tempData[idx + 2] * edge;
                    } else {
                        r += tempData[offset] * edge;
                        g += tempData[offset + 1] * edge;
                        b += tempData[offset + 2] * edge;
                    }

                    // Bottom neighbor
                    if (y < height - 1) {
                        const idx = offset + width * 4;
                        r += tempData[idx] * edge;
                        g += tempData[idx + 1] * edge;
                        b += tempData[idx + 2] * edge;
                    } else {
                        r += tempData[offset] * edge;
                        g += tempData[offset + 1] * edge;
                        b += tempData[offset + 2] * edge;
                    }

                    // Left neighbor
                    if (x > 0) {
                        const idx = offset - 4;
                        r += tempData[idx] * edge;
                        g += tempData[idx + 1] * edge;
                        b += tempData[idx + 2] * edge;
                    } else {
                        r += tempData[offset] * edge;
                        g += tempData[offset + 1] * edge;
                        b += tempData[offset + 2] * edge;
                    }

                    // Right neighbor
                    if (x < width - 1) {
                        const idx = offset + 4;
                        r += tempData[idx] * edge;
                        g += tempData[idx + 1] * edge;
                        b += tempData[idx + 2] * edge;
                    } else {
                        r += tempData[offset] * edge;
                        g += tempData[offset + 1] * edge;
                        b += tempData[offset + 2] * edge;
                    }

                    // Center pixel
                    r += tempData[offset] * center;
                    g += tempData[offset + 1] * center;
                    b += tempData[offset + 2] * center;
                }

                if (temp !== 0) {
                    // Quick color temperature correction map
                    r += temp; // Warming adds red, cooling removes red
                    b -= temp; // Warming removes blue, cooling adds blue
                }

                // Uint8ClampedArray handles clamping the values automatically between 0 and 255
                data[offset] = r;
                data[offset + 1] = g;
                data[offset + 2] = b;
                // Alpha (data[offset + 3]) remains untouched
            }
        }
        ctx.putImageData(imageData, 0, 0);
    }

    return canvas;
}