フロントエンド画像圧縮ソリューション

/**
 * Compress an image using Canvas
 * @param {File|Blob} file - The original image file
 * @param {Object} options - Compression options
 * @param {number} [options.quality=0.7] - Image quality, range 0-1
 * @param {number} [options.maxWidth=1000] - Maximum width
 * @param {number} [options.maxHeight=1000] - Maximum height
 * @returns {Promise<Blob>} - The compressed image Blob
 */
function compressImage(file, options = {}) {
  return new Promise((resolve, reject) => {
    // Set default options
    const { 
      quality = 0.7, 
      maxWidth = 1000, 
      maxHeight = 1000 
    } = options;

    // Validate image file
    if (!file.type.startsWith('image/')) {
      reject(new Error('File is not a valid image'));
      return;
    }

    // Create image object
    const img = new Image();
    const reader = new FileReader();

    reader.onload = function(e) {
      img.src = e.target.result;
    };

    reader.onerror = () => reject(new Error('Failed to read file'));
    reader.readAsDataURL(file);

    img.onload = function() {
      // Calculate resized dimensions
      let width = img.width;
      let height = img.height;
      
      if (width > maxWidth) {
        height = height * (maxWidth / width);
        width = maxWidth;
      }
      
      if (height > maxHeight) {
        width = width * (maxHeight / height);
        height = maxHeight;
      }

      // Create canvas and draw image
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = width;
      canvas.height = height;
      
      // Draw image to canvas
      ctx.drawImage(img, 0, 0, width, height);

      // Determine image type
      const type = file.type === 'image/jpeg' ? 'image/jpeg' : 'image/png';

      // Convert canvas content to Blob
      canvas.toBlob(
        blob => resolve(blob), 
        type, 
        quality
      );
    };

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