当前位置： 首页 > article >正文

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

article 2025/6/8 10:16:10

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

项目简介

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

  • 浏览器摄像头API的使用
  • Canvas图像处理技术
  • 实时视频流处理
  • 复杂DOM操作
  • 性能优化技巧

功能亮点

✨ 七大特色功能：

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

实现原理

1. 技术架构
摄像头视频流
Canvas图像捕获
图像处理管道
亮度/对比度调整
特效叠加
ASCII转换
DOM实时渲染
交互控制面板

2. 核心算法

像素到ASCII的转换公式：

def pixel_to_ascii(r, g, b, chars):brightness = 0.299*r + 0.587*g + 0.114*b  # 感知亮度计算index = int(brightness / 255 * (len(chars)-1)) return chars[index]

彩虹色生成算法：

function getRainbowColor(offset) {const hue = (offset % 360) / 60;const i = Math.floor(hue);const f = hue - i;const p = 0;const q = 255 * (1 - f);const t = 255 * f;const rgb = [[255, t, p],[q, 255, p],[p, 255, t],[p, q, 255],[t, p, 255],[255, p, q]][i % 6];return `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
}

关键代码解析

1. 视频流处理

// 获取摄像头访问权限
navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {const video = document.createElement('video');video.srcObject = stream;video.autoplay = true;// 创建双缓冲Canvasconst mainCanvas = document.createElement('canvas');const tempCanvas = document.createElement('canvas');video.onplaying = () => {// 设置动态分辨率mainCanvas.width = config.width;mainCanvas.height = config.height;tempCanvas.width = config.width;tempCanvas.height = config.height;// 启动渲染循环requestAnimationFrame(renderFrame);};});

2. 实时渲染引擎

function renderFrame() {// 镜像处理if (config.mirror) {ctx.save();ctx.scale(-1, 1);ctx.drawImage(video, -canvas.width, 0);ctx.restore();} else {ctx.drawImage(video, 0, 0);}// 应用图像处理管线applyEffectsPipeline();// 转换ASCII字符const imgData = ctx.getImageData(0, 0, width, height);let asciiArt = generateAscii(imgData);// 动态颜色处理if (config.color === 'rainbow') {asciiArt = applyRainbowEffect(asciiArt);}// DOM更新asciiDisplay.textContent = asciiArt;
}

3. 特效系统设计

class EffectPipeline {constructor() {this.effects = [];}addEffect(effect) {this.effects.push(effect);}process(imageData) {return this.effects.reduce((data, effect) => {return effect.apply(data);}, imageData);}
}// 示例噪点特效
class NoiseEffect {constructor(intensity) {this.intensity = intensity;}apply(imageData) {const data = new Uint8Array(imageData.data);for (let i = 0; i < data.length; i += 4) {const noise = Math.random() * this.intensity * 255;data[i] += noise;    // Rdata[i+1] += noise;  // Gdata[i+2] += noise;  // B}return imageData;}
}

参数调节建议：

场景推荐设置
人脸识别高分辨率 + 标准字符集
艺术创作低分辨率 + 月亮字符集 + 高噪点
动态捕捉中分辨率 + 二进制字符 + 高对比度

性能优化

  1. 双缓冲技术：使用临时Canvas避免直接修改源数据
  2. 节流渲染：根据FPS自动调整刷新频率
  3. Web Worker：将图像处理逻辑移至后台线程
  4. 内存复用：重复使用ImageData对象
  5. 惰性计算：仅在参数变化时重新生成字符映射表

扩展方向

🚀 二次开发建议：

  • 添加视频滤镜系统
  • 集成语音控制功能
  • 实现WebSocket多人共享视图
  • 开发Chrome扩展版本
  • 添加AR标记识别功能

完整代码实现：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>终极ASCII艺术摄像头</title><style>:root {--primary-color: #0f0;--bg-color: #121212;--control-bg: #222;}body {background-color: var(--bg-color);color: var(--primary-color);font-family: 'Courier New', monospace;display: flex;flex-direction: column;justify-content: center;align-items: center;min-height: 100vh;margin: 0;overflow-x: hidden;transition: all 0.3s;}header {text-align: center;margin-bottom: 20px;width: 100%;}h1 {font-size: 2.5rem;margin: 0;text-shadow: 0 0 10px currentColor;letter-spacing: 3px;}.subtitle {font-size: 0.9rem;opacity: 0.7;margin-top: 5px;}#asciiContainer {position: relative;margin: 20px 0;border: 1px solid var(--primary-color);box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);max-width: 90vw;overflow: auto;}#asciiCam {font-size: 10px;line-height: 10px;white-space: pre;letter-spacing: 2px;text-shadow: 0 0 5px currentColor;margin: 0;padding: 10px;transition: all 0.3s;}.controls {display: flex;flex-wrap: wrap;justify-content: center;gap: 15px;margin: 20px 0;padding: 15px;background: var(--control-bg);border-radius: 8px;max-width: 90vw;}.control-group {display: flex;flex-direction: column;min-width: 150px;}.control-group label {margin-bottom: 5px;font-size: 0.9rem;}select, button, input {background: var(--control-bg);color: var(--primary-color);border: 1px solid var(--primary-color);padding: 8px 12px;font-family: inherit;border-radius: 4px;transition: all 0.3s;}select {cursor: pointer;}button {cursor: pointer;min-width: 100px;}button:hover, select:hover {background: var(--primary-color);color: #000;}input[type="range"] {-webkit-appearance: none;height: 5px;background: var(--control-bg);margin-top: 10px;}input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none;width: 15px;height: 15px;background: var(--primary-color);border-radius: 50%;cursor: pointer;}.stats {position: absolute;top: 10px;right: 10px;background: rgba(0, 0, 0, 0.7);padding: 5px 10px;border-radius: 4px;font-size: 0.8rem;}.fullscreen-btn {position: absolute;top: 10px;left: 10px;background: rgba(0, 0, 0, 0.7);border: none;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;cursor: pointer;border-radius: 4px;font-size: 16px;}.effects-panel {display: none;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background: var(--control-bg);padding: 20px;border-radius: 8px;z-index: 100;box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);max-width: 80vw;}.effects-panel.active {display: block;}.close-panel {position: absolute;top: 10px;right: 10px;background: none;border: none;color: var(--primary-color);font-size: 20px;cursor: pointer;}.effect-option {margin: 10px 0;}.save-btn {background: #4CAF50;color: white;margin-top: 10px;}footer {margin-top: 20px;font-size: 0.8rem;opacity: 0.7;text-align: center;}@media (max-width: 768px) {.controls {flex-direction: column;align-items: center;}h1 {font-size: 1.8rem;}}</style>
</head>
<body><header><h1>终极ASCII艺术摄像头</h1><div class="subtitle">实时视频转ASCII艺术 - 高级版</div></header><div id="asciiContainer"><button class="fullscreen-btn" id="fullscreenBtn">⛶</button><div class="stats" id="stats">FPS: 0 | 分辨率: 0x0</div><pre id="asciiCam">正在初始化摄像头...</pre></div><div class="controls"><div class="control-group"><label for="charSet">字符集</label><select id="charSet"><option value="@%#*+=-:. ">标准</option><option value="01">二进制</option><option value="█▓▒░ ">方块</option><option value="♠♥♦♣♤♡♢♧">扑克</option><option value="☯☮✝☪✡☸✠">符号</option><option value="🌑🌒🌓🌔🌕🌖🌗🌘">月亮</option><option value="▁▂▃▄▅▆▇█">柱状</option><option value="🟥🟧🟨🟩🟦🟪">彩色块</option></select></div><div class="control-group"><label for="colorScheme">颜色主题</label><select id="colorScheme"><option value="#0f0">矩阵绿</option><option value="#f00">霓虹红</option><option value="#0ff">赛博蓝</option><option value="#ff0">荧光黄</option><option value="#f0f">粉紫</option><option value="#fff">纯白</option><option value="rainbow">彩虹</option></select></div><div class="control-group"><label for="resolution">分辨率</label><input type="range" id="resolution" min="20" max="120" value="60"><div id="resolutionValue">60</div></div><div class="control-group"><label for="brightness">亮度</label><input type="range" id="brightness" min="0" max="200" value="100"><div id="brightnessValue">100%</div></div><div class="control-group"><label for="contrast">对比度</label><input type="range" id="contrast" min="0" max="200" value="100"><div id="contrastValue">100%</div></div><button id="invertBtn">反色</button><button id="mirrorBtn">镜像</button><button id="pauseBtn">暂停</button><button id="effectsBtn">特效</button><button id="saveBtn" class="save-btn">保存</button></div><div class="effects-panel" id="effectsPanel"><button class="close-panel" id="closePanel">×</button><h2>特效设置</h2><div class="effect-option"><label for="effectBlur">模糊效果</label><input type="range" id="effectBlur" min="0" max="10" value="0"><div id="effectBlurValue">0</div></div><div class="effect-option"><label for="effectNoise">噪点强度</label><input type="range" id="effectNoise" min="0" max="100" value="0"><div id="effectNoiseValue">0%</div></div><div class="effect-option"><label for="effectScanlines">扫描线</label><input type="range" id="effectScanlines" min="0" max="100" value="0"><div id="effectScanlinesValue">0%</div></div><div class="effect-option"><label for="effectGlitch">故障效果</label><input type="range" id="effectGlitch" min="0" max="100" value="0"><div id="effectGlitchValue">0%</div></div><div class="effect-option"><label for="effectPixelate">像素化</label><input type="range" id="effectPixelate" min="0" max="100" value="0"><div id="effectPixelateValue">0%</div></div><button id="applyEffects" class="save-btn">应用特效</button></div><footer>ASCII艺术摄像头 v2.0 | 使用HTML5和JavaScript构建</footer><script>// 配置对象const config = {chars: '@%#*+=-:. ',color: '#0f0',width: 60,height: 40,invert: false,mirror: true,paused: false,brightness: 100,contrast: 100,effects: {blur: 0,noise: 0,scanlines: 0,glitch: 0,pixelate: 0},lastTime: 0,frameCount: 0,fps: 0,rainbowOffset: 0};// DOM元素const elements = {asciiCam: document.getElementById('asciiCam'),asciiContainer: document.getElementById('asciiContainer'),stats: document.getElementById('stats'),fullscreenBtn: document.getElementById('fullscreenBtn'),charSet: document.getElementById('charSet'),colorScheme: document.getElementById('colorScheme'),resolution: document.getElementById('resolution'),resolutionValue: document.getElementById('resolutionValue'),brightness: document.getElementById('brightness'),brightnessValue: document.getElementById('brightnessValue'),contrast: document.getElementById('contrast'),contrastValue: document.getElementById('contrastValue'),invertBtn: document.getElementById('invertBtn'),mirrorBtn: document.getElementById('mirrorBtn'),pauseBtn: document.getElementById('pauseBtn'),effectsBtn: document.getElementById('effectsBtn'),saveBtn: document.getElementById('saveBtn'),effectsPanel: document.getElementById('effectsPanel'),closePanel: document.getElementById('closePanel'),effectBlur: document.getElementById('effectBlur'),effectBlurValue: document.getElementById('effectBlurValue'),effectNoise: document.getElementById('effectNoise'),effectNoiseValue: document.getElementById('effectNoiseValue'),effectScanlines: document.getElementById('effectScanlines'),effectScanlinesValue: document.getElementById('effectScanlinesValue'),effectGlitch: document.getElementById('effectGlitch'),effectGlitchValue: document.getElementById('effectGlitchValue'),effectPixelate: document.getElementById('effectPixelate'),effectPixelateValue: document.getElementById('effectPixelateValue'),applyEffects: document.getElementById('applyEffects')};// 视频和画布元素let video;let canvas;let ctx;let tempCanvas;let tempCtx;let animationId;// 初始化函数function init() {setupEventListeners();initCamera();}// 设置事件监听器function setupEventListeners() {// 控制面板事件elements.charSet.addEventListener('change', () => {config.chars = elements.charSet.value;});elements.colorScheme.addEventListener('change', () => {config.color = elements.colorScheme.value;updateColorScheme();});elements.resolution.addEventListener('input', () => {const value = elements.resolution.value;elements.resolutionValue.textContent = value;config.width = value * 1.5;config.height = value;});elements.brightness.addEventListener('input', () => {const value = elements.brightness.value;elements.brightnessValue.textContent = `${value}%`;config.brightness = value;});elements.contrast.addEventListener('input', () => {const value = elements.contrast.value;elements.contrastValue.textContent = `${value}%`;config.contrast = value;});elements.invertBtn.addEventListener('click', () => {config.invert = !config.invert;elements.invertBtn.textContent = config.invert ? '正常' : '反色';});elements.mirrorBtn.addEventListener('click', () => {config.mirror = !config.mirror;elements.mirrorBtn.textContent = config.mirror ? '镜像' : '原始';});elements.pauseBtn.addEventListener('click', () => {config.paused = !config.paused;elements.pauseBtn.textContent = config.paused ? '继续' : '暂停';});elements.effectsBtn.addEventListener('click', () => {elements.effectsPanel.classList.add('active');});elements.closePanel.addEventListener('click', () => {elements.effectsPanel.classList.remove('active');});elements.applyEffects.addEventListener('click', () => {elements.effectsPanel.classList.remove('active');});// 特效控制elements.effectBlur.addEventListener('input', () => {const value = elements.effectBlur.value;elements.effectBlurValue.textContent = value;config.effects.blur = value;});elements.effectNoise.addEventListener('input', () => {const value = elements.effectNoise.value;elements.effectNoiseValue.textContent = `${value}%`;config.effects.noise = value;});elements.effectScanlines.addEventListener('input', () => {const value = elements.effectScanlines.value;elements.effectScanlinesValue.textContent = `${value}%`;config.effects.scanlines = value;});elements.effectGlitch.addEventListener('input', () => {const value = elements.effectGlitch.value;elements.effectGlitchValue.textContent = `${value}%`;config.effects.glitch = value;});elements.effectPixelate.addEventListener('input', () => {const value = elements.effectPixelate.value;elements.effectPixelateValue.textContent = `${value}%`;config.effects.pixelate = value;});// 全屏按钮elements.fullscreenBtn.addEventListener('click', toggleFullscreen);// 保存按钮elements.saveBtn.addEventListener('click', saveAsciiArt);}// 初始化摄像头function initCamera() {navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {video = document.createElement('video');video.srcObject = stream;video.autoplay = true;// 创建主画布canvas = document.createElement('canvas');ctx = canvas.getContext('2d');// 创建临时画布用于特效处理tempCanvas = document.createElement('canvas');tempCtx = tempCanvas.getContext('2d');video.onplaying = startRendering;}).catch(err => {elements.asciiCam.textContent = `错误: ${err.message}\n请确保已授予摄像头权限`;console.error('摄像头错误:', err);});}// 开始渲染function startRendering() {updateResolution();animate();}// 动画循环function animate() {const now = performance.now();config.frameCount++;// 更新FPS计数if (now - config.lastTime >= 1000) {config.fps = config.frameCount;elements.stats.textContent = `FPS: ${config.fps} | 分辨率: ${config.width}x${config.height}`;config.frameCount = 0;config.lastTime = now;}// 彩虹效果偏移if (config.color === 'rainbow') {config.rainbowOffset = (config.rainbowOffset + 1) % 360;}if (!config.paused) {renderFrame();}animationId = requestAnimationFrame(animate);}// 渲染帧function renderFrame() {// 设置画布尺寸canvas.width = config.width;canvas.height = config.height;tempCanvas.width = canvas.width;tempCanvas.height = canvas.height;// 绘制原始视频帧if (config.mirror) {ctx.save();ctx.scale(-1, 1);ctx.drawImage(video, -canvas.width, 0, canvas.width, canvas.height);ctx.restore();} else {ctx.drawImage(video, 0, 0, canvas.width, canvas.height);}// 应用图像处理效果applyImageEffects();// 获取像素数据const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;let ascii = '';// 转换为ASCIIfor (let y = 0; y < canvas.height; y++) {for (let x = 0; x < canvas.width; x++) {const i = (y * canvas.width + x) * 4;const r = imgData[i];const g = imgData[i + 1];const b = imgData[i + 2];// 计算亮度 (使用感知亮度公式)let brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;// 应用对比度brightness = ((brightness - 0.5) * (config.contrast / 100)) + 0.5;// 应用亮度brightness = brightness * (config.brightness / 100);// 限制在0-1范围内brightness = Math.max(0, Math.min(1, brightness));// 根据亮度选择字符let charIndex = Math.floor(brightness * (config.chars.length - 1));if (config.invert) {charIndex = config.chars.length - 1 - charIndex;}// 确保索引在有效范围内charIndex = Math.max(0, Math.min(config.chars.length - 1, charIndex));ascii += config.chars[charIndex];}ascii += '\n';}// 更新显示elements.asciiCam.textContent = ascii;}// 应用图像处理效果function applyImageEffects() {// 复制原始图像到临时画布tempCtx.drawImage(canvas, 0, 0);// 应用模糊效果if (config.effects.blur > 0) {ctx.filter = `blur(${config.effects.blur}px)`;ctx.drawImage(tempCanvas, 0, 0);ctx.filter = 'none';}// 应用噪点效果if (config.effects.noise > 0) {const noiseData = ctx.getImageData(0, 0, canvas.width, canvas.height);const data = noiseData.data;const intensity = config.effects.noise / 100;for (let i = 0; i < data.length; i += 4) {const noise = (Math.random() - 0.5) * 255 * intensity;data[i] += noise;     // Rdata[i + 1] += noise; // Gdata[i + 2] += noise; // B}ctx.putImageData(noiseData, 0, 0);}// 应用扫描线效果if (config.effects.scanlines > 0) {const intensity = config.effects.scanlines / 100;for (let y = 0; y < canvas.height; y += 2) {ctx.fillStyle = `rgba(0, 0, 0, ${intensity})`;ctx.fillRect(0, y, canvas.width, 1);}}// 应用故障效果if (config.effects.glitch > 0 && Math.random() < config.effects.glitch / 100) {const glitchAmount = Math.floor(Math.random() * 10 * (config.effects.glitch / 100));const glitchData = ctx.getImageData(0, 0, canvas.width, canvas.height);const tempData = ctx.getImageData(0, 0, canvas.width, canvas.height);// 水平偏移for (let y = 0; y < canvas.height; y++) {const offset = Math.floor(Math.random() * glitchAmount * 2) - glitchAmount;if (offset !== 0) {for (let x = 0; x < canvas.width; x++) {const srcX = Math.max(0, Math.min(canvas.width - 1, x + offset));const srcPos = (y * canvas.width + srcX) * 4;const dstPos = (y * canvas.width + x) * 4;tempData.data[dstPos] = glitchData.data[srcPos];tempData.data[dstPos + 1] = glitchData.data[srcPos + 1];tempData.data[dstPos + 2] = glitchData.data[srcPos + 2];}}}ctx.putImageData(tempData, 0, 0);}// 应用像素化效果if (config.effects.pixelate > 0) {const size = Math.max(1, Math.floor(config.effects.pixelate / 10));if (size > 1) {const smallWidth = Math.floor(canvas.width / size);const smallHeight = Math.floor(canvas.height / size);tempCtx.drawImage(canvas, 0, 0, smallWidth, smallHeight);ctx.imageSmoothingEnabled = false;ctx.drawImage(tempCanvas, 0, 0, smallWidth, smallHeight, 0, 0, canvas.width, canvas.height);ctx.imageSmoothingEnabled = true;}}}// 更新分辨率function updateResolution() {const value = elements.resolution.value;elements.resolutionValue.textContent = value;config.width = value * 1.5;config.height = value;}// 更新颜色方案function updateColorScheme() {if (config.color === 'rainbow') {// 彩虹色不需要更新样式，因为它在动画循环中处理return;}document.documentElement.style.setProperty('--primary-color', config.color);elements.asciiCam.style.color = config.color;}// 切换全屏function toggleFullscreen() {if (!document.fullscreenElement) {elements.asciiContainer.requestFullscreen().catch(err => {console.error('全屏错误:', err);});} else {document.exitFullscreen();}}// 保存ASCII艺术function saveAsciiArt() {const blob = new Blob([elements.asciiCam.textContent], { type: 'text/plain' });const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = `ascii-art-${new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-')}.txt`;document.body.appendChild(a);a.click();document.body.removeChild(a);URL.revokeObjectURL(url);}// 启动应用init();// 清理资源window.addEventListener('beforeunload', () => {if (animationId) cancelAnimationFrame(animationId);if (video && video.srcObject) {video.srcObject.getTracks().forEach(track => track.stop());}});</script>
</body>
</html>

相关文章：

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

用HTML5实现实时ASCII艺术摄像头 项目简介 这是一个将摄像头画面实时转换为ASCII字符艺术的Web应用&#xff0c;基于HTML5和原生JavaScript实现。通过本项目可以学习到&#xff1a; 浏览器摄像头API的使用Canvas图像处理技术实时视频流处理复杂DOM操作性能优化技巧 功能亮点…...

编程日记 2025/6/3 9:16:58

鸿蒙Flutter实战：22-混合开发详解-2-Har包模式引入

以 Har 包的方式加载到 HarmonyOS 工程 创建工作 创建一个根目录 mkdir ohos_flutter_module_demo这个目录用于存放 flutter 项目和鸿蒙项目。 创建 Flutter 模块 首先创建一个 Flutter 模块&#xff0c;我们选择与 ohos_app 项目同级目录 flutter create --templatemodu…...

编程日记 2025/6/3 8:17:04

游戏引擎学习第302天:使用精灵边界进行排序

在 game_render_group.cpp 中&#xff1a;正确计算 GetBoundFor() 里的 SpriteBound 值 我们正在进行游戏的排序问题调试。虽然这是一个二维游戏&#xff0c;但包含一些三维元素&#xff0c;因此排序变得比较复杂和棘手。混合二维和三维元素时&#xff0c;需要依赖一些比较主观…...

编程日记 2025/6/3 23:50:04

SpringBoot+MyBatis

切换数据库连接词 引入数据库连接词的依赖&#xff0c;配置数据库连接池的类型&#xff1b; 编写测试类&#xff1a; package org.example.threelayerdecouplingdomeapplication2;import org.example.threelayerdecouplingdomeapplication2.mapper.UserMapper; import org.ex…...

编程日记 2025/6/7 17:28:21

wireshark: Display Filter Reference

https://www.wireshark.org/docs/dfref/// 这个里面的扩展功能还是很强大&#xff0c;可以帮着问题分析。支持大量的自定义化的字段读取功能&#xff0c;支持很多的协议。 https://www.wireshark.org/docs/dfref///f/frame.html frame.time_delta Time delta from previous ca…...

编程日记 2025/6/3 20:40:30

Java基础 Day19

一、泛型&#xff08;JDK5引入&#xff09; 1、基本概念 在编译阶段约束操作的数据类型&#xff0c;并进行检查 好处&#xff1a;统一数据类型&#xff0c;将运行期的错误提升到了编译期 泛型的默认类型是 Object 2、泛型类 在创建类的时候写上泛型 在创建具体对象的时候…...

编程日记 2025/6/6 17:22:07

VMware+Windows 11 跳过安装阶段微软账号登录

OOBE 阶段 来到这里 断开网络适配器 VMware右下角&#xff0c;点击网络适配器&#xff0c;断开连接 同时按下 Shift 和 F10 &#xff0c;打开命令提示符(cmd.exe) 输入 oobe\BypassNRO.cmd 并回车 接下来正常进行即可...

编程日记 2025/6/6 16:38:19

HarmonyOS开发-应用间跳转

1. HarmonyOS开发-应用间跳转 在鸿蒙中,我们再开发过程当中或多或少都会遇见想要从一个App的页面跳转至另一个App的页面,这个时候我们要怎么进行跳转呢,其实在HarmonyOS开发者文档中只需要用到Want对象和startAbility()方法进行跳转就可以了。 1.1. 实现 （1）我们要先准备两个…...

编程日记 2025/6/4 10:29:29

网工每日一练

2025/5/22.每日一练&#xff08;单选题&#xff09; 路由器在查找路由表时存在最长匹配原则&#xff0c;这里的长度指的是以下哪个参数&#xff1f; A. NextHopIP地址的大小 B. 路由协议的优先级 C. Cost D. 掩码的长度 路由器在查找路由表时遵循的最长匹配原则中&#xff0c;“…...

编程日记 2025/6/3 17:09:49

使用 Navicat 17 for PostgreSQL 时，请问哪个版本支持 PostgreSQL 的 20150623 版本？还是每个版本都支持？

&#x1f9d1;‍&#x1f4bb; PostgreSQL 用户 使用 Navicat 17 for PostgreSQL 时&#xff0c;请问哪个版本支持 PostgreSQL 的 20150623 版本&#xff1f;还是每个版本都支持&#xff1f; &#x1f9d1;‍&#x1f527; 官方技术中心 Navicat Premium 17 和 Navicat for P…...

编程日记 2025/6/7 6:39:15

校园二手交易系统

该交易平台分为两部分&#xff0c;前台和后台。用户在前台进行商品选购以及交易&#xff1b;管理员登录后台可以对商品进行维护&#xff0c;主要功能包含&#xff1a; 后台系统的主要功能模块如下&#xff1a; 登录功能、注册功能、后台首页 系统设置&#xff1a; 菜单管理、…...

编程日记 2025/6/4 11:05:33

基于pycharm,python,flask,sklearn,orm,mysql，在线深度学习sql语句检测系统

详细视频:【基于pycharm,python,flask,sklearn,orm,mysql&#xff0c;在线深度学习sql语句检测系统-哔哩哔哩】 https://b23.tv/JLQDwNn...

编程日记 2025/6/3 16:28:52

LangChain02-Agent与Memory模块

Agent与Memory模块深度解析 1. Agent模块原理 1.1 ReAct框架的实现机制 Agent是LangChain中最具智能化的组件&#xff0c;其核心思想基于 ReAct框架&#xff08;Reasoning Acting&#xff09;&#xff0c;即通过 思维&#xff08;Thought&#xff09; 和 行动&#xff08;Ac…...

编程日记 2025/6/5 10:17:21

upload-labs通关笔记-第17关文件上传之二次渲染gif格式

系列目录 upload-labs通关笔记-第1关 文件上传之前端绕过&#xff08;3种渗透方法&#xff09; upload-labs通关笔记-第2关 文件上传之MIME绕过-CSDN博客 upload-labs通关笔记-第3关 文件上传之黑名单绕过-CSDN博客 upload-labs通关笔记-第4关 文件上传之.htacess绕过-CSDN…...

编程日记 2025/6/6 20:43:06

计算机网络学习20250525

应用层协议原理 创建一个网络应用，编写应用程序，这些应用程序运行在不同的端系统上，通过网络彼此通信 不需要在网络核心设备（路由器，交换机）上写应用程序网络应用程序工作在网络层以下将应用程序限制在端系统上促进应用程序迅速研发和部署，将复杂问题放到网络边缘网络应…...

编程日记 2025/6/4 22:28:51

STM32中的SPI通信协议

IIC和SPI的对比 IIC是半双工的通信&#xff0c;无法同时收发信息&#xff1b;SPI是全双工通讯&#xff0c;可以同时收发信息&#xff1b;IIC的通讯协议较复杂&#xff0c;而SPI通讯协议较简单&#xff1b;IIC需要通过地址选择从机&#xff0c;而SPI只主要一个引脚即可选中从机…...

编程日记 2025/6/3 4:40:06

从版本控制到协同开发：深度解析 Git、SVN 及现代工具链

前言&#xff1a;在当今软件开发的浪潮中&#xff0c;版本控制与协同开发无疑扮演着举足轻重的角色。从最初的单兵作战到如今大规模团队的高效协作&#xff0c;一套成熟且得力的版本控制系统以及围绕其构建的现代工具链&#xff0c;已然成为推动软件项目稳步前行的关键引擎。今…...

编程日记 2025/6/6 22:18:00

redis Pub/Sub 简介 -16 （PUBLISH、SUBSCRIBE、PSUBSCRIBE）

Redis Pub/Sub 简介&#xff1a;PUBLISH、SUBSCRIBE、PSUBSCRIBE Redis Pub/Sub 是一种强大的消息传递范例&#xff0c;可在应用程序的不同部分之间实现实时通信。它是构建可扩展和响应式系统的基石&#xff0c;允许组件在没有直接依赖的情况下进行交互。本章将全面介绍 Redis…...

编程日记 2025/6/7 5:44:30

《黄帝内经》数学建模与形式化表征方式的重构

黄帝内经的数学概括&#xff1a;《黄帝内经》数学建模与形式化表征方式的重构 摘要&#xff1a;《黄帝内经》通过现代数学理论如动力系统、代数拓扑和随机过程&#xff0c;被重构为一个形式化的人体健康模型。该模型包括阴阳动力学的微分几何、五行代数的李群结构、经络拓扑与同…...

编程日记 2025/6/4 19:02:01

PyTorch Image Models (timm) 技术指南

timm PyTorch Image Models (timm) 技术指南功能概述 一、引言二、timm 库概述三、安装 timm 库四、模型加载与推理示例4.1 通用推理流程4.2 具体模型示例4.2.1 ResNeXt50-32x4d4.2.2 EfficientNet-V2 Small 模型4.2.3 DeiT-3 large 模型4.2.4 RepViT-M2 模型4.2.5 ResNet-RS-1…...

编程日记 2025/6/6 12:46:51

基于Scikit-learn与Flask的医疗AI糖尿病预测系统开发实战

引言 在精准医疗时代&#xff0c;人工智能技术正在重塑临床决策流程。本文将深入解析如何基于MIMIC-III医疗大数据集&#xff0c;使用Python生态构建符合医疗AI开发规范的糖尿病预测系统。项目涵盖从数据治理到模型部署的全流程&#xff0c;最终交付符合DICOM标准的临床决策支…...

编程日记 2025/6/5 3:50:29

掌握聚合函数：COUNT，MAX，MIN，SUM，AVG，GROUP BY和HAVING子句的用法，Where和HAVING的区别

对于Java后端开发来说&#xff0c;必须要掌握常用的聚合函数&#xff1a;COUNT&#xff0c;MAX&#xff0c;MIN&#xff0c;SUM&#xff0c;AVG&#xff0c;掌握GROUP BY和HAVING子句的用法&#xff0c;掌握Where和HAVING的区别&#xff1a; ✅ 一、常用聚合函数&#xff08;聚…...

编程日记 2025/6/6 11:14:34

【Node.js】高级主题

个人主页&#xff1a;Guiat 归属专栏&#xff1a;node.js 文章目录 1. Node.js 高级主题概览1.1 高级主题架构图 2. 事件循环与异步编程深度解析2.1 事件循环机制详解事件循环阶段详解 2.2 异步编程模式演进高级异步模式实现 3. 内存管理与性能优化3.1 V8 内存管理机制内存监控…...

编程日记 2025/6/7 2:26:51

【Linux】定时任务 Crontab 与时间同步服务器

目录 一、用户定时任务的创建与使用 1.1 用户定时任务的使用技巧 1.2 管理员对用户定时任务的管理 1.3 用户黑白名单的管理 一、用户定时任务的创建与使用 1.1 用户定时任务的使用技巧 第一步&#xff1a;查看服务基本信息 systemctl status crond.service //查看周期性…...

编程日记 2025/6/6 9:41:16

【TCP/IP协议族详解】

目录 第1层 链路/网络接口层—帧&#xff08;Frame&#xff09; 1. 链路层功能 2. 常见协议 2.1. ARP&#xff08;地址解析协议&#xff09; 3. 常见设备 第2层 网络层—数据包&#xff08;Packet&#xff09; 1. 网络层功能 2. 常见协议 2.1. ICMP&#xff08;互联网…...

编程日记 2025/6/5 12:34:28

蓝桥杯电子赛_零基础利用按键实现不同数字的显现

目录 一、前提 二、代码配置 bsp_key.c文件 main.c文件 main.c文件的详细讲解 功能实现 注意事项 一、前提 按键这一板块主要是以记忆为主&#xff0c;我直接给大家讲解代码去实现我要配置的功能。本次我要做的项目是板子上的按键有S4~S19&#xff0c;我希望任意一个按键…...

编程日记 2025/6/6 14:51:34

Docker架构详解

一,Docker的四大要素&#xff1a;Dockerfile、镜像(image)、容器(container)、仓库(repository) 1.dockerfile&#xff1a;在dockerfile文件中写构建docker的命令,通过dockerbuild构建image 2.镜像&#xff1a;就是一个只读的模板&#xff0c;镜像可以用来创建docker容器&…...

编程日记 2025/6/4 20:49:51

Rust 学习笔记：关于生命周期的练习题

Rust 学习笔记&#xff1a;关于生命周期的练习题 Rust 学习笔记&#xff1a;关于生命周期的练习题生命周期旨在防止哪种编程错误&#xff1f;以下代码能否通过编译&#xff1f;若能&#xff0c;输出是&#xff1f;如果一个引用的生命周期是 static&#xff0c;这意味着什么&…...

编程日记 2025/6/5 6:51:12

Spring AI 模块架构与功能解析

Spring AI 是 Spring 生态系统中的一个新兴模块&#xff0c;专注于简化人工智能和机器学习技术在 Spring 应用程序中的集成。本文将详细介绍 Spring AI 的核心组件、功能模块及其之间的关系&#xff0c;帮助具有技术基础的读者快速了解和应用 Spring AI。 Spring AI 的核心概念…...

编程日记 2025/6/7 6:41:12

单元测试学习笔记

单元测试是软件测试的基础层级&#xff0c;主要针对代码的最小可测试单元进行验证。单元测试可以帮助快速定位问题边界&#xff0c;提升代码可维护性&#xff0c;支持安全的重构操作。 测试对象&#xff1a; 独立函数/方法纯工具类&#xff08;如数据处理函数&#xff09;UI组…...

编程日记 2025/6/3 18:24:41