Image Format Converter - Convert PNG, JPG, WebP & AVIF Online

// Client-side image format conversion using Canvas API
async function convertImageFormat(file, outputFormat, quality = 0.8) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    const url = URL.createObjectURL(file);

    img.onload = () => {
      URL.revokeObjectURL(url);

      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;

      const ctx = canvas.getContext('2d');

      // Fill background for JPEG (no transparency support)
      if (outputFormat === 'image/jpeg') {
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
      }

      ctx.drawImage(img, 0, 0);

      canvas.toBlob(
        (blob) => {
          if (!blob) {
            reject(new Error('Conversion failed'));
            return;
          }
          resolve({
            blob,
            originalSize: file.size,
            convertedSize: blob.size,
            inputFormat: file.type,
            outputFormat: outputFormat,
            sizeDiff: Math.round(((blob.size - file.size) / file.size) * 100),
          });
        },
        outputFormat,
        outputFormat === 'image/png' ? undefined : quality
      );
    };

    img.onerror = () => {
      URL.revokeObjectURL(url);
      reject(new Error('Failed to load image'));
    };

    img.src = url;
  });
}

// Check AVIF support
async function checkAvifSupport() {
  const canvas = document.createElement('canvas');
  canvas.width = 1;
  canvas.height = 1;
  return new Promise((resolve) => {
    canvas.toBlob(
      (blob) => resolve(blob?.type === 'image/avif'),
      'image/avif',
      0.5
    );
  });
}

// Batch conversion
async function convertBatch(files, outputFormat, quality = 0.8) {
  const results = [];
  for (const file of files) {
    try {
      const result = await convertImageFormat(file, outputFormat, quality);
      results.push({ filename: file.name, ...result });
    } catch (error) {
      results.push({ filename: file.name, error: error.message });
    }
  }
  return results;
}

// Usage
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
  const files = Array.from(e.target.files);
  const results = await convertBatch(files, 'image/webp', 0.8);

  results.forEach((result) => {
    if (result.error) {
      console.error(`${result.filename}: ${result.error}`);
    } else {
      console.log(
        `${result.filename}: ${result.inputFormat} -> ${result.outputFormat}, ` +
        `${result.originalSize} -> ${result.convertedSize} (${result.sizeDiff}%)`
      );
    }
  });
});