qidao123.com技术社区-IT企服评测·应用市场»论坛 › 数据库 › SQL-Server › 用HTML5实现及时ASCII艺术摄像头

用HTML5实现及时ASCII艺术摄像头

[复制链接]
发表于 2025-7-30 19:12:31 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

×
用HTML5实现及时ASCII艺术摄像头

项目简介

这是一个将摄像头画面及时转换为ASCII字符艺术的Web应用，基于HTML5和原生JavaScript实现。通过本项目可以学习到：


  • 欣赏器摄像头API的利用
  • Canvas图像处理技能
  • 及时视频流处理
  • 复杂DOM操作
  • 性能优化技巧
功能亮点

✨ 七大特色功能：

  • 多模式字符渲染：支持8种字符集，从经典ASCII到Emoji
  • 动态调色板：6种预设颜色方案+彩虹渐变结果
  • 专业级图像处理：亮度/对比度调节、含糊、噪点等特效
  • 分辨率控制：20-120级精致调节
  • 及时特效面板：5种视觉特效独立控制
  • 性能监控监控：及时表现FPS和分辨率
  • 数据恒久化：支持艺术作品的保存与分享
实现原理

1. 技能架构

   2. 核心算法

像素到ASCII的转换公式：
  1. def pixel_to_ascii(r, g, b, chars):
  2.     brightness = 0.299*r + 0.587*g + 0.114*b  # 感知亮度计算
  3.     index = int(brightness / 255 * (len(chars)-1))
  4.     return chars[index]
复制代码
彩虹色天生算法：
  1. function getRainbowColor(offset) {
  2.     const hue = (offset % 360) / 60;
  3.     const i = Math.floor(hue);
  4.     const f = hue - i;
  5.     const p = 0;
  6.     const q = 255 * (1 - f);
  7.     const t = 255 * f;
  8.    
  9.     const rgb = [
  10.         [255, t, p],
  11.         [q, 255, p],
  12.         [p, 255, t],
  13.         [p, q, 255],
  14.         [t, p, 255],
  15.         [255, p, q]
  16.     ][i % 6];
  17.    
  18.     return `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
  19. }
复制代码
关键代码剖析

1. 视频流处理

  1. // 获取摄像头访问权限
  2. navigator.mediaDevices.getUserMedia({ video: true })
  3.   .then(stream => {
  4.     const video = document.createElement('video');
  5.     video.srcObject = stream;
  6.     video.autoplay = true;
  7.    
  8.     // 创建双缓冲Canvas
  9.     const mainCanvas = document.createElement('canvas');
  10.     const tempCanvas = document.createElement('canvas');
  11.    
  12.     video.onplaying = () => {
  13.       // 设置动态分辨率
  14.       mainCanvas.width = config.width;
  15.       mainCanvas.height = config.height;
  16.       tempCanvas.width = config.width;
  17.       tempCanvas.height = config.height;
  18.       
  19.       // 启动渲染循环
  20.       requestAnimationFrame(renderFrame);
  21.     };
  22.   });
复制代码
2. 及时渲染引擎

  1. function renderFrame() {
  2.   // 镜像处理
  3.   if (config.mirror) {
  4.     ctx.save();
  5.     ctx.scale(-1, 1);
  6.     ctx.drawImage(video, -canvas.width, 0);
  7.     ctx.restore();
  8.   } else {
  9.     ctx.drawImage(video, 0, 0);
  10.   }
  11.   
  12.   // 应用图像处理管线
  13.   applyEffectsPipeline();
  14.   
  15.   // 转换ASCII字符
  16.   const imgData = ctx.getImageData(0, 0, width, height);
  17.   let asciiArt = generateAscii(imgData);
  18.   
  19.   // 动态颜色处理
  20.   if (config.color === 'rainbow') {
  21.     asciiArt = applyRainbowEffect(asciiArt);
  22.   }
  23.   
  24.   // DOM更新
  25.   asciiDisplay.textContent = asciiArt;
  26. }
复制代码
3. 特效系统计划

  1. class EffectPipeline {
  2.   constructor() {
  3.     this.effects = [];
  4.   }
  6.   addEffect(effect) {
  7.     this.effects.push(effect);
  8.   }
  10.   process(imageData) {
  11.     return this.effects.reduce((data, effect) => {
  12.       return effect.apply(data);
  13.     }, imageData);
  14.   }
  15. }
  17. // 示例噪点特效
  18. class NoiseEffect {
  19.   constructor(intensity) {
  20.     this.intensity = intensity;
  21.   }
  23.   apply(imageData) {
  24.     const data = new Uint8Array(imageData.data);
  25.     for (let i = 0; i < data.length; i += 4) {
  26.       const noise = Math.random() * this.intensity * 255;
  27.       data[i] += noise;    // R
  28.       data[i+1] += noise;  // G
  29.       data[i+2] += noise;  // B
  30.     }
  31.     return imageData;
  32.   }
  33. }
复制代码
参数调节发起：
场景推荐设置人脸识别高分辨率 + 标准字符集艺术创作低分辨率 + 月亮字符集 + 高噪点动态捕获中分辨率 + 二进制字符 + 高对比度性能优化


  • 双缓冲技能：利用临时Canvas避免直接修改源数据
  • 节流渲染：根据FPS主动调整革新频率
  • Web Worker：将图像处理逻辑移至后台线程
  • 内存复用：重复利用ImageData对象
  • 惰性盘算：仅在参数变革时重新天生字符映射表
扩展方向

🚀 二次开发发起：


  • 添加视频滤镜系统
  • 集成语音控制功能
  • 实现WebSocket多人共享视图
  • 开发Chrome扩展版本
  • 添加AR标志识别功能
完备代码实现：
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>终极ASCII艺术摄像头</title>
  7.     <style>
  8.         :root {
  9.             --primary-color: #0f0;
  10.             --bg-color: #121212;
  11.             --control-bg: #222;
  12.         }
  13.         
  14.         body {
  15.             background-color: var(--bg-color);
  16.             color: var(--primary-color);
  17.             font-family: 'Courier New', monospace;
  18.             display: flex;
  19.             flex-direction: column;
  20.             justify-content: center;
  21.             align-items: center;
  22.             min-height: 100vh;
  23.             margin: 0;
  24.             overflow-x: hidden;
  25.             transition: all 0.3s;
  26.         }
  27.         
  28.         header {
  29.             text-align: center;
  30.             margin-bottom: 20px;
  31.             width: 100%;
  32.         }
  33.         
  34.         h1 {
  35.             font-size: 2.5rem;
  36.             margin: 0;
  37.             text-shadow: 0 0 10px currentColor;
  38.             letter-spacing: 3px;
  39.         }
  40.         
  41.         .subtitle {
  42.             font-size: 0.9rem;
  43.             opacity: 0.7;
  44.             margin-top: 5px;
  45.         }
  46.         
  47.         #asciiContainer {
  48.             position: relative;
  49.             margin: 20px 0;
  50.             border: 1px solid var(--primary-color);
  51.             box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
  52.             max-width: 90vw;
  53.             overflow: auto;
  54.         }
  55.         
  56.         #asciiCam {
  57.             font-size: 10px;
  58.             line-height: 10px;
  59.             white-space: pre;
  60.             letter-spacing: 2px;
  61.             text-shadow: 0 0 5px currentColor;
  62.             margin: 0;
  63.             padding: 10px;
  64.             transition: all 0.3s;
  65.         }
  66.         
  67.         .controls {
  68.             display: flex;
  69.             flex-wrap: wrap;
  70.             justify-content: center;
  71.             gap: 15px;
  72.             margin: 20px 0;
  73.             padding: 15px;
  74.             background: var(--control-bg);
  75.             border-radius: 8px;
  76.             max-width: 90vw;
  77.         }
  78.         
  79.         .control-group {
  80.             display: flex;
  81.             flex-direction: column;
  82.             min-width: 150px;
  83.         }
  84.         
  85.         .control-group label {
  86.             margin-bottom: 5px;
  87.             font-size: 0.9rem;
  88.         }
  89.         
  90.         select, button, input {
  91.             background: var(--control-bg);
  92.             color: var(--primary-color);
  93.             border: 1px solid var(--primary-color);
  94.             padding: 8px 12px;
  95.             font-family: inherit;
  96.             border-radius: 4px;
  97.             transition: all 0.3s;
  98.         }
  99.         
  100.         select {
  101.             cursor: pointer;
  102.         }
  103.         
  104.         button {
  105.             cursor: pointer;
  106.             min-width: 100px;
  107.         }
  108.         
  109.         button:hover, select:hover {
  110.             background: var(--primary-color);
  111.             color: #000;
  112.         }
  113.         
  114.         input[type="range"] {
  115.             -webkit-appearance: none;
  116.             height: 5px;
  117.             background: var(--control-bg);
  118.             margin-top: 10px;
  119.         }
  120.         
  121.         input[type="range"]::-webkit-slider-thumb {
  122.             -webkit-appearance: none;
  123.             width: 15px;
  124.             height: 15px;
  125.             background: var(--primary-color);
  126.             border-radius: 50%;
  127.             cursor: pointer;
  128.         }
  129.         
  130.         .stats {
  131.             position: absolute;
  132.             top: 10px;
  133.             right: 10px;
  134.             background: rgba(0, 0, 0, 0.7);
  135.             padding: 5px 10px;
  136.             border-radius: 4px;
  137.             font-size: 0.8rem;
  138.         }
  139.         
  140.         .fullscreen-btn {
  141.             position: absolute;
  142.             top: 10px;
  143.             left: 10px;
  144.             background: rgba(0, 0, 0, 0.7);
  145.             border: none;
  146.             width: 30px;
  147.             height: 30px;
  148.             display: flex;
  149.             align-items: center;
  150.             justify-content: center;
  151.             cursor: pointer;
  152.             border-radius: 4px;
  153.             font-size: 16px;
  154.         }
  155.         
  156.         .effects-panel {
  157.             display: none;
  158.             position: fixed;
  159.             top: 50%;
  160.             left: 50%;
  161.             transform: translate(-50%, -50%);
  162.             background: var(--control-bg);
  163.             padding: 20px;
  164.             border-radius: 8px;
  165.             z-index: 100;
  166.             box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  167.             max-width: 80vw;
  168.         }
  169.         
  170.         .effects-panel.active {
  171.             display: block;
  172.         }
  173.         
  174.         .close-panel {
  175.             position: absolute;
  176.             top: 10px;
  177.             right: 10px;
  178.             background: none;
  179.             border: none;
  180.             color: var(--primary-color);
  181.             font-size: 20px;
  182.             cursor: pointer;
  183.         }
  184.         
  185.         .effect-option {
  186.             margin: 10px 0;
  187.         }
  188.         
  189.         .save-btn {
  190.             background: #4CAF50;
  191.             color: white;
  192.             margin-top: 10px;
  193.         }
  194.         
  195.         footer {
  196.             margin-top: 20px;
  197.             font-size: 0.8rem;
  198.             opacity: 0.7;
  199.             text-align: center;
  200.         }
  201.         
  202.         @media (max-width: 768px) {
  203.             .controls {
  204.                 flex-direction: column;
  205.                 align-items: center;
  206.             }
  207.             
  208.             h1 {
  209.                 font-size: 1.8rem;
  210.             }
  211.         }
  212.     </style>
  213. </head>
  214. <body>
  215.     <header>
  216.         <h1>终极ASCII艺术摄像头</h1>
  217.         <div class="subtitle">实时视频转ASCII艺术 - 高级版</div>
  218.     </header>
  219.    
  220.     <div id="asciiContainer">
  221.         <button class="fullscreen-btn" id="fullscreenBtn">⛶</button>
  222.         <div class="stats" id="stats">
  223.             FPS: 0 | 分辨率: 0x0
  224.         </div>
  225.         <pre id="asciiCam">正在初始化摄像头...</pre>
  226.     </div>
  227.    
  228.     <div class="controls">
  229.         <div class="control-group">
  230.             <label for="charSet">字符集</label>
  231.             <select id="charSet">
  232.                 <option value="@%#*+=-:. ">标准</option>
  233.                 <option value="01">二进制</option>
  234.                 <option value="█▓▒░ ">方块</option>
  235.                 <option value="♠♥♦♣♤♡♢♧">扑克</option>
  236.                 <option value="☯☮✝☪✡☸✠">符号</option>
  237.                 <option value="🌑🌒🌓🌔🌕🌖🌗🌘">月亮</option>
  238.                 <option value="▁▂▃▄▅▆▇█">柱状</option>
  239.                 <option value="🟥🟧🟨🟩🟦🟪">彩色块</option>
  240.             </select>
  241.         </div>
  242.         
  243.         <div class="control-group">
  244.             <label for="colorScheme">颜色主题</label>
  245.             <select id="colorScheme">
  246.                 <option value="#0f0">矩阵绿</option>
  247.                 <option value="#f00">霓虹红</option>
  248.                 <option value="#0ff">赛博蓝</option>
  249.                 <option value="#ff0">荧光黄</option>
  250.                 <option value="#f0f">粉紫</option>
  251.                 <option value="#fff">纯白</option>
  252.                 <option value="rainbow">彩虹</option>
  253.             </select>
  254.         </div>
  255.         
  256.         <div class="control-group">
  257.             <label for="resolution">分辨率</label>
  258.             <input type="range" id="resolution" min="20" max="120" value="60">
  259.             <div id="resolutionValue">60</div>
  260.         </div>
  261.         
  262.         <div class="control-group">
  263.             <label for="brightness">亮度</label>
  264.             <input type="range" id="brightness" min="0" max="200" value="100">
  265.             <div id="brightnessValue">100%</div>
  266.         </div>
  267.         
  268.         <div class="control-group">
  269.             <label for="contrast">对比度</label>
  270.             <input type="range" id="contrast" min="0" max="200" value="100">
  271.             <div id="contrastValue">100%</div>
  272.         </div>
  273.         
  274.         <button id="invertBtn">反色</button>
  275.         <button id="mirrorBtn">镜像</button>
  276.         <button id="pauseBtn">暂停</button>
  277.         <button id="effectsBtn">特效</button>
  278.         <button id="saveBtn" class="save-btn">保存</button>
  279.     </div>
  280.    
  281.     <div class="effects-panel" id="effectsPanel">
  282.         <button class="close-panel" id="closePanel">×</button>
  283.         <h2>特效设置</h2>
  284.         
  285.         <div class="effect-option">
  286.             <label for="effectBlur">模糊效果</label>
  287.             <input type="range" id="effectBlur" min="0" max="10" value="0">
  288.             <div id="effectBlurValue">0</div>
  289.         </div>
  290.         
  291.         <div class="effect-option">
  292.             <label for="effectNoise">噪点强度</label>
  293.             <input type="range" id="effectNoise" min="0" max="100" value="0">
  294.             <div id="effectNoiseValue">0%</div>
  295.         </div>
  296.         
  297.         <div class="effect-option">
  298.             <label for="effectScanlines">扫描线</label>
  299.             <input type="range" id="effectScanlines" min="0" max="100" value="0">
  300.             <div id="effectScanlinesValue">0%</div>
  301.         </div>
  302.         
  303.         <div class="effect-option">
  304.             <label for="effectGlitch">故障效果</label>
  305.             <input type="range" id="effectGlitch" min="0" max="100" value="0">
  306.             <div id="effectGlitchValue">0%</div>
  307.         </div>
  308.         
  309.         <div class="effect-option">
  310.             <label for="effectPixelate">像素化</label>
  311.             <input type="range" id="effectPixelate" min="0" max="100" value="0">
  312.             <div id="effectPixelateValue">0%</div>
  313.         </div>
  314.         
  315.         <button id="applyEffects" class="save-btn">应用特效</button>
  316.     </div>
  317.    
  318.     <footer>
  319.         ASCII艺术摄像头 v2.0 | 使用HTML5和JavaScript构建
  320.     </footer>
  322.     <script>
  323.         // 配置对象
  324.         const config = {
  325.             chars: '@%#*+=-:. ',
  326.             color: '#0f0',
  327.             width: 60,
  328.             height: 40,
  329.             invert: false,
  330.             mirror: true,
  331.             paused: false,
  332.             brightness: 100,
  333.             contrast: 100,
  334.             effects: {
  335.                 blur: 0,
  336.                 noise: 0,
  337.                 scanlines: 0,
  338.                 glitch: 0,
  339.                 pixelate: 0
  340.             },
  341.             lastTime: 0,
  342.             frameCount: 0,
  343.             fps: 0,
  344.             rainbowOffset: 0
  345.         };
  346.         
  347.         // DOM元素
  348.         const elements = {
  349.             asciiCam: document.getElementById('asciiCam'),
  350.             asciiContainer: document.getElementById('asciiContainer'),
  351.             stats: document.getElementById('stats'),
  352.             fullscreenBtn: document.getElementById('fullscreenBtn'),
  353.             charSet: document.getElementById('charSet'),
  354.             colorScheme: document.getElementById('colorScheme'),
  355.             resolution: document.getElementById('resolution'),
  356.             resolutionValue: document.getElementById('resolutionValue'),
  357.             brightness: document.getElementById('brightness'),
  358.             brightnessValue: document.getElementById('brightnessValue'),
  359.             contrast: document.getElementById('contrast'),
  360.             contrastValue: document.getElementById('contrastValue'),
  361.             invertBtn: document.getElementById('invertBtn'),
  362.             mirrorBtn: document.getElementById('mirrorBtn'),
  363.             pauseBtn: document.getElementById('pauseBtn'),
  364.             effectsBtn: document.getElementById('effectsBtn'),
  365.             saveBtn: document.getElementById('saveBtn'),
  366.             effectsPanel: document.getElementById('effectsPanel'),
  367.             closePanel: document.getElementById('closePanel'),
  368.             effectBlur: document.getElementById('effectBlur'),
  369.             effectBlurValue: document.getElementById('effectBlurValue'),
  370.             effectNoise: document.getElementById('effectNoise'),
  371.             effectNoiseValue: document.getElementById('effectNoiseValue'),
  372.             effectScanlines: document.getElementById('effectScanlines'),
  373.             effectScanlinesValue: document.getElementById('effectScanlinesValue'),
  374.             effectGlitch: document.getElementById('effectGlitch'),
  375.             effectGlitchValue: document.getElementById('effectGlitchValue'),
  376.             effectPixelate: document.getElementById('effectPixelate'),
  377.             effectPixelateValue: document.getElementById('effectPixelateValue'),
  378.             applyEffects: document.getElementById('applyEffects')
  379.         };
  380.         
  381.         // 视频和画布元素
  382.         let video;
  383.         let canvas;
  384.         let ctx;
  385.         let tempCanvas;
  386.         let tempCtx;
  387.         let animationId;
  388.         
  389.         // 初始化函数
  390.         function init() {
  391.             setupEventListeners();
  392.             initCamera();
  393.         }
  394.         
  395.         // 设置事件监听器
  396.         function setupEventListeners() {
  397.             // 控制面板事件
  398.             elements.charSet.addEventListener('change', () => {
  399.                 config.chars = elements.charSet.value;
  400.             });
  401.             
  402.             elements.colorScheme.addEventListener('change', () => {
  403.                 config.color = elements.colorScheme.value;
  404.                 updateColorScheme();
  405.             });
  406.             
  407.             elements.resolution.addEventListener('input', () => {
  408.                 const value = elements.resolution.value;
  409.                 elements.resolutionValue.textContent = value;
  410.                 config.width = value * 1.5;
  411.                 config.height = value;
  412.             });
  413.             
  414.             elements.brightness.addEventListener('input', () => {
  415.                 const value = elements.brightness.value;
  416.                 elements.brightnessValue.textContent = `${value}%`;
  417.                 config.brightness = value;
  418.             });
  419.             
  420.             elements.contrast.addEventListener('input', () => {
  421.                 const value = elements.contrast.value;
  422.                 elements.contrastValue.textContent = `${value}%`;
  423.                 config.contrast = value;
  424.             });
  425.             
  426.             elements.invertBtn.addEventListener('click', () => {
  427.                 config.invert = !config.invert;
  428.                 elements.invertBtn.textContent = config.invert ? '正常' : '反色';
  429.             });
  430.             
  431.             elements.mirrorBtn.addEventListener('click', () => {
  432.                 config.mirror = !config.mirror;
  433.                 elements.mirrorBtn.textContent = config.mirror ? '镜像' : '原始';
  434.             });
  435.             
  436.             elements.pauseBtn.addEventListener('click', () => {
  437.                 config.paused = !config.paused;
  438.                 elements.pauseBtn.textContent = config.paused ? '继续' : '暂停';
  439.             });
  440.             
  441.             elements.effectsBtn.addEventListener('click', () => {
  442.                 elements.effectsPanel.classList.add('active');
  443.             });
  444.             
  445.             elements.closePanel.addEventListener('click', () => {
  446.                 elements.effectsPanel.classList.remove('active');
  447.             });
  448.             
  449.             elements.applyEffects.addEventListener('click', () => {
  450.                 elements.effectsPanel.classList.remove('active');
  451.             });
  452.             
  453.             // 特效控制
  454.             elements.effectBlur.addEventListener('input', () => {
  455.                 const value = elements.effectBlur.value;
  456.                 elements.effectBlurValue.textContent = value;
  457.                 config.effects.blur = value;
  458.             });
  459.             
  460.             elements.effectNoise.addEventListener('input', () => {
  461.                 const value = elements.effectNoise.value;
  462.                 elements.effectNoiseValue.textContent = `${value}%`;
  463.                 config.effects.noise = value;
  464.             });
  465.             
  466.             elements.effectScanlines.addEventListener('input', () => {
  467.                 const value = elements.effectScanlines.value;
  468.                 elements.effectScanlinesValue.textContent = `${value}%`;
  469.                 config.effects.scanlines = value;
  470.             });
  471.             
  472.             elements.effectGlitch.addEventListener('input', () => {
  473.                 const value = elements.effectGlitch.value;
  474.                 elements.effectGlitchValue.textContent = `${value}%`;
  475.                 config.effects.glitch = value;
  476.             });
  477.             
  478.             elements.effectPixelate.addEventListener('input', () => {
  479.                 const value = elements.effectPixelate.value;
  480.                 elements.effectPixelateValue.textContent = `${value}%`;
  481.                 config.effects.pixelate = value;
  482.             });
  483.             
  484.             // 全屏按钮
  485.             elements.fullscreenBtn.addEventListener('click', toggleFullscreen);
  486.             
  487.             // 保存按钮
  488.             elements.saveBtn.addEventListener('click', saveAsciiArt);
  489.         }
  490.         
  491.         // 初始化摄像头
  492.         function initCamera() {
  493.             navigator.mediaDevices.getUserMedia({ video: true })
  494.                 .then(stream => {
  495.                     video = document.createElement('video');
  496.                     video.srcObject = stream;
  497.                     video.autoplay = true;
  498.                     
  499.                     // 创建主画布
  500.                     canvas = document.createElement('canvas');
  501.                     ctx = canvas.getContext('2d');
  502.                     
  503.                     // 创建临时画布用于特效处理
  504.                     tempCanvas = document.createElement('canvas');
  505.                     tempCtx = tempCanvas.getContext('2d');
  506.                     
  507.                     video.onplaying = startRendering;
  508.                 })
  509.                 .catch(err => {
  510.                     elements.asciiCam.textContent = `错误: ${err.message}\n请确保已授予摄像头权限`;
  511.                     console.error('摄像头错误:', err);
  512.                 });
  513.         }
  514.         
  515.         // 开始渲染
  516.         function startRendering() {
  517.             updateResolution();
  518.             animate();
  519.         }
  520.         
  521.         // 动画循环
  522.         function animate() {
  523.             const now = performance.now();
  524.             config.frameCount++;
  525.             
  526.             // 更新FPS计数
  527.             if (now - config.lastTime >= 1000) {
  528.                 config.fps = config.frameCount;
  529.                 elements.stats.textContent = `FPS: ${config.fps} | 分辨率: ${config.width}x${config.height}`;
  530.                 config.frameCount = 0;
  531.                 config.lastTime = now;
  532.             }
  533.             
  534.             // 彩虹效果偏移
  535.             if (config.color === 'rainbow') {
  536.                 config.rainbowOffset = (config.rainbowOffset + 1) % 360;
  537.             }
  538.             
  539.             if (!config.paused) {
  540.                 renderFrame();
  541.             }
  542.             
  543.             animationId = requestAnimationFrame(animate);
  544.         }
  545.         
  546.         // 渲染帧
  547.         function renderFrame() {
  548.             // 设置画布尺寸
  549.             canvas.width = config.width;
  550.             canvas.height = config.height;
  551.             tempCanvas.width = canvas.width;
  552.             tempCanvas.height = canvas.height;
  553.             
  554.             // 绘制原始视频帧
  555.             if (config.mirror) {
  556.                 ctx.save();
  557.                 ctx.scale(-1, 1);
  558.                 ctx.drawImage(video, -canvas.width, 0, canvas.width, canvas.height);
  559.                 ctx.restore();
  560.             } else {
  561.                 ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  562.             }
  563.             
  564.             // 应用图像处理效果
  565.             applyImageEffects();
  566.             
  567.             // 获取像素数据
  568.             const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
  569.             let ascii = '';
  570.             
  571.             // 转换为ASCII
  572.             for (let y = 0; y < canvas.height; y++) {
  573.                 for (let x = 0; x < canvas.width; x++) {
  574.                     const i = (y * canvas.width + x) * 4;
  575.                     const r = imgData[i];
  576.                     const g = imgData[i + 1];
  577.                     const b = imgData[i + 2];
  578.                     
  579.                     // 计算亮度 (使用感知亮度公式)
  580.                     let brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
  581.                     
  582.                     // 应用对比度
  583.                     brightness = ((brightness - 0.5) * (config.contrast / 100)) + 0.5;
  584.                     
  585.                     // 应用亮度
  586.                     brightness = brightness * (config.brightness / 100);
  587.                     
  588.                     // 限制在0-1范围内
  589.                     brightness = Math.max(0, Math.min(1, brightness));
  590.                     
  591.                     // 根据亮度选择字符
  592.                     let charIndex = Math.floor(brightness * (config.chars.length - 1));
  593.                     if (config.invert) {
  594.                         charIndex = config.chars.length - 1 - charIndex;
  595.                     }
  596.                     
  597.                     // 确保索引在有效范围内
  598.                     charIndex = Math.max(0, Math.min(config.chars.length - 1, charIndex));
  599.                     
  600.                     ascii += config.chars[charIndex];
  601.                 }
  602.                 ascii += '\n';
  603.             }
  604.             
  605.             // 更新显示
  606.             elements.asciiCam.textContent = ascii;
  607.         }
  608.         
  609.         // 应用图像处理效果
  610.         function applyImageEffects() {
  611.             // 复制原始图像到临时画布
  612.             tempCtx.drawImage(canvas, 0, 0);
  613.             
  614.             // 应用模糊效果
  615.             if (config.effects.blur > 0) {
  616.                 ctx.filter = `blur(${config.effects.blur}px)`;
  617.                 ctx.drawImage(tempCanvas, 0, 0);
  618.                 ctx.filter = 'none';
  619.             }
  620.             
  621.             // 应用噪点效果
  622.             if (config.effects.noise > 0) {
  623.                 const noiseData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  624.                 const data = noiseData.data;
  625.                 const intensity = config.effects.noise / 100;
  626.                
  627.                 for (let i = 0; i < data.length; i += 4) {
  628.                     const noise = (Math.random() - 0.5) * 255 * intensity;
  629.                     data[i] += noise;     // R
  630.                     data[i + 1] += noise; // G
  631.                     data[i + 2] += noise; // B
  632.                 }
  633.                
  634.                 ctx.putImageData(noiseData, 0, 0);
  635.             }
  636.             
  637.             // 应用扫描线效果
  638.             if (config.effects.scanlines > 0) {
  639.                 const intensity = config.effects.scanlines / 100;
  640.                
  641.                 for (let y = 0; y < canvas.height; y += 2) {
  642.                     ctx.fillStyle = `rgba(0, 0, 0, ${intensity})`;
  643.                     ctx.fillRect(0, y, canvas.width, 1);
  644.                 }
  645.             }
  646.             
  647.             // 应用故障效果
  648.             if (config.effects.glitch > 0 && Math.random() < config.effects.glitch / 100) {
  649.                 const glitchAmount = Math.floor(Math.random() * 10 * (config.effects.glitch / 100));
  650.                 const glitchData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  651.                 const tempData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  652.                
  653.                 // 水平偏移
  654.                 for (let y = 0; y < canvas.height; y++) {
  655.                     const offset = Math.floor(Math.random() * glitchAmount * 2) - glitchAmount;
  656.                     if (offset !== 0) {
  657.                         for (let x = 0; x < canvas.width; x++) {
  658.                             const srcX = Math.max(0, Math.min(canvas.width - 1, x + offset));
  659.                             const srcPos = (y * canvas.width + srcX) * 4;
  660.                             const dstPos = (y * canvas.width + x) * 4;
  661.                            
  662.                             tempData.data[dstPos] = glitchData.data[srcPos];
  663.                             tempData.data[dstPos + 1] = glitchData.data[srcPos + 1];
  664.                             tempData.data[dstPos + 2] = glitchData.data[srcPos + 2];
  665.                         }
  666.                     }
  667.                 }
  668.                
  669.                 ctx.putImageData(tempData, 0, 0);
  670.             }
  671.             
  672.             // 应用像素化效果
  673.             if (config.effects.pixelate > 0) {
  674.                 const size = Math.max(1, Math.floor(config.effects.pixelate / 10));
  675.                
  676.                 if (size > 1) {
  677.                     const smallWidth = Math.floor(canvas.width / size);
  678.                     const smallHeight = Math.floor(canvas.height / size);
  679.                     
  680.                     tempCtx.drawImage(canvas, 0, 0, smallWidth, smallHeight);
  681.                     ctx.imageSmoothingEnabled = false;
  682.                     ctx.drawImage(tempCanvas, 0, 0, smallWidth, smallHeight, 0, 0, canvas.width, canvas.height);
  683.                     ctx.imageSmoothingEnabled = true;
  684.                 }
  685.             }
  686.         }
  687.         
  688.         // 更新分辨率
  689.         function updateResolution() {
  690.             const value = elements.resolution.value;
  691.             elements.resolutionValue.textContent = value;
  692.             config.width = value * 1.5;
  693.             config.height = value;
  694.         }
  695.         
  696.         // 更新颜色方案
  697.         function updateColorScheme() {
  698.             if (config.color === 'rainbow') {
  699.                 // 彩虹色不需要更新样式，因为它在动画循环中处理
  700.                 return;
  701.             }
  702.             
  703.             document.documentElement.style.setProperty('--primary-color', config.color);
  704.             elements.asciiCam.style.color = config.color;
  705.         }
  706.         
  707.         // 切换全屏
  708.         function toggleFullscreen() {
  709.             if (!document.fullscreenElement) {
  710.                 elements.asciiContainer.requestFullscreen().catch(err => {
  711.                     console.error('全屏错误:', err);
  712.                 });
  713.             } else {
  714.                 document.exitFullscreen();
  715.             }
  716.         }
  717.         
  718.         // 保存ASCII艺术
  719.         function saveAsciiArt() {
  720.             const blob = new Blob([elements.asciiCam.textContent], { type: 'text/plain' });
  721.             const url = URL.createObjectURL(blob);
  722.             const a = document.createElement('a');
  723.             a.href = url;
  724.             a.download = `ascii-art-${new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-')}.txt`;
  725.             document.body.appendChild(a);
  726.             a.click();
  727.             document.body.removeChild(a);
  728.             URL.revokeObjectURL(url);
  729.         }
  730.         
  731.         // 启动应用
  732.         init();
  733.         
  734.         // 清理资源
  735.         window.addEventListener('beforeunload', () => {
  736.             if (animationId) cancelAnimationFrame(animationId);
  737.             if (video && video.srcObject) {
  738.                 video.srcObject.getTracks().forEach(track => track.stop());
  739.             }
  740.         });
  741.     </script>
  742. </body>
  743. </html>
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
继续阅读请点击广告
回复

使用道具 举报

返回列表

钜形不锈钢水箱
+ 我要发帖
×
登录参与点评抽奖，加入IT实名职场社区
去登录
快速回复 返回顶部 返回列表