Veil:浏览器端无损深色模式 PDF 渲染工具,图像与文本可选性兼得
内容评分
摘要
Veil 是一款浏览器端开源工具,可在保留图像原始内容与链接完整性的前提下,将 PDF 转换为舒适深色模式。其三层渲染策略(CSS 滤镜、图像保护、深色页面检测)兼顾可读性与图像保真,并通过 OCR 实现图像内文本可选中,全程本地运行、无框架依赖。
正文
Veil 是一个完全在浏览器中运行的开源工具,可在不破坏图像内容的前提下,将 PDF 文档转换为深色模式。其核心目标是解决传统深色阅读器强制反转图像导致图表失真、阅读体验下降的问题。
项目作者受自身阅读经历启发——在工厂期间阅读含大量图表的学习资料时,发现现有深色阅读器会将图像整体反转,使图表难以辨识。为此,Veil 采用三层策略实现精准渲染:
-
CSS 滤镜层:在主画布上应用
invert(0.86)+hue-rotate(180deg)。作者经实测发现,0.86 的反转系数比 1.0 更柔和,生成约 #242424 的深灰背景与 #DBDBDB 的低饱和度文字,显著提升长时间阅读舒适度。 -
图像保护层:在第一层之上叠加一个无滤镜的第二画布。通过 PDF.js 的
getOperatorList()API 遍历操作列表,重建 CTM(当前变换矩阵)堆栈,精确定位paintImageXObject(opcode 85)所对应的图像区域,并将原始图像像素复制至覆盖层。此过程未对 PDF.js 分支,避免维护负担;同时结合 OCR(Tesseract.js)对图像内文本进行识别与重排,使图表中的文字也可被选中复制。 -
深色页面检测层:渲染后采样页面边缘/角落区域,依据 BT.601 公式(Y = 0.299R + 0.587G + 0.114B)计算感知亮度。若平均亮度低于 40%,则跳过反转操作,保留原始深色页面(如黑底白字幻灯片),避免过度反转造成视觉不适。
所有处理均在本地完成,无后端依赖,基于原生 JavaScript 实现,支持 PWA 安装与离线使用。项目地址:https://veil.simoneamico.com;代码仓库:https://github.com/simoneamico-ux-dev/veil。