Image API Code Translator

/**
 * Interprets an image as "API code" by generating code snippets to embed or use the image data.
 * This can be an HTML <img> tag, a CSS background-image rule, or the raw Base64 data string.
 *
 * @param {Image} originalImg The original JavaScript Image object to process.
 * @param {string} outputType The type of code to generate. Valid options are 'html', 'css', or 'raw-base64'. Defaults to 'html'.
 * @param {string} imageFormat The image format for encoding the data. Valid options are 'png', 'jpeg', or 'webp'. Defaults to 'png'.
 * @param {string} cssSelector The CSS selector to use when outputType is 'css'. Defaults to '.my-element'.
 * @returns {Promise<HTMLElement>} A Promise that resolves to a <pre> element containing the generated code snippet, styled for readability.
 */
async function processImage(originalImg, outputType = 'html', imageFormat = 'png', cssSelector = '.my-element') {
    // Create a canvas to draw the image on, which is necessary to extract its data.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to the image's intrinsic dimensions.
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // Determine the MIME type for the data URL based on the user's format selection.
    let mimeType;
    switch (imageFormat.toLowerCase()) {
        case 'jpeg':
        case 'jpg':
            mimeType = 'image/jpeg';
            break;
        case 'webp':
            mimeType = 'image/webp';
            break;
        case 'png':
        default:
            mimeType = 'image/png';
            break;
    }

    // Generate the data URL from the canvas content.
    // For 'image/jpeg', you could pass a second argument for quality (e.g., 0.9).
    const dataURL = canvas.toDataURL(mimeType);

    let codeString = '';

    // Generate the appropriate code snippet based on the desired output type.
    switch (outputType.toLowerCase()) {
        case 'css':
            // Generates a complete CSS rule.
            codeString = `${cssSelector} {
  width: ${originalImg.naturalWidth}px;
  height: ${originalImg.naturalHeight}px;
  background-image: url('${dataURL}');
  background-size: cover;
}`;
            break;

        case 'raw-base64':
            // Extracts only the Base64 data part from the data URL string.
            // The format is "data:[<mime type>];base64,<data>"
            codeString = dataURL.substring(dataURL.indexOf(',') + 1);
            break;

        case 'html':
        default:
            // Generates a complete HTML <img> tag with embedded data.
            codeString = `<img src="${dataURL}"
     width="${originalImg.naturalWidth}"
     height="${originalImg.naturalHeight}"
     alt="Embedded Image">`;
            break;
    }

    // Create DOM elements to display the code snippet in a formatted way.
    const preElement = document.createElement('pre');
    const codeElement = document.createElement('code');

    // Assign the generated code to the code element.
    codeElement.textContent = codeString;

    // Apply styles to the <pre> element for a clean, code-like presentation.
    Object.assign(preElement.style, {
        backgroundColor: '#2d2d2d',
        color: '#f1f1f1',
        border: '1px solid #444',
        borderRadius: '5px',
        padding: '1em',
        overflowX: 'auto',
        whiteSpace: 'pre-wrap',
        wordBreak: 'break-all',
        fontFamily: 'Consolas, "Courier New", monospace',
        fontSize: '14px',
        textAlign: 'left'
    });

    // Append the code element to the pre element.
    preElement.appendChild(codeElement);

    // Return the styled <pre> element, which can be directly displayed.
    return preElement;
}