Image Data Formatter

function processImage(originalImg, formatId = 1, separator = 'с') {
    /**
     * Converts an RGB color component to a 2-digit hexadecimal string.
     * @param {number} c The color component (0-255).
     * @returns {string} The 2-digit hex string.
     */
    const componentToHex = (c) => {
        const hex = c.toString(16);
        return hex.length === 1 ? "0" + hex : hex;
    };

    /**
     * Converts RGB color values to a 6-digit hexadecimal string (without '#').
     * @param {number} r The red component (0-255).
     * @param {number} g The green component (0-255).
     * @param {number} b The blue component (0-255).
     * @returns {string} The 6-digit hex color string.
     */
    const rgbToHex = (r, g, b) => {
        return componentToHex(r) + componentToHex(g) + componentToHex(b);
    };

    // Create a temporary canvas to read pixel data from the image.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });

    // Ensure the canvas has the same dimensions as the image.
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

    // Handle empty or unloaded images by returning an empty data string.
    if (canvas.width === 0 || canvas.height === 0) {
        const pre = document.createElement('pre');
        pre.textContent = `${formatId},,`;
        pre.style.fontFamily = 'monospace';
        return pre;
    }

    // Draw the image onto the canvas to access its pixel data.
    ctx.drawImage(originalImg, 0, 0);

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

    // Perform Run-Length Encoding (RLE) on the pixel data.
    let rleData = '';
    let runLength = 0;

    // Initialize with the first pixel's color. The alpha channel is ignored.
    let lastR = data[0];
    let lastG = data[1];
    let lastB = data[2];

    // Iterate over each pixel in the image data array.
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];

        // If the current pixel's color matches the previous one, extend the run.
        if (r === lastR && g === lastG && b === lastB) {
            runLength++;
        } else {
            // If the color changes, record the completed run.
            const hexColor = rgbToHex(lastR, lastG, lastB);
            rleData += `${hexColor}${separator}${runLength}`;

            // Start a new run with the new color.
            lastR = r;
            lastG = g;
            lastB = b;
            runLength = 1;
        }
    }

    // After the loop, ensure the very last run of pixels is recorded.
    const lastHexColor = rgbToHex(lastR, lastG, lastB);
    rleData += `${lastHexColor}${separator}${runLength}`;

    // Assemble the final output string according to the specified format.
    const outputString = `${formatId},,${rleData}`;

    // Create a <pre> element to display the formatted data string nicely.
    const pre = document.createElement('pre');
    pre.style.fontFamily = 'monospace';
    pre.style.whiteSpace = 'pre-wrap';
    pre.style.wordBreak = 'break-all';
    pre.textContent = outputString;

    return pre;
}