HarmonyOS超分：竖置Slider方向踩坑与渲染泵调优

鸿蒙专家

在 HarmonyOS 7 / API 26 上做图像超分，常见做法是把插值核做成三档离散开关，或者直接封装成“一键美化”。SR CONSOLE 换了个思路：把超分做成一台可演奏的合成器——四根竖置推子实时驱动参数化核函数，拨动即全图重渲染，按住 HOLD A/B 随时切回原始信号对比。工程位于 Image-Super-Resolution/sr-console，实测环境为 Mate 90 Pro 模拟器（HarmonyOS 7.0 / API 26）。

一、面板布局与渲染链路

界面从上到下分为四层：300 宽的显示窗强制最近邻插值，故意保留低清“音源”的颗粒感；右上角 LED 状态条用等宽字体回报引擎状态，41MS OK 为绿灯，异常转红；KERNEL、DENOISE、SHARPEN、GLOW 四根竖置推子，顶端数码管显示当前值；底部是 PORTRAIT、DOC、NIGHT 三颗预设芯片、OUTPUT 2×/3×/4× 输出选择，以及 HOLD A/B 监听键。音源可选内置的雪山、老城、翠鸟三张 180×180 图像，也可从相册导入，长边自动压到 280。

渲染链路的顺序是刻意排的：先做核函数变形，再做中值去噪，然后 USM 锐化，最后盒模糊柔焦。柔焦放在最后，是为了让锐化抬起来的高频“收”一点，避免数码味过重。实测 180×180 到 2× 约 40ms，4× 且 GLOW 推满时约 68ms，仍在实时预算内。

二、把插值核变成连续变量

KERNEL 推子的本质是一个混合系数：推到 0 是纯双线性，推到 1 是纯 Catmull-Rom，推到 0.5 则得到“半软半硬”的混合核。锐度不再是档位，而是无级旋钮。核函数只做三角波与三次曲线的线性混音：

2. double Kernel(double x, double blend) {
3. double ax = std::fabs(x);
4. double tri = std::max(0.0, 1.0 - ax); // 双线性成分
5. double cr = 0.0; // Catmull-Rom 成分
6. if (ax < 1.0) {
7. cr = 1.5 * ax * ax * ax - 2.5 * ax * ax + 1.0;
8. } else if (ax < 2.0) {
9. cr = -0.5 * ax * ax * ax + 2.5 * ax * ax - 4.0 * ax + 2.0;
10. }
11. return (1.0 - blend) * tri + blend * cr;
12. }

复制代码

每次渲染按目标尺寸为横竖两根轴重建 4-tap 权重表，覆盖半径 2，并对权重做归一化：

2. void BuildTaps(int srcLen, int dstLen, double blend, Taps* taps) {
3. for (int d = 0; d < dstLen; ++d) {
4. double center = (d + 0.5) * srcLen / dstLen - 0.5; // 半像素对齐
5. int s0 = (int)std::floor(center) - 1;
6. double sum = 0.0;
7. for (int t = 0; t < 4; ++t) {
8. taps[d].idx[t] = ClampInt(s0 + t, 0, srcLen - 1);
9. taps[d].w[t] = Kernel(center - (s0 + t), blend);
10. sum += taps[d].w[t];
11. }
12. for (int t = 0; t < 4; ++t) taps[d].w[t] /= sum; // 亮度不漂移
13. }
14. }

复制代码

这里有两个不能省的细节。第一是半像素对齐：直接用角点对齐会让整图偏移半个源像素。第二是权重归一化：混合核在边界处权重和会偏离 1，不归一就会出现亮度漂移。权重表每次渲染重算，但 dstLen 只有几百，相对主循环可以忽略。

三、后级效果器：去噪、锐化、柔焦

DENOISE 推子把结果向 3×3 中值滤波混合。每通道取 3×3 邻域中值，9 个元素用插入排序，比通用排序快一个量级；推子值控制原信号与中值信号的线性混合比例：

2. if (denoise > 0.0) {
3. std::vector<uint8_t> med(out);
4. Median3(med, dw, dh);
5. for (size_t i = 0; i < out.size(); i += 4)
6. for (int c = 0; c < 3; ++c)
7. out[i + c] = ClampByte(
8. out[i + c] * (1.0 - denoise) + med[i + c] * denoise);
9. }

复制代码

SHARPEN 推子做 USM 锐化，直接抬高频。这里要注意索引：模糊缓冲按“像素×3 通道”布局，混回 RGBA 缓冲时要做 i/4*3+c 的换算，否则容易写出越界崩溃：

2. Box3(out, dw, dh, blur);
3. for (size_t i = 0; i < out.size(); i += 4)
4. for (int c = 0; c < 3; ++c) {
5. size_t bi = i / 4 * 3 + c; // 像素索引换算！
6. out[i + c] = ClampByte(out[i + c] + sharpen * (out[i + c] - blur[bi]));
7. }

复制代码

GLOW 推子与锐化互为镜像：不做减法做加法，把低频以 glow * 0.7 的比例混回，高光晕开、结构保留。它也是信号链里最贵的一级，4× 输出下耗时明显上升，但仍在可接受范围。

四、渲染泵：推子甩得再快也不糊

竖置滑杆的 onChange 每秒能触发几十次，而一次渲染要几十毫秒。如果每次事件都排队渲染，画面会严重滞后。合成台用“脏标记 + 泵”把密集事件合并成连续帧：

2. private dirty = false;
3. private pumping = false;
4. private schedule(): void {
5. this.dirty = true; // 每次拨动只标记脏位
6. if (this.pumping) return; // 泵在工作？等它来取最新参数
7. this.pumping = true;
8. this.pump();
9. }
10. private async pump(): Promise<void> {
11. while (this.dirty) {
12. this.dirty = false;
13. const f = await this.svc.render(...); // 取的是当前最新参数
14. this.frame = f; // 状态更新即渲染
15. }
16. this.pumping = false;
17. }

复制代码

效果是：无论推子甩多快，荧幕永远朝最终位置收敛，中间帧自动被跳过。松手的瞬间，画面上就是最终参数的结果，不会回放历史帧。

五、预设芯片与无状态引擎

三颗预设芯片只是“推子位置的快照”。按下后四根推子立即跳到对应位置，用户还能继续微调，这比“一键美化”的黑盒友好得多。PORTRAIT 偏柔焦人像，DOC 偏文档锐利，NIGHT 偏夜景降噪，核心实现就是把推子拨到指定值：

2. private applyPreset(kind: number): void {
3. if (kind === 0) { // PORTRAIT：柔焦人像
4. this.blend = 0.35; this.denoise = 0.25;
5. this.sharpen = 0.55; this.glow = 0.4;
6. } else if (kind === 1) { // DOC：文档锐利
7. this.blend = 0.9; this.denoise = 0.0;
8. this.sharpen = 1.1; this.glow = 0.0;
9. } else { // NIGHT：夜景降噪
10. this.blend = 0.6; this.denoise = 0.55;
11. this.sharpen = 0.3; this.glow = 0.15;
12. }
13. this.schedule(); // 拨完推子，渲染泵自动接手
14. }

复制代码

之所以能这么简单，是因为引擎完全无状态：render() 是纯函数，相同推子位置必得相同输出。预设快照、撤销重做、参数分享，在架构上都只是“记住几个数字”的事。

六、三个容易踩的坑

第一个坑是 Slider 的方向参数。竖置滑杆的方向不是属性方法，而是构造选项。写成 Slider({...}).direction(Axis.Vertical) 会撞上通用的 RTL 方向属性，参数类型是 Direction，报出一串误导性错误。正确写法是在构造器里传 direction，枚举值是 Axis.Vertical，注意大小写：

2. Slider({ value, min, max, step: 0.01,
3. style: SliderStyle.OutSet,
4. direction: Axis.Vertical }) // 构造参数，枚举值是 Axis.Vertical
5. .height(170) // 且注意大小写：Vertical 而非 VERTICAL

复制代码

第二个坑是前面提到的 USM 索引换算。模糊缓冲是像素×3 通道布局，主输出是 RGBA，混回时必须用 i/4*3+c 找到对应通道，写错就会越界。

第三个坑在 NAPI 入口。参数解析失败时，必须立即拒绝 Promise，绝不能把带默认零值的任务送进工作线程；否则 sw * factor 这类计算会带着 0 进去，除零、越界接踵而至：

2. if (!parsed) {
3. napi_value promise0 = nullptr;
4. napi_value msg = nullptr;
5. napi_create_string_utf8(env, t->err.c_str(), t->err.size(), &msg);
6. napi_value err = nullptr;
7. napi_create_error(env, nullptr, msg, &err);
8. napi_create_promise(env, &t->deferred, &promise0);
9. napi_reject_deferred(env, t->deferred, err); // 拒绝，而非入队
10. delete t;
11. return promise0;
12. }

复制代码

入队之前还有一层数值护栏，校验倍率、源尺寸、缓冲区大小和推子范围：

2. if (t->factor <= 1 || t->factor > 8 ||
3. t->sw * t->factor > 8192 || t->sh * t->factor > 8192 ||
4. t->src.size() != (size_t)t->sw * t->sh * 4) {
5. t->err = "bad args";
6. return;
7. }
8. if (t->blend < 0.0 || t->blend > 1.0 || ...) { // 推子范围校验
9. t->err = "slider out of range";
10. return;
11. }

复制代码

推子的合法区间在 UI 层钳制，保护体验；引擎层再校验一遍，保护安全。两层缺一不可。

七、小结

把超分做成合成器，最大的收获是“交互即教学”：拨一遍 KERNEL 推子，比读十页插值核教材更直观地理解锐度从哪来。系列至此覆盖了批处理、交互、诊断、演奏四种形态，同一套超分能力换一种交互范式，就是一个新产品。后续排期包括推子长按微调、参数二维码分享，以及把 GLOW 换成可调半径的柔焦。

热心网友5

楼主把超分做成合成器的交互挺有画面感，四根竖置推子连续混合双线性和 Catmull-Rom，比三档开关细腻不少。BuildTaps 里半像素对齐和权重归一化这两个细节确实是避免整图偏移、亮度漂移的关键，后级去噪、USM 锐化、盒模糊柔焦的顺序也讲得通。脏标记加渲染泵合并高频 onChange 的做法很实用，推子甩得再快也只追最终参数，比事件排队渲染稳很多。标题提到竖置 Slider 方向踩坑，正文里没展开，想请教下是 value 与视觉方向映射的问题，还是拖拽事件里方向判断的坑？另外锐化那段像素乘三通道的索引换算确实容易写出越界，感谢提醒。

热心网友5

这个合成器思路很有意思，把超分核从三档开关变成连续混合系数，调参手感应该比预设芯片直观很多。半像素对齐和权重归一化这两个细节很关键，尤其边界 clamp 后不归一确实容易出现亮度漂移。渲染泵的 dirty + pumping 合并事件也很实用，推子甩得快时不排队、始终朝最终参数收敛，这个设计很符合实时预览的需求。 提两个小建议：pump 里最好用 try/finally 保证 pumping 能复位，render 异常或页面销毁时别把泵卡死；另外竖置 Slider 的方向映射建议在事件入口统一成参数值，避免 UI 上下方向和数值增减相反导致调参别扭。标题里的竖置方向踩坑正文没展开，挺想听听具体是怎么处理的。整体链路顺序和 40ms/68ms 的实测数据很有参考价值。

热心网友5

这个思路挺有意思，把超分参数做成竖置推子和 HOLD A/B 对比，交互上比三档开关更有“调音”的感觉。渲染链顺序先核变形、再去噪、锐化、最后柔焦，逻辑是顺的，尤其柔焦放最后收高频这点很实用。半像素对齐和权重归一化这两个细节确实是连续混合核容易踩的地方，能提前处理掉会省很多调试。 渲染泵用脏标记合并 onChange 事件也很适合推子这种高频输入。不过代码里 pump 退出前把 pumping 置 false 的窗口可以再留意一下：如果此时刚好有新事件把 dirty 置 true，可能会漏掉最后一帧，建议在退出前再确认一次脏位，或者把状态收尾做得更原子一些。另外标题里的竖置 Slider 方向踩坑正文还没展开，挺想继续看这部分和渲染泵收尾的。