Image Zipper Tool

async function processImage(originalImg, quality = 80, format = 'jpeg', maxWidth = 0, maxHeight = 0) {
  /**
   * Compresses an image by resizing and/or adjusting quality.
   * @param {Image} originalImg - The source Image object. Must be fully loaded.
   * @param {number} quality - The quality of the output image, from 0 to 100. (Applies to JPEG/WebP).
   * @param {string} format - The output format ('jpeg', 'png', 'webp').
   * @param {number} maxWidth - The maximum width of the output image. If 0, original width is used.
   * @param {number} maxHeight - The maximum height of the output image. If 0, original height is used.
   * @returns {Promise<Image>} A promise that resolves with the new, compressed Image object.
   */
  return new Promise((resolve, reject) => {
    try {
      // Create a canvas element to perform the drawing and compression
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      // Get original image dimensions. Use naturalWidth/Height for robustness.
      const originalWidth = originalImg.naturalWidth || originalImg.width;
      const originalHeight = originalImg.naturalHeight || originalImg.height;

      // If the image has no dimensions, it's likely not loaded correctly.
      if (originalWidth === 0 || originalHeight === 0) {
        return reject(new Error("The provided image has no dimensions. Ensure it has been loaded properly before passing it to the function."));
      }

      // Calculate the new dimensions while preserving the aspect ratio.
      // This logic allows for both downscaling and upscaling based on the provided max values.
      const targetWidth = maxWidth > 0 ? maxWidth : originalWidth;
      const targetHeight = maxHeight > 0 ? maxHeight : originalHeight;
      const ratio = Math.min(targetWidth / originalWidth, targetHeight / originalHeight);

      const finalWidth = Math.round(originalWidth * ratio);
      const finalHeight = Math.round(originalHeight * ratio);

      // Set the canvas dimensions to match the output image size
      canvas.width = finalWidth;
      canvas.height = finalHeight;

      // Draw the original image onto the canvas, resizing it in the process
      ctx.drawImage(originalImg, 0, 0, finalWidth, finalHeight);

      // Prepare compression parameters
      let normalizedFormat = format.toLowerCase().trim();
      if (normalizedFormat === 'jpg') {
        normalizedFormat = 'jpeg';
      }
      const mimeType = `image/${normalizedFormat}`;
      
      // Clamp quality to 0-100 and convert to 0-1 range for the API
      const finalQuality = Math.max(0, Math.min(100, quality)) / 100;

      // Generate the data URL with the specified format and quality.
      // The 'quality' parameter is only effective for 'image/jpeg' and 'image/webp'.
      let dataUrl;
      if (mimeType === 'image/jpeg' || mimeType === 'image/webp') {
        dataUrl = canvas.toDataURL(mimeType, finalQuality);
      } else {
        dataUrl = canvas.toDataURL(mimeType); // For PNG, GIF, etc.
      }

      // Create a new Image object from the compressed data URL
      const compressedImg = new Image();
      
      // Resolve the promise once the new image has finished loading
      compressedImg.onload = () => {
        resolve(compressedImg);
      };
      
      // Reject the promise if there's an error loading the new image data
      compressedImg.onerror = () => {
        reject(new Error("Failed to create compressed image from data URL. The format might be unsupported."));
      };
      
      compressedImg.src = dataUrl;

    } catch (e) {
      // Catch any synchronous errors (e.g., from canvas context creation)
      reject(e);
    }
  });
}