
HyperFrames 媒体效果实战把图片与视频变成 ASCII、半调印刷与复古磁带风格【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes手头有一个 HyperFrames 项目里面已经放好了图片或视频想让它变成三种风格ASCII 字符画、半调印刷点阵、复古磁带损伤。HyperFrames 的媒体效果正好覆盖这三类——它属于效果系统的 ArtASCII、PrintHalftone 等印刷类、Retro and glitchTape Damage 等复古类家族。整个过程不改动磁盘上的原始文件效果以data-color-grading数据写在媒体元素上随时可以调参、动画化或整个移除Studio、预览和渲染读的是同一份数据不会互相打架。本文的主路径用 CLI 命令media-treatment完成全程在项目目录内执行--project默认就是当前目录。三种风格对应哪些效果键媒体效果指南 按家族划分了 18 个效果。本文涉及的三个目标及其控制键如下目标风格效果家族效果键data-color-grading的effects段ASCII 字符画Artascii、asciiSize、asciiInvert、asciiStyle、asciiColor、asciiRotation半调印刷Printhalftone、halftoneSize复古磁带Retro and glitchtapeDamage、tapeTracking、tapeNoise、tapeSpeed其中 ASCII「不是只有一个开关」它有八种风格asciiStyle取值 0–7。完整的效果键清单可以在 合同源码 中核对asciiStyle的 0–7 取值范围同样定义在该文件。另外两个家族供参考Print 家族还有 Two-Ink Print、Ordered Dither、Mono ScreenRetro 家族还有 Film Artifacts、Scanlines、CRT Curvature、Channel Separation、Digital Glitch、Chroma Softening。磁带损伤的设计目标是模拟真实磁带行为——跟踪抖动、色彩洇染、撕裂——而不是随机彩色噪点。先确认这台机器上有哪些能力不要凭旧文档硬编码效果列表用命令查询当前能力面# 打印全部能力概览 npx hyperframes media-treatment --capabilities --json # 查看某一个家族、控件、效果或预设的细节 npx hyperframes media-treatment --capability kuwahara --json--capability id接受家族、控件、效果、预设或调色板的 id文档给出的示例是kuwaharaArt 家族的绘画效果和twoInkPrint。把 id 换成你要查的目标如ascii、halftone、tapeDamage就能看到对应的控件和取值再据此写--grading参数。测量源素材并先做 dry-run如果素材已经在合成文件里默认是index.html可以先测一下它的色彩元数据、亮度分布和裁剪情况拿到一个有界的校正起点npx hyperframes media-treatment --selector #hero --analyze --json--selector css是 CSS 选择器必须命中合成中的一个img或video选择器不唯一时用--selector-index n从零开始指定第几个匹配。合成文件不是index.html时用--file path指定例如npx hyperframes media-treatment --file compositions/scene.html --selector video \ --grading {preset:warm-daylight} --apply --dry-run --json--dry-run只做校验和报告、不写文件这是改文件前确认 payload 合法性的方式。应用效果确认无误后去掉--dry-run并加上--apply。payload 的写法遵循 实现参考风格化处理放在effects段里例如文档中的示例video srcmedia/subject.webm muted >npx hyperframes media-treatment \ --selector #product \ --grading {preset:two-ink-print} \ --apply --json按同样的方式把--grading换成{effects:{...}}形式即可写入 ASCII、半调或磁带效果具体键名和取值以--capability id --json的输出为准上表列出了目标键名。--grading接收的是经过校验的调色补丁格式不合法时命令会报错不会静默写入。验证结果检查写入的数据。应用后目标元素上会出现data-color-grading属性内容就是刚才的补丁含effects段。Studio、预览和渲染读的都是这一份数据。跑一下 lint。嵌套不是可选的扁平对象如{exposure:0.15}什么都渲染不出来而npx hyperframes lint会抓到这类写法并指出该控件应属于哪个段Color grading 指南 说明了这一行为。在 Studio 里看动态效果。选中图片或视频打开 Inspector 的Effects调好后把片段从头放到尾——有些效果静止时看不出问题动起来才露馅。按住面板头部的 compare 按钮可以闪回原片对比运动素材建议在多个位置 scrub因为 flattering 某一帧的强度可能毁掉下一帧。调整与移除不满意直接换media-treatment写入的是同一份data-color-gradingStudio 里改过之后 CLI 再写也不会冲突。整个移除npx hyperframes media-treatment --selector #hero --clear。强度判断按文档给出的标准来选了一个强风格就贯彻到底——半强度的 ASCII 看起来只是像弄错了。对照原片检查当效果开始和画面内容抢戏时就把效果去掉。边界与限制效果覆盖整个媒体层。它不跟随人脸、屏幕或任何物体。只让画面的一部分变化时先 crop 或 mask 出一层独立媒体再对那一层加效果层叠方式见 实现参考 的图层表。HDR 素材上效果不会出现。效果走标准 SDR 管线原生 HDR 层通过独立路径保留 HDR 像素这些效果不会显示在上面。需要效果留在成片里时先把素材转成 SDR。远程素材有风险。从别的服务器加载的文件依赖对方返回正确的 CORS 头而且可能在渲染前失效。媒体文件放在项目内。性能。文档点名 Blur、Bloom 和 Kuwahara Paint 是贵的那几个多个叠在大尺寸层上会拖慢预览和渲染本文的 ASCII、半调、磁带效果未被点名但多层叠加同样建议先跑通预览。下一步需要修曝光、白平衡、曲线、LUT 时见 Color gradingdata-color-grading的完整数据格式见 HTML schema 参考 的 Color grading and media effects 一节media-treatment全部参数--project、--all、--selector-index等见 CLI 参考。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考