Textmode Overlay 作者： humanbydefinition

让流动的网页化作文字。

[Textmode Overlay] 是一款面向浏览器的实时 ASCII 艺术生成器和视频转文字特效。选择一个兼容的视频或 canvas，看它变成一幅鲜活的、完美对齐的字符网格。将亮度明暗与轮廓线结合，挑选颜色与字体，叠加视觉效果，在构图满意时导出画面。

原始媒体保留在下方，因此你可以随时混合、暂停、重置、替换或移除特效。

基于 textmode.js 构建。

─── 试一试

只要页面提供兼容的 canvas 或 HTML5 视频，就能使用 [Textmode Overlay]：

▸ 把 YouTube 播放变成实时 ASCII 视频艺术
▸ 用 textmode 重新演绎 Twitch 直播和 VOD
▸ 为 Vimeo 等网页视频播放器赋予风格
▸ 转换浏览器游戏、演示和 WebGL canvas
▸ 为音乐和音频可视化增添文字艺术外观
▸ 探索 p5.js、Three.js、生成艺术和创意编程草图
▸ 在自己的网站上测试 canvas 或视频元素

部分受保护、跨域或沙盒中的媒体可能不可用。[Textmode Overlay] 会标记无法访问的帧，并在不打断页面的情况下报告采样错误。

─── 创建叠加层

打开包含可见 canvas 或视频的页面。

工具栏：
1 点击 [Textmode Overlay] 工具栏图标
2 选择 "select media"
3 预览可用目标
4 点击一个目标

右键菜单：
1 在页面任意位置或直接在视频上单击右键
2 选择 "Open Textmode Overlay"
3 在叠加层面板中选择 "select media"
4 点击高亮的 canvas 或视频

随时按 Esc 取消媒体选择。

─── 用光、轮廓或两者绘制

亮度与轮廓两个通道可以独立启用，为你提供三种塑造结果的方式：

▸ 仅亮度
▹ 通过自定义字形渐变映射亮度值

▸ 仅轮廓
▹ 将检测到的边缘绘制成由字符组成的图形线条

▸ 组合
▹ 在基于亮度的 ASCII 明暗之上叠加轮廓

微调轮廓阈值和颜色敏感度，反转任一通道，并为其字符和单元格选择采样色或固定色。

─── 打造属于你的风格

▸ 用不透明度控件混合结果
▸ 将字符大小从细密细节调到粗大像素
▸ 选择并编辑用于明暗的字形渐变
▸ 循环切换内置的 textmode 字体
▸ 从电脑上传受支持的 TTF 或 OTF 字体
▸ 采样源颜色，或选择带 Alpha 透明度的固定字符色、单元格色和背景色
▸ 将面板拖离你想查看的页面区域
▸ 重置实验并重新开始，无需再次选择媒体

─── 构建实时特效堆栈

可从 16 种后处理滤镜中选择，包括 CRT、扫描线、泛光、胶片颗粒、像素化、色差、色调分离、阈值、暗角、灰度、棕褐色，以及色相、对比度和饱和度控件。

每个特效都可以在源持续播放的同时开关、重新排序、展开和调整。改变堆栈顺序可能产生完全不同的结果。

─── 保存画面

▸ TXT
▹ 将作品复制为纯字符网格

▸ SVG
▹ 让 textmode 结果在任何缩放下都保持清晰

▸ PNG
▹ 导出无损图像

▸ JPG
▹ 导出紧凑的位图图像

─── 记住你的工作流程

最近使用的叠加层预设会按域名分别记住。面板位置也会被记住，自定义字体会本地保存在浏览器管理的扩展存储中，直到你将其移除。

─── 默认私密

没有账户、云端渲染器、跟踪、广告或远程媒体处理。扩展只在你请求时创建叠加层，并将转换、设置、字体和导出都留在你的浏览器内。

使用的权限：
▸ activeTab
▹ 仅在你调用扩展后访问页面

▸ scripting
▹ 启动页面内的叠加层工具

▸ storage
▹ 保留本地设置和自定义字体元数据

▸ unlimitedStorage
▹ 在本地保留受支持的自定义字体文件

▸ contextMenus
▹ 添加“Open Textmode Overlay”右键操作

─── 兼容性

支持同源、嵌套、srcdoc 以及动态添加的 iframe。跨域或不透明沙盒 iframe 中的媒体无法作为目标。受污染的 canvas（tainted canvas）、DRM 视频和其他受保护来源也可能在浏览器常规安全规则下阻止像素采样。