https://June6699.github.io/tags/%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF/%E9%A1%B9%E7%9B%AE/Recent content in 技术/前端/项目 on June's BlogHugozh-cnFri, 03 Apr 2026 00:00:00 +0000https://June6699.github.io/posts/pretext-demo/Fri, 03 Apr 2026 00:00:00 +0000https://June6699.github.io/posts/pretext-demo/<p>这个页面不再只是“换背景色”，而是做成真正可交互的 <a href="https://github.com/chenglou/pretext">pretext</a> 实验：你可以拖动滑块，实时改变文本容器宽度，观察行数和高度的动态变化。</p> <h3 id="pretext-demo-扩展展示">Pretext Demo 扩展展示</h3> <h4 id="shrinkwrap-showdown紧凑宽度">Shrinkwrap Showdown（紧凑宽度）</h4> <h5 id="演示效果">演示效果</h5> <div class="pretext-demo"> <section class="pretext-page"> <div class="pretext-card"> <p class="pretext-intro">左侧是普通块级文本，右侧启用 pretext 的气泡收紧，行数尽量保持一致但宽度更紧凑。</p>https://June6699.github.io/posts/vid2ascii-gif%E6%9E%84%E5%BB%BA%E6%97%A5%E5%BF%97/Fri, 03 Apr 2026 00:00:00 +0000https://June6699.github.io/posts/vid2ascii-gif%E6%9E%84%E5%BB%BA%E6%97%A5%E5%BF%97/<h2 id="本地化动态字符视频渲染系统开发与迭代实录">本地化动态字符视频渲染系统：开发与迭代实录</h2> <p>本文档完整记录了“本地化动态 ASCII 字符视频渲染系统”从最初的构想、踩坑、架构推翻到最终实现纯前端视频压制、字幕解析完全体的全过程。</p> <hr> <h2 id="项目起源与初探基于-pretext-的构想">项目起源与初探：基于 Pretext 的构想</h2> <p>在项目初期，我们的核心诉求是将视频的每一帧转化为 ASCII 字符并在浏览器中高帧率播放。前端渲染大量长文本换行时，极易触发 DOM 回流（Reflow），导致页面卡顿甚至崩溃。</p>