Image To Binary Lua Table Converter

async function processImage(originalImg) {
    let buffer;

    // This robust approach first attempts to fetch the original image's binary data
    // to preserve its format as perfectly as possible. This works for images
    // from file inputs (as blob: URLs), data URIs, and for same-origin or
    // CORS-enabled remote images.
    if (originalImg.src) {
        try {
            const response = await fetch(originalImg.src);
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            buffer = await response.arrayBuffer();
        } catch (e) {
            console.warn("Could not fetch original image source. Falling back to canvas re-encoding as PNG.", e);
            // If fetching fails (e.g., CORS error), the buffer will remain undefined,
            // and the fallback mechanism below will be used.
        }
    }

    // Fallback: If fetching was not possible, we draw the image onto a canvas
    // and extract its data. This effectively converts the image to a lossless PNG format.
    if (!buffer) {
        try {
            const canvas = document.createElement('canvas');
            canvas.width = originalImg.naturalWidth;
            canvas.height = originalImg.naturalHeight;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(originalImg, 0, 0);

            const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
            if (!blob) {
                throw new Error('Canvas toBlob operation failed.');
            }
            buffer = await blob.arrayBuffer();
        } catch (fallbackError) {
            console.error("Image conversion fallback failed:", fallbackError);
            const errorDiv = document.createElement('div');
            errorDiv.textContent = 'Error: Failed to convert image to binary data.';
            return errorDiv;
        }
    }

    const byteArray = new Uint8Array(buffer);

    // Handle case of empty image data
    if (byteArray.length === 0) {
        const pre = document.createElement('pre');
        pre.textContent = '{}';
        return pre;
    }

    const bytesPerLine = 16;
    const lines = [];

    // Group bytes into lines for readability.
    for (let i = 0; i < byteArray.length; i += bytesPerLine) {
        const chunk = byteArray.slice(i, i + bytesPerLine);
        // Using Array.prototype.join.call() is an efficient way to join TypedArray elements.
        lines.push('  ' + Array.prototype.join.call(chunk, ', '));
    }

    // Assemble the final Lua table string.
    const luaTableString = '{\n' + lines.join(',\n') + '\n}';

    // Create a <pre><code> element to display the formatted code nicely.
    const pre = document.createElement('pre');
    const code = document.createElement('code');
    code.textContent = luaTableString;
    pre.appendChild(code);

    return pre;
}