<div class="test-container">
  <div class="test-section">
    <h3>Canvas 指纹识别测试</h3>
    <button id="testCanvas">测试 Canvas 指纹识别</button>
    <div id="canvasResult"></div>
  </div>

  <div class="test-section">
    <h3>WebGL 指纹识别测试</h3>
    <button id="testWebGL">测试 WebGL 指纹识别</button>
    <div id="webglResult"></div>
  </div>

  <div class="test-section">
    <h3>音频指纹识别测试</h3>
    <button id="testAudio">测试音频指纹识别</button>
    <div id="audioResult"></div>
  </div>

  <div class="test-section">
    <h3>字体检测测试</h3>
    <button id="testFonts">测试字体检测</button>
    <div id="fontResult"></div>
  </div>
</div>

<script>
  // Canvas 指纹识别
  document.getElementById('testCanvas').addEventListener('click', () => {
    try {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = 200;
      canvas.height = 50;

      // 绘制文本
      ctx.textBaseline = 'top';
      ctx.font = '14px Arial';
      ctx.textBaseline = 'alphabetic';
      ctx.fillStyle = '#f60';
      ctx.fillRect(125,1,62,20);
      ctx.fillStyle = '#069';
      ctx.fillText('指纹识别测试', 2, 17);
      ctx.fillStyle = 'rgba(102, 204, 0, 0.7)';
      ctx.fillText('指纹识别测试', 4, 17);

      const fingerprint = canvas.toDataURL();
      document.getElementById('canvasResult').textContent =
        "Canvas 指纹已生成。请查看控制台获取详细信息。";
      console.log('Canvas 指纹:', fingerprint);
    } catch (e) {
      document.getElementById('canvasResult').textContent =
        "生成 Canvas 指纹时出错：" + e.message;
    }
  });

  // WebGL 指纹识别
  document.getElementById('testWebGL').addEventListener('click', () => {
    try {
      const canvas = document.createElement('canvas');
      const gl = canvas.getContext('webgl');
      const fingerprint = gl.getParameter(gl.VENDOR) + '|' +
                         gl.getParameter(gl.RENDERER) + '|' +
                         gl.getParameter(gl.VERSION);
      document.getElementById('webglResult').textContent =
        "WebGL 指纹：" + fingerprint;
    } catch (e) {
      document.getElementById('webglResult').textContent =
        "获取 WebGL 指纹时出错：" + e.message;
    }
  });

  // 音频指纹识别
  document.getElementById('testAudio').addEventListener('click', () => {
    try {
      const audioContext = new (window.AudioContext || window.webkitAudioContext)();
      const oscillator = audioContext.createOscillator();
      const analyser = audioContext.createAnalyser();
      const gainNode = audioContext.createGain();
      const scriptProcessor = audioContext.createScriptProcessor(4096, 1, 1);

      gainNode.gain.value = 0; // 静音
      oscillator.type = 'triangle';
      oscillator.connect(analyser);
      analyser.connect(gainNode);
      gainNode.connect(scriptProcessor);
      scriptProcessor.connect(audioContext.destination);
      oscillator.start(0);

      scriptProcessor.onaudioprocess = (e) => {
        const inputData = e.inputBuffer.getChannelData(0);
        const sum = inputData.reduce((a, b) => a + b);
        document.getElementById('audioResult').textContent =
          "音频指纹已生成。请查看控制台获取详细信息。";
        console.log('音频指纹:', sum);
      };
    } catch (e) {
      document.getElementById('audioResult').textContent =
        "生成音频指纹时出错：" + e.message;
    }
  });

  // 字体检测
  document.getElementById('testFonts').addEventListener('click', () => {
    try {
      const baseFonts = ['monospace', 'sans-serif', 'serif'];
      const fontList = [
        'Arial', 'Verdana', 'Helvetica', 'Times New Roman', 'Courier New',
        'Georgia', 'Palatino', 'Garamond', 'Bookman', 'Tahoma', 'Trebuchet MS'
      ];

      const d = document.createElement('div');
      d.style.visibility = 'hidden';
      d.style.position = 'absolute';
      d.innerHTML = 'abcdefghijklmnopqrstuvwxyz0123456789';
      document.body.appendChild(d);

      const detectedFonts = [];
      for (const font of fontList) {
        let matched = 0;
        for (const baseFont of baseFonts) {
          d.style.fontFamily = `'${font}',${baseFont}`;
          if (d.offsetWidth !== 0) {
            matched++;
          }
        }
        if (matched >= 2) {
          detectedFonts.push(font);
        }
      }

      document.body.removeChild(d);
      document.getElementById('fontResult').textContent =
        "检测到的字体：" + detectedFonts.join(', ');
    } catch (e) {
      document.getElementById('fontResult').textContent =
        "检测字体时出错：" + e.message;
    }
  });
</script>

<style>
  .test-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
  .test-section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
  }
  button {
    margin: 5px;
    padding: 8px 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  button:hover {
    background-color: #45a049;
  }
  #canvasResult,
  #webglResult,
  #audioResult,
  #fontResult {
    margin-top: 10px;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 4px;
  }
</style>