Image Format Converter

/**
 * Converts an image to a specified format using a canvas.
 * The function returns a promise that resolves with a new Image object.
 *
 * @param {HTMLImageElement} originalImg The original image object to convert.
 * @param {string} [format='png'] The target format (e.g., 'png', 'jpeg', 'webp', 'bmp').
 * @param {number} [quality=0.92] The image quality for lossy formats like 'jpeg' and 'webp', a value between 0.0 and 1.0.
 * @param {string} [backgroundColor='#ffffff'] The background color (e.g., '#FFF', 'blue') to use for formats that do not support transparency.
 * @returns {Promise<HTMLImageElement>} A promise that resolves with the new Image object in the target format.
 */
async function processImage(originalImg, format = 'png', quality = 0.92, backgroundColor = '#ffffff') {
  return new Promise((resolve, reject) => {
    // Create an in-memory canvas.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

    // Normalize the format string to handle 'jpg' as 'jpeg'.
    const lowerFormat = format.toLowerCase().replace('jpg', 'jpeg');
    const mimeType = `image/${lowerFormat}`;

    // For formats that do not support transparency (like JPEG or BMP),
    // fill the canvas with a background color first.
    if (lowerFormat === 'jpeg' || lowerFormat === 'bmp') {
      ctx.fillStyle = backgroundColor;
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

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

    // Convert the canvas content to a Data URL in the specified format and quality.
    let dataURL;
    try {
      // The quality argument is only applicable for 'image/jpeg' and 'image/webp'.
      dataURL = canvas.toDataURL(mimeType, quality);
    } catch (e) {
      return reject(new Error(`Conversion to format '${format}' failed. It may not be supported by your browser.`));
    }

    // Create a new Image object to hold the converted image.
    const resultImg = new Image();
    resultImg.onload = () => {
      resolve(resultImg);
    };
    resultImg.onerror = (err) => {
      reject(new Error('Failed to load the converted image data.'));
    };
    
    // Set the source of the new image to the Data URL.
    resultImg.src = dataURL;
  });
}