// よくある問題: プロファイル無視の画像変換
// 悪い例
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(p3Image, 0, 0); // P3 → sRGB への意図しない変換

// 良い例: 明示的な色空間変換
async function convertColorSpace(imageElement, targetColorSpace = 'srgb') {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d', { 
    colorSpace: targetColorSpace,
    alpha: true 
  });
  
  canvas.width = imageElement.naturalWidth;
  canvas.height = imageElement.naturalHeight;
  
  // 明示的な色空間指定で描画
  ctx.drawImage(imageElement, 0, 0);
  
  return canvas;
}

# Python での sRGB 変換例
import colour

def ensure_srgb_conversion(image_path, output_path):
    """画像を sRGB 色空間に確実に変換"""
    
    # 画像とメタデータを読み込み
    image = colour.io.read_image(image_path)
    
    # 元の色空間を検出
    original_colorspace = detect_colorspace_from_metadata(image_path)
    
    if original_colorspace == 'sRGB':
        # すでに sRGB の場合はコピーのみ
        shutil.copy2(image_path, output_path)
        return
    
    # 適切な変換マトリックスで sRGB に変換
    if original_colorspace == 'Display P3':
        # P3 → sRGB の変換
        srgb_image = colour.RGB_to_RGB(
            image,
            colour.models.RGB_COLOURSPACES['Display P3'],
            colour.models.RGB_COLOURSPACES['sRGB'],
            apply_cctf_decoding=True,
            apply_cctf_encoding=True
        )
    elif original_colorspace == 'Adobe RGB':
        # Adobe RGB → sRGB の変換
        srgb_image = colour.RGB_to_RGB(
            image,
            colour.models.RGB_COLOURSPACES['Adobe RGB (1998)'],
            colour.models.RGB_COLOURSPACES['sRGB']
        )
    
    # 保存時に sRGB プロファイルを埋め込み
    colour.io.write_image(srgb_image, output_path, bit_depth='uint8')

/* CSS での P3 色指定 */
.p3-red {
  /* P3 対応ブラウザでは鮮やかな赤 */
  color: color(display-p3 1 0.2 0.2);
  
  /* フォールバック用 sRGB 指定 */
  color: rgb(255, 51, 51);
}

/* メディアクエリで P3 対応を検出 */
@media (color-gamut: p3) {
  .wide-gamut-image {
    content: url('hero-p3.jpg');
  }
}

@media (color-gamut: srgb) {
  .wide-gamut-image {
    content: url('hero-srgb.jpg');
  }
}

// JavaScript での P3 対応検出
function detectWideColorGamutSupport() {
  // CSS color() 関数のサポート検出
  const testElement = document.createElement('div');
  testElement.style.color = 'color(display-p3 1 0 0)';
  
  const supportsP3 = testElement.style.color !== '';
  
  if (supportsP3) {
    console.log('P3 色域対応デバイス');
    return 'p3';
  }
  
  // CSS color-gamut メディアクエリでの検出
  if (window.matchMedia && window.matchMedia('(color-gamut: p3)').matches) {
    return 'p3';
  }
  
  if (window.matchMedia && window.matchMedia('(color-gamut: srgb)').matches) {
    return 'srgb';
  }
  
  return 'srgb'; // フォールバック
}

// 動的な画像切り替え
function loadColorSpaceOptimizedImage(baseUrl, fileExtension = 'jpg') {
  const colorSpace = detectWideColorGamutSupport();
  const imagePath = `${baseUrl}-${colorSpace}.${fileExtension}`;
  
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = () => {
      // P3 画像が見つからない場合は sRGB にフォールバック
      const fallbackPath = `${baseUrl}-srgb.${fileExtension}`;
      const fallbackImg = new Image();
      fallbackImg.onload = () => resolve(fallbackImg);
      fallbackImg.onerror = reject;
      fallbackImg.src = fallbackPath;
    };
    img.src = imagePath;
  });
}

# 印刷用途別の CMYK 変換
import colour
from PIL import Image, ImageCms

def convert_to_print_cmyk(rgb_image_path, print_type='offset'):
    """用途別 CMYK 変換"""
    
    rgb_image = Image.open(rgb_image_path)
    
    if print_type == 'offset':
        # オフセット印刷（Japan Color 2001 Coated）
        cmyk_profile = ImageCms.createProfile('LAB')  # 仮の例
        cmyk_profile_path = 'JapanColor2001Coated.icc'
    elif print_type == 'newspaper':
        # 新聞印刷（IFRA26）
        cmyk_profile_path = 'IFRA26.icc'
    elif print_type == 'digital':
        # デジタル印刷（Fogra39）
        cmyk_profile_path = 'Fogra39.icc'
    
    # RGB から CMYK への変換
    rgb_profile = ImageCms.createProfile('sRGB')
    cmyk_profile = ImageCms.ImageCmsProfile(cmyk_profile_path)
    
    # レンダリングインテント（知覚的 vs 相対カラーメトリック）
    transform = ImageCms.buildTransformFromOpenProfiles(
        rgb_profile, 
        cmyk_profile,
        'RGB', 
        'CMYK',
        renderingIntent=ImageCms.INTENT_PERCEPTUAL  # 写真向け
        # renderingIntent=ImageCms.INTENT_RELATIVE_COLORIMETRIC  # ロゴ向け
    )
    
    cmyk_image = ImageCms.applyTransform(rgb_image, transform)
    
    return cmyk_image

# 分版プレビュー生成
def generate_separation_preview(cmyk_image):
    """CMYK 各版の分解表示"""
    
    c, m, y, k = cmyk_image.split()
    
    # 各版を RGB で可視化
    separations = {
        'cyan': Image.merge('RGB', (Image.new('L', c.size, 0), c, c)),
        'magenta': Image.merge('RGB', (m, Image.new('L', m.size, 0), m)),
        'yellow': Image.merge('RGB', (y, y, Image.new('L', y.size, 0))),
        'black': Image.merge('RGB', (k, k, k))
    }
    
    return separations

graph TD
    A[原画像<br/>RAW/高解像度] --> B[作業用<br/>ProPhoto RGB/16bit]
    B --> C[Web配信用<br/>sRGB/8bit]
    B --> D[Wide Gamut Web<br/>P3/8bit]
    B --> E[印刷入稿用<br/>CMYK/300dpi]
    
    C --> F[レスポンシブバリアント生成]
    D --> G[P3対応デバイス向け配信]
    E --> H[印刷会社への入稿]

// Node.js での色管理自動化
import sharp from 'sharp';
import { exec } from 'child_process';
import { promisify } from 'util';

const execAsync = promisify(exec);

class ColorManagedConverter {
  constructor(options = {}) {
    this.tempDir = options.tempDir || './temp';
    this.profiles = {
      srgb: 'sRGB.icc',
      p3: 'DisplayP3.icc',
      cmyk: 'JapanColor2001Coated.icc'
    };
  }
  
  async convertWorkflow(inputPath, outputFormats = ['srgb', 'p3']) {
    const results = {};
    
    // 元画像の色空間を検出
    const metadata = await sharp(inputPath).metadata();
    const inputProfile = await this.detectInputProfile(inputPath);
    
    console.log(`入力プロファイル: ${inputProfile}`);
    
    for (const format of outputFormats) {
      try {
        results[format] = await this.convertToColorSpace(
          inputPath, 
          format,
          inputProfile
        );
        console.log(`${format} 変換完了: ${results[format]}`);
      } catch (error) {
        console.error(`${format} 変換エラー:`, error);
        results[format] = null;
      }
    }
    
    return results;
  }
  
  async convertToColorSpace(inputPath, targetColorSpace, inputProfile) {
    const outputPath = `${this.tempDir}/${path.basename(inputPath, path.extname(inputPath))}-${targetColorSpace}.jpg`;
    
    let sharpInstance = sharp(inputPath);
    
    switch (targetColorSpace) {
      case 'srgb':
        sharpInstance = sharpInstance
          .withMetadata({ icc: this.profiles.srgb })
          .jpeg({ quality: 90 });
        break;
        
      case 'p3':
        // P3 プロファイルを適用
        sharpInstance = sharpInstance
          .withMetadata({ icc: this.profiles.p3 })
          .jpeg({ quality: 90 });
        break;
        
      case 'cmyk':
        // CMYK 変換は外部ツール（ImageMagick）を使用
        await this.convertToCMYK(inputPath, outputPath);
        return outputPath;
    }
    
    await sharpInstance.toFile(outputPath);
    return outputPath;
  }
  
  async convertToCMYK(inputPath, outputPath) {
    // ImageMagick での高精度 CMYK 変換
    const command = `magick "${inputPath}" -profile "${this.profiles.srgb}" -profile "${this.profiles.cmyk}" -colorspace CMYK "${outputPath}"`;
    
    await execAsync(command);
    
    // CMYK 値の妥当性チェック
    await this.validateCMYKOutput(outputPath);
  }
  
  async validateCMYKOutput(cmykPath) {
    // 総インク量（TAC）チェック
    const { stdout } = await execAsync(`identify -verbose "${cmykPath}" | grep -i "total ink"`);
    
    const tacMatch = stdout.match(/(\d+\.?\d*)%/);
    if (tacMatch) {
      const tac = parseFloat(tacMatch[1]);
      if (tac > 320) {
        console.warn(`警告: 総インク量が ${tac}% です。印刷時にインク滲みが発生する可能性があります。`);
      }
    }
  }
  
  async detectInputProfile(imagePath) {
    try {
      const { stdout } = await execAsync(`exiftool -ColorSpace -WhitePoint -ColorSpaceData "${imagePath}"`);
      
      if (stdout.includes('Display P3')) return 'p3';
      if (stdout.includes('Adobe RGB')) return 'adobergb';
      if (stdout.includes('sRGB')) return 'srgb';
      
      // プロファイル未指定の場合は sRGB と仮定
      return 'srgb';
    } catch (error) {
      console.warn('プロファイル検出に失敗、sRGB として処理:', error.message);
      return 'srgb';
    }
  }
}

// 使用例
const converter = new ColorManagedConverter();

async function processProductImages() {
  const productImages = await glob('./products/*.{jpg,png,tiff}');
  
  for (const imagePath of productImages) {
    console.log(`処理中: ${imagePath}`);
    
    const results = await converter.convertWorkflow(imagePath, ['srgb', 'p3', 'cmyk']);
    
    // Web 配信用の追加処理
    if (results.srgb) {
      await generateResponsiveVariants(results.srgb);
    }
    
    // 印刷用の後処理
    if (results.cmyk) {
      await generatePrintReadyFile(results.cmyk);
    }
  }
}

# 色差測定（Delta E）による品質評価
import colour
import numpy as np

def measure_color_accuracy(original_path, converted_path, sample_points=100):
    """変換前後の色差を定量的に測定"""
    
    original = colour.io.read_image(original_path)
    converted = colour.io.read_image(converted_path)
    
    # ランダムサンプリングで代表点を選択
    h, w = original.shape[:2]
    sample_coords = np.random.randint(0, [h, w], size=(sample_points, 2))
    
    delta_e_values = []
    
    for y, x in sample_coords:
        # RGB → Lab 変換
        original_lab = colour.RGB_to_Lab(original[y, x])
        converted_lab = colour.RGB_to_Lab(converted[y, x])
        
        # Delta E 2000 で色差を計算
        delta_e = colour.delta_E(original_lab, converted_lab, method='CIE 2000')
        delta_e_values.append(delta_e)
    
    delta_e_array = np.array(delta_e_values)
    
    return {
        'mean_delta_e': np.mean(delta_e_array),
        'max_delta_e': np.max(delta_e_array),
        'std_delta_e': np.std(delta_e_array),
        'acceptable_ratio': np.sum(delta_e_array < 2.0) / len(delta_e_array)  # Delta E < 2 の割合
    }

# 色域カバレッジ分析
def analyze_gamut_coverage(image_path, target_gamut='sRGB'):
    """画像の色域利用率を分析"""
    
    image = colour.io.read_image(image_path)
    
    # 画像の全ピクセルを Lab 色空間に変換
    lab_image = colour.RGB_to_Lab(image.reshape(-1, 3))
    
    # 目標色域の境界を取得
    if target_gamut == 'sRGB':
        gamut_boundary = colour.models.RGB_COLOURSPACE_sRGB.primaries
    elif target_gamut == 'Display P3':
        gamut_boundary = colour.models.RGB_COLOURSPACE_DISPLAY_P3.primaries
    
    # 色域外の色の割合を計算
    out_of_gamut_pixels = count_out_of_gamut_pixels(lab_image, gamut_boundary)
    
    return {
        'total_pixels': len(lab_image),
        'out_of_gamut_count': out_of_gamut_pixels,
        'out_of_gamut_ratio': out_of_gamut_pixels / len(lab_image),
        'gamut_utilization': calculate_gamut_utilization(lab_image, target_gamut)
    }

// Web での色精度検証ツール
class ColorAccuracyTester {
  constructor() {
    this.testPatterns = this.generateTestPatterns();
    this.userDevice = this.detectUserDevice();
  }
  
  generateTestPatterns() {
    return {
      // グレースケール階調
      grayscale: Array.from({ length: 11 }, (_, i) => ({
        rgb: [i * 25.5, i * 25.5, i * 25.5],
        label: `Gray ${i * 10}%`
      })),
      
      // 純色テスト
      primaryColors: [
        { rgb: [255, 0, 0], p3: 'color(display-p3 1 0 0)', label: 'Pure Red' },
        { rgb: [0, 255, 0], p3: 'color(display-p3 0 1 0)', label: 'Pure Green' },
        { rgb: [0, 0, 255], p3: 'color(display-p3 0 0 1)', label: 'Pure Blue' }
      ],
      
      // 肌色テスト
      skinTones: [
        { rgb: [241, 194, 125], label: 'Light Skin' },
        { rgb: [224, 172, 105], label: 'Medium Skin' },
        { rgb: [198, 134, 66], label: 'Dark Skin' }
      ]
    };
  }
  
  async runColorAccuracyTest() {
    const testContainer = document.getElementById('color-test-container');
    
    // デバイス情報を表示
    this.displayDeviceInfo(testContainer);
    
    // テストパターンを表示
    for (const [category, patterns] of Object.entries(this.testPatterns)) {
      const categorySection = this.createTestSection(category, patterns);
      testContainer.appendChild(categorySection);
    }
    
    // ユーザーによる主観評価インターフェース
    this.setupUserFeedback();
  }
  
  detectUserDevice() {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // 色域サポートの検出
    const supportsP3 = window.matchMedia('(color-gamut: p3)').matches;
    const supportsRec2020 = window.matchMedia('(color-gamut: rec2020)').matches;
    
    return {
      colorGamut: supportsRec2020 ? 'rec2020' : (supportsP3 ? 'p3' : 'srgb'),
      userAgent: navigator.userAgent,
      screenInfo: {
        width: screen.width,
        height: screen.height,
        colorDepth: screen.colorDepth,
        pixelDepth: screen.pixelDepth
      }
    };
  }
  
  createTestSection(category, patterns) {
    const section = document.createElement('div');
    section.className = 'color-test-section';
    
    const title = document.createElement('h3');
    title.textContent = category;
    section.appendChild(title);
    
    patterns.forEach((pattern, index) => {
      const swatch = document.createElement('div');
      swatch.className = 'color-swatch';
      swatch.style.backgroundColor = pattern.p3 || `rgb(${pattern.rgb.join(',')})`;
      
      const label = document.createElement('span');
      label.textContent = pattern.label;
      
      swatch.appendChild(label);
      section.appendChild(swatch);
    });
    
    return section;
  }
}

// 実行
const tester = new ColorAccuracyTester();
tester.runColorAccuracyTest();

// ガンマ補正の問題
function fixGammaIssues(imageElement) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  
  canvas.width = imageElement.naturalWidth;
  canvas.height = imageElement.naturalHeight;
  
  ctx.drawImage(imageElement, 0, 0);
  
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;
  
  // ガンマ補正（1.8 → 2.2 変換例）
  for (let i = 0; i < data.length; i += 4) {
    for (let c = 0; c < 3; c++) {
      const normalized = data[i + c] / 255;
      const corrected = Math.pow(normalized, 1.8 / 2.2);
      data[i + c] = Math.round(corrected * 255);
    }
  }
  
  ctx.putImageData(imageData, 0, 0);
  return canvas;
}

# ソフトプルーフィング（印刷シミュレーション）
def soft_proof_for_print(rgb_image_path, print_profile_path):
    """印刷結果をモニター上でシミュレーション"""
    
    from PIL import Image, ImageCms
    
    rgb_image = Image.open(rgb_image_path)
    
    # プロファイル設定
    rgb_profile = ImageCms.createProfile('sRGB')
    print_profile = ImageCms.ImageCmsProfile(print_profile_path)
    monitor_profile = ImageCms.createProfile('sRGB')  # モニタープロファイル
    
    # 印刷シミュレーション変換
    # RGB → 印刷色域 → モニター表示
    transform = ImageCms.buildProofTransform(
        rgb_profile,           # 入力プロファイル
        monitor_profile,       # 出力プロファイル（モニター）
        print_profile,         # プルーフプロファイル（印刷）
        'RGB', 'RGB',
        renderingIntent=ImageCms.INTENT_PERCEPTUAL,
        proofRenderingIntent=ImageCms.INTENT_RELATIVE_COLORIMETRIC
    )
    
    proof_image = ImageCms.applyTransform(rgb_image, transform)
    
    # 色域外警告の生成
    gamut_warning = create_gamut_warning_mask(rgb_image, print_profile)
    
    return proof_image, gamut_warning

def create_gamut_warning_mask(image, target_profile):
    """色域外領域をハイライト表示"""
    
    # 簡略化された実装例
    lab_image = rgb_to_lab(image)
    target_gamut = get_gamut_boundary(target_profile)
    
    warning_mask = np.zeros(lab_image.shape[:2], dtype=bool)
    
    for y in range(lab_image.shape[0]):
        for x in range(lab_image.shape[1]):
            if not is_in_gamut(lab_image[y, x], target_gamut):
                warning_mask[y, x] = True
    
    return warning_mask

<!-- 色域対応レスポンシブ画像 -->
<picture>
  <!-- P3 対応デバイス向け -->
  <source 
    media="(color-gamut: p3)" 
    srcset="hero-p3-400.jpg 400w, hero-p3-800.jpg 800w, hero-p3-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw">
  
  <!-- 標準 sRGB デバイス向け -->
  <source 
    srcset="hero-srgb-400.jpg 400w, hero-srgb-800.jpg 800w, hero-srgb-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw">
  
  <!-- フォールバック -->
  <img src="hero-srgb-800.jpg" alt="ヒーロー画像">
</picture>