nkkj
/
yss-project


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片颜色分析报告</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      line-height: 1.6;
      color: #333;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    h1, h2 {
      color: #2c3e50;
    }
    .image-container {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
      flex-wrap: wrap;
    }
    .image-box {
      width: 48%;
      margin-bottom: 20px;
    }
    .image-box img, .image-box canvas {
      max-width: 100%;
      height: auto;
      border: 1px solid #ddd;
    }
    .color-cards {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 20px;
    }
    .color-card {
      width: 100px;
      height: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      color: white;
      text-shadow: 0 0 2px #000;
      font-size: 12px;
      position: relative;
    }
    .color-info {
      background: rgba(0,0,0,0.7);
      padding: 3px 6px;
      border-radius: 3px;
    }
    .color-distribution {
      margin-top: 30px;
    }
    .color-bar {
      height: 30px;
      margin: 5px 0;
      display: flex;
    }
    .color-bar-segment {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-shadow: 0 0 2px #000;
      font-size: 12px;
    }
    #loading {
      text-align: center;
      font-size: 18px;
      margin: 20px 0;
    }
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <h1>图片颜色分析报告</h1>
  
  <div id="loading">正在处理图片，请稍候...</div>
  
  <div id="report" class="hidden">
    <div class="image-container">
      <div class="image-box">
        <h2>原始图片</h2>
        <img id="originalImage" alt="原始图片">
      </div>
      <div class="image-box">
        <h2>马赛克图片</h2>
        <canvas id="mosaicCanvas"></canvas>
      </div>
    </div>
    
    <h2>颜色分布</h2>
    <p>从马赛克图中提取的主要颜色（按出现频率排序）：</p>
    
    <div id="colorCards" class="color-cards"></div>
    
    <div class="color-distribution">
      <h2>颜色频率分布图</h2>
      <div id="colorBar" class="color-bar"></div>
    </div>
  </div>

  <script>
    // 配置
    const CONFIG = {
      pixelSize: 100 // 马赛克块大小
    };
    
    // 主函数
    async function main() {
      try {
        // 加载原始图片
        const image = new Image();
        image.crossOrigin = 'Anonymous';
        image.src = '参考图.png';
        
        image.onload = function() {
          // 显示原始图片
          document.getElementById('originalImage').src = image.src;
          
          // 创建马赛克图片
          const { canvas, colorData } = createMosaic(image, CONFIG.pixelSize);
          
          // 显示马赛克图片
          const mosaicCanvas = document.getElementById('mosaicCanvas');
          mosaicCanvas.width = canvas.width;
          mosaicCanvas.height = canvas.height;
          mosaicCanvas.getContext('2d').drawImage(canvas, 0, 0);
          
          // 生成颜色卡片
          generateColorCards(colorData);
          
          // 生成颜色分布条
          generateColorBar(colorData);
          
          // 隐藏加载提示，显示报告
          document.getElementById('loading').classList.add('hidden');
          document.getElementById('report').classList.remove('hidden');
        };
        
        image.onerror = function() {
          alert('图片加载失败，请确保"参考图.png"文件存在于当前目录。');
        };
      } catch (error) {
        console.error('处理过程中出错:', error);
        alert('处理过程中出错: ' + error.message);
      }
    }
    
    // 创建马赛克图片并提取颜色
    function createMosaic(image, pixelSize) {
      const width = image.width;
      const height = image.height;
      
      // 创建画布
      const canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext('2d');
      
      // 绘制原始图片
      ctx.drawImage(image, 0, 0, width, height);
      
      // 颜色映射: 颜色值 -> 出现次数
      const colorMap = new Map();
      
      // 遍历图像，按块处理
      for (let y = 0; y < height; y += pixelSize) {
        for (let x = 0; x < width; x += pixelSize) {
          // 计算当前块的大小
          const blockWidth = Math.min(pixelSize, width - x);
          const blockHeight = Math.min(pixelSize, height - y);
          
          // 获取块的像素数据
          const imageData = ctx.getImageData(x, y, blockWidth, blockHeight);
          const data = imageData.data;
          
          // 计算平均颜色
          let r = 0, g = 0, b = 0;
          const pixelCount = blockWidth * blockHeight;
          
          for (let i = 0; i < data.length; i += 4) {
            r += data[i];
            g += data[i + 1];
            b += data[i + 2];
          }
          
          r = Math.floor(r / pixelCount);
          g = Math.floor(g / pixelCount);
          b = Math.floor(b / pixelCount);
          
          // 创建颜色键
          const colorKey = `rgb(${r},${g},${b})`;
          
          // 更新颜色映射
          if (colorMap.has(colorKey)) {
            colorMap.set(colorKey, colorMap.get(colorKey) + 1);
          } else {
            colorMap.set(colorKey, 1);
          }
          
          // 填充块
          ctx.fillStyle = colorKey;
          ctx.fillRect(x, y, blockWidth, blockHeight);
        }
      }
      
      // 转换为数组并排序
      const sortedColors = Array.from(colorMap.entries())
        .map(([color, count]) => ({ color, count }))
        .sort((a, b) => b.count - a.count);
      
      return { canvas, colorData: sortedColors };
    }
    
    // 生成颜色卡片
    function generateColorCards(colorData) {
      const colorCardsContainer = document.getElementById('colorCards');
      colorCardsContainer.innerHTML = '';
      
      colorData.slice(0, 20).forEach(item => {
        const percentage = (item.count / colorData.reduce((sum, c) => sum + c.count, 0)) * 100;
        
        const colorCard = document.createElement('div');
        colorCard.className = 'color-card';
        colorCard.style.backgroundColor = item.color;
        
        const colorInfo = document.createElement('div');
        colorInfo.className = 'color-info';
        colorInfo.innerHTML = `${item.color}<br>频率: ${percentage.toFixed(1)}%`;
        
        colorCard.appendChild(colorInfo);
        colorCardsContainer.appendChild(colorCard);
      });
    }
    
    // 生成颜色分布条
    function generateColorBar(colorData) {
      const colorBarContainer = document.getElementById('colorBar');
      colorBarContainer.innerHTML = '';
      
      colorData.slice(0, 10).forEach(item => {
        const percentage = (item.count / colorData.reduce((sum, c) => sum + c.count, 0)) * 100;
        
        const segment = document.createElement('div');
        segment.className = 'color-bar-segment';
        segment.style.backgroundColor = item.color;
        segment.style.width = `${percentage}%`;
        segment.textContent = `${percentage.toFixed(1)}%`;
        
        colorBarContainer.appendChild(segment);
      });
    }
    
    // 运行主函数
    window.onload = main;
  </script>
</body>
</html>