Textmode Overlay

讓流動的網頁化作文字。

[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 影片與其他受保護來源，也可能在瀏覽器一般安全規則下阻止像素取樣。