【共创稿事节】鸿蒙图像超分 · 码图清晰工坊-快递面单打码演示、深色工坊 UI、端侧 4× 重建可扫细节HarmonyOS 端侧超分系列第十篇。前面九篇把「照片、老照片、壁纸、文档、电商图、视频帧」都做过一轮这一篇换一个更「硬核」的方向——码图二维码、商品条码、快递面单、设备铭牌。这类图模糊了的后果不是「不好看」而是「扫不出」。本篇把端侧 4× 超分对准它们并且把演示素材换成了一张先打码再处理的真实快递面单。图 1 · DevEco Studio 中编译运行entry模块装到 Mate 60 Pro 模拟器整体深色工坊风为什么是「码图」生活里最常见的场景快递柜前掏出手机扫面单反光加手抖条码糊成一片仓库里扫商品码印刷太细对不上焦。机器识别对码点边缘和细线对比度极度敏感——普通放大只是把模糊像素拉大码点照样糊而端侧 AI 超分是在 NPU 上「重建」细节把边缘的锐度和细线的分离度找回来。这篇的立意很直接先把码点在端侧恢复到可识别再交给扫码。全程数据不出设备面单上的隐私信息也不用上传云端。深色工坊 UI不抄上一版这一版界面没有沿用系列前作那套蓝白卡片整体重做成深色科技风深墨蓝黑底#0B0E14 荧光绿主色#00E5A0 青色点缀工业感拉满顶部是品牌方块图标 胶囊式「演示 / 真机」模式开关一眼分清当前跑在哪条链路选择页把四种码图类型做成2×2 图标卡片网格选中的卡片描绿边高亮。图 2 · 选择页四种码图类型卡片二维码 / 商品条码 / 快递面单 / 设备铭牌当前选中「快递面单 · 输入长边 640px」四种类型不是随便分的它们对应不同的输入降采样长边都落在 NPU 输入范围 [64, 2048] 内码图类型输入长边设计考量二维码320px码点较大优先保证边缘锐利商品条码480px细线密集保留中等细节快递面单640px文字与条码混合需要更多像素设备铭牌560px小字与刻印兼顾细节与速度码点越大、结构越简单需要的输入像素越少面单这类「文字 条码」混合的得给足像素才不会丢字。演示素材一张先打码的快递面单演示模式的素材这次动了真格——用了一张真实快递面单照片但先把上面两处一维码和运单编号打了码马赛克 高斯彻底不可读再按「整图等比缩放 白边填充到 4:3」的方式生成一对低清 / 高清素材严格满足端侧超分固定 4× 约定640×480 4 × 160×120。图 3 · 预览页低清输入 160×120 的面单左上叠尺寸角标下方提示「端侧 4× 超分 · 输出 640×480」条码区域可见已打码隐私在这步就被妥善处理演示图里的条码是无法还原的既能放心演示又不泄露任何真实运单数据。打码用的是一个 Python 脚本核心是「缩到极少块再放大 高斯」的马赛克保证不可还原# test_images/make_express_asset.pydefpixelate_region(img,box):x0,y0,x1,y1box regionimg.crop((x0,y0,x1,y1))# 缩到 12x6 再放大回原尺寸信息彻底打散smallregion.resize((12,6),Image.BILINEAR)mosaicsmall.resize(region.size,Image.NEAREST)img.paste(mosaic.filter(ImageFilter.GaussianBlur(2)),(x0,y0))MASK_BOXES[(145,130,425,240),# 上部条形码 TB6468449686(390,570,635,650),# 下部条形码 TB6468449686]端侧 4× 超分重建不是放大点「开始端侧超分」真机模式下面单交给 Core Vision Kit 的ImageSRAnalyzer在 NPU 上做一次 4× 重建演示模式则直接读预置高清母版。关键是它和普通放大的差别——App 内置了滑动对比一条绿色分割线左边是「普通放大 4×」双线性插值右边是「AI 超分 4×」。图 4 · 分割线拉到最左整幅都是 AI 超分结果面单上的「张三 13842569988」「9988」「95338」等文字锐利清晰把分割线拖到右边就能看到普通放大的真实水平——同样的 4×文字和条码明显发虚码点边缘是糊的。图 5 · 分割线拉到最右整幅都是普通放大文字边缘发虚对比 AI 超分差距一目了然图 6 · 普通放大基线特写双线性放大只是拉大模糊像素细节并没有回来这种「同图同尺寸、只换算法」的同屏对比比任何参数都更能说明 AI 超分的价值。端侧超分调用本身很薄——把低清PixelMap包成ImageData丢给 Core Vision Kit 的ImageSRAnalyzer在 NPU 上一次推理拿回 4× 结果// CodeClarityService.etsimport{imageSuperResolution,visionBase}fromkit.CoreVisionKit;// 创建分析器真机模式this.analyzerawaitimageSuperResolution.ImageSRAnalyzer.create();// 一次 4× 超分privateasyncsuperResolve(low:image.PixelMap):Promiseimage.PixelMap|null{constimageData:visionBase.ImageData{pixelMap:low};constrequest:visionBase.Request{inputData:imageData};constresponse:imageSuperResolution.ISPResponseawaitthis.analyzer.process(request);returnresponse.pixelMap;// 4× 高清结果全程在 NPU}清晰度增益给「变清楚了」一个数光看图还不够App 会算一个清晰度增益。算法是统计两幅图的梯度能量邻域亮度差绝对值之和越高代表边缘越锐利用 AI 超分相对普通放大的能量提升百分比来表示。这张面单的结果是99%——几乎翻倍的边缘能量码点和细线的锐度提升被量化了出来。结果页下方同时给出尺寸变化160×120 → 640×480一眼看清输入输出。梯度能量的计算就是把每个像素转成亮度再累加它与右、下邻居的亮度差绝对值——边缘越锐利这个和越大// PixelOps.ets —— 梯度能量越高越清晰exportfunctiongradientEnergy(data:Uint8Array,w:number,h:number):number{letsum:number0;for(lety0;yh-1;y){for(letx0;xw-1;x){consti(y*wx)*4;constl0.299*data[i]0.587*data[i1]0.114*data[i2];constlr0.299*data[i4]0.587*data[i5]0.114*data[i6];constld0.299*data[iw*4]0.587*data[iw*41]0.114*data[iw*42];sumMath.abs(lr-l)Math.abs(ld-l);}}returnsum;}// 增益 (AI超分能量 / 普通放大能量 - 1) × 100%落盘沙箱结果随手可取超分后的高清图可以一键保存成 PNG写入应用沙箱目录filesDir/sr_code_out不需要申请任何存储权限。图 7 · 保存成功Toast 提示「已保存到应用沙箱」下方显示完整路径与文件大小可复制这意味着整个流程——选图、打码素材演示、NPU 超分、对比、落盘——全部在端侧闭环数据不出设备。滑动对比那条绿色分割线是用PanGesture拖动更新split比例再用clip按这个比例裁掉上层基线图露出下层 AI 超分图// Index.ets —— 滑动对比拖动分割线clip 裁剪上层基线Stack(){Image(this.result.hdPm)// 底层AI 超分满铺.objectFit(ImageFit.Cover)Image(this.result.baselinePm)// 上层普通放大只露出左侧 split 比例.objectFit(ImageFit.Cover).clip(newRect({width:${this.split*100}%,height:100%}))Column()// 绿色分割竖线.width(2).height(100%).backgroundColor(#00E5A0).position({x:${this.split*100}%,y:0})}.gesture(PanGesture({direction:PanDirection.Left|PanDirection.Right}).onActionUpdate((e:GestureEvent){letsthis.startSplite.offsetX/this.fullW;this.splitMath.max(0,Math.min(1,s));// 分割线比例 0~1}))工程结构与边界工程是标准的 HarmonyOSentry模块独立包名com.example.codeclarityCodeClarityService单例服务封装演示素材加载、相册解码降采样、NPU 超分、PNG 落盘PixelOps双线性放大基线 梯度能量计算给对比和增益提供数据Index.ets三阶段界面选择 → 预览 → 结果深色工坊 UI。需要说明的边界也很清楚本工程只做图像超分不做扫码校验——它负责把码点恢复清晰但不调用扫码能力去验证「是否真扫得出」也不保证超分后的码 100% 可扫。演示素材是内置打码样例真机效果依赖设备端 Core Vision Kit。小结把端侧超分从「美化照片」拉到了「拯救识别」对准码图这类「模糊即失效」的目标用 NPU 4× 重建找回码点与细线配上一张先打码的快递面单做演示隐私安全深色工坊 UI 从头重做滑动对比 清晰度增益让「变清楚了」既看得见也算得出结果落盘沙箱全程数据不出设备。