前端超分辨率技术应用:图像质量提升与场景实践探索-设计篇

超分辨率!

引言

在数字化时代,图像质量对于用户体验的重要性不言而喻。随着显示技术的飞速发展,尤其是移动终端视网膜屏幕的广泛应用,用户对高分辨率、高质量图像的需求日益增长。然而,受限于网络流量、存储空间和图像源质量等因素,获取高分辨率图像并非总是可行的。

超分辨率技术简介

超分辨率图像技术(Super-Resolution Image Technology,简称“超分”)应运而生,旨在通过智能化方法放大图像,提升分辨率,同时去除压缩噪声,从而获得更清晰、更锐利的图像。这项技术的应用场景广泛,包括提升压缩图像的画质、节省存储和流量、以及高质量放大图像等。

为何选择超分辨率技术?

随着显示设备分辨率的逐步提高,尤其是移动终端视网膜屏幕的广泛应用,人们对高分辨率、高质量图像的需求越来越突出。但是,由于网络流量、存储、图像源等诸多原因,我们往往无法获得高分辨率的图像,或者因为JPEG压缩,导致图像质量显著降低。

超分辨率技术的应用场景

  • 抑制压缩噪声:1倍的超分辨率用于提升高压缩率JPEG图像的画质,因为它可以有效去除JPEG的压缩噪声,对于无法找到更清晰图像源的图片,这是一个有效的解决方案。

  • 节省存储和流量:作为图像资源的提供方,我们还可以人为加大JPEG图像的压缩率(主动降低画质),将高压缩率的图像存储,并在网络上传送。图像传送到终端后,再使用1倍超分辨率提升画质,我们就可以在更少的画质损失前提下,进一步压缩图像,节省存储空间,减少流量。

  • 高质量放大图像:3倍的超分辨率不仅能将图像放大3倍(每边各3倍),得到比传统放大更清晰的细节,还能有效抑制原图像中的JPEG压缩噪声,面对越来越高的手机屏幕分辨率,这将大大改善小图像放大浏览时的体验。

业务简介

随着显示设备的分辨率逐步提高,尤其是移动终端视网膜屏幕的广泛应用,人们对高分辨率、高质量图像的需求越来越突出。但是,因为网络流量、存储、图片源等诸多原因,我们往往无法得到高分辨率的图像,或者因为JPEG压缩,导致图像质量显著降低。

总结收益

对于厂商

显著提升商品图片画质,节省流量流量成本,有效改善图片加载卡顿问题。

对于用户:

同等清晰度,数据流量消耗大大降低,图片加载速度更快。

各种不同模型效果对比

How怎么做?

如何选择打造适合项目的超分组件呢

下面以Android为例子

1. 选择合适的深度学习框架

以Android为例,我们进行了多组数据测试,并将部分数据进行汇总。通过比较不同框架的优缺点,我们发现使用华为NPU能力能够充分发挥手机性能、能够满足项目使用。先使用华为官方接口实现相关功能跑通流程,再去使用支持的华为NPU能力第三方框架增加通用性,并选择适合的模型。

类型

厂商

描述

图片

耗时

评价

原图

/

3kb 50x50

/

Tensorflow lite

google

4倍后的图片

gpu

440ms

优点:具有通用性(Android/ios),tensorflow一条龙全家桶很香

缺点:性能相对较差

HUAWEI HIAI

huawei

3倍后的图片

npu

首次初始化30ms

之后就3ms

优点:速度快

缺点:仅华为npu设备可用

ncnn

Tencent

3倍后的图片 gpu

使用的是cli模式运行模型

898ms

陪跑而已 该模式下数据不重要

另一组数据

2. 集成到项目中

当然要跟图片框架结合了,超分辨率技术需要与图片框架结合使用。

我们可以选择老牌王者Glide,或者新晋黑马Coil。Coil是一个高效、轻量级且易于使用的Android图片加载库,它首选Kotlin语言开发,并且使用包含Coroutines、OkHttp、Okio和AndroidX Lifecycles在内的最流行的开源库。

Coil与Glide对比

Coil & Glide v4 快速高效的Android图片加载库

描述

大家对glide比较了解 不清楚的朋友看👆那个官方文档, 说下新晋黑马

Coil特点

1.Coil 首选 Kotlin 语言开发并且使用包含 Coroutines, OkHttp, Okio 和 AndroidX Lifecycles 在内最流行的开源库。

2.动态采样(Dynamic image sampling),简而言之就是可以在内存中只缓存了一个低质量的图片而此时需要显示同一个高质量的图片时,Coil可以先把低质量的图片作为 ImageView 的 placeHolder 并同时去磁盘缓存中读取对应的高质量图片最后以“渐进式”的方式替换并最终显示到视图中,例如最常见的从图片列表到预览大图的场景。对项目有帮助 看看能不能学习一下这个机制,渐进式替换原有生成高清图。

  • 更快: Coil 在性能上做了很多优化,包括内存缓存和磁盘缓存、对内存中的图片进行采样、复用 Bitmap、支持根据生命周期变化自动暂停和取消图片请求等

  • 更轻量级: Coil 大约会给你的 App 增加两千个方法(前提是你的 App 已经集成了 OkHttp 和 Coroutines),Coil 的方法数和 Picasso 相当,相比 Glide 和 Fresco 要轻量级很多

  • 更容易使用: Coil's API 充分利用了 Kotlin 语言的新特性,简化并减少了很多重复代码

  • 更流行: Coil 首选 Kotlin 语言开发,并且使用包含 Coroutines、OkHttp、Okio 和 AndroidX Lifecycles 在内的更现代化的开源库

性能对比

参考数据:coil:1.4.0、glide:4.12.0

在当时版本情况下coil与gilde性能对比

不管是小图还是大图都有些许差距,但现在coil都2.6.0了 可以再对比一次

500k相对大图加载对比
小图加载对比
总结

如果是新项目用到 Coroutines、OkHttp、Okio 和 AndroidX Lifecycles,还是很推荐用Coil的,至于本次项目,当然是全适配咯.

3.具体怎么设计?

1.0版本 在设计超分辨率组件时,可以将核心处理流程封装在一个处理核心库中,并根据不同的图片加载框架(如Glide和Coil)提供相应的包装库。这样的设计既保证了功能的复用性,又提高了组件的灵活性和扩展性。

一个处理核心和为glide和coil框架提供插件

展望

Android移动端超分辨率调研 本来跟着这个填坑来的, 结果埋了更多的坑。目前具体代码 项目已经写完了,再整理一版。

参考资源

华为 HiAI Engine 指南

深度学习框架大PK:TNN决战MNN,ncnn依旧经典

Coil 和 Glide 的 Bitmap 缓存复用机制

Glide VS Coil 性能对比 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/577287.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【报错解决】RuntimeError: CUDA error: out of memory(已解决)

【报错解决】RuntimeError: CUDA error: out of memory(已解决) 【先赞后看养成习惯】求关注点赞收藏 问题描述:在运行python代码中,遇到如下报错 return t.to(device, dtype if t.is_floating_point() or t.is_complex() else N…

153 Linux C++ 通讯架构实战8 ,日志打印实战,设置时区,main函数中顺序调整

日志打印实战 //日志的重要性:供日后运行维护人员去查看、定位和解决问题; //新文件:ngx_printf.cxx以及ngx_log.cxx。 //ngx_printf.cxx:放和打印格式相关的函数; //ngx_log.cxx:放和日志相关…

面向对象-接口

面向对象-接口 1. 接口的概念 ​ 接口就是规范\规则,我们可以使用接口来定义一些规则(比如要求某个方法的方法名必须叫什么,方法的参数列表必须是什么,方法的返回值类型必须是什么) ​ 现实生活中的规范 2. 接口的…

Jenkins拉取github项目相关问题

1.私有仓库问题 1.1如果你的仓库是私有的,21年起github就不支持账号密码的方式拉取代码了 那么就需要在github上面创建一个token (classic) 然后在Jenkins代码设置那里 然后应该就可以顺利打包了。 2.找不到pom(多了一层文件夹)问题 解…

【Flink】Flink 处理函数之基本处理函数(一)

1. 处理函数介绍 流处理API,无论是基本的转换、聚合、还是复杂的窗口操作,都是基于DataStream进行转换的,所以统称为DataStreamAPI,这是Flink编程的核心。 但其实Flink为了更强大的表现力和易用性,Flink本身提供了多…

UE4_Mouse_Interaction——拖拽物体的实现

鼠标拖拽物体,效果如下图: 1、新建PlayerController,更名字为MI_PlayerController,双击打开并设置参数: 2、新建GameMode,更名为MI_Gameinfo。参数如下设置: 3、新建材质,更名为BasicAsset02.参…

matplotlib 绘图

matplotlib 绘图 方便设置legend图例的位置 ax1.legend(loc‘upper center’, bbox_to_anchor(0.3, -0.1)) ax2.legend(loc‘upper center’, bbox_to_anchor(0.6, -0.1)) import numpy as np import matplotlib.pyplot as plt from scipy.stats import norm from scipy.inter…

【SpringCloud】Ribbon负载均衡

🏡浩泽学编程:个人主页 🔥 推荐专栏:《深入浅出SpringBoot》《java对AI的调用开发》 《RabbitMQ》《Spring》《SpringMVC》《项目实战》 🛸学无止境,不骄不躁,知行合一 文章目录 …

3-zookeeper之ZAB协议

Zookeeper ZAB协议 概述 ZAB(Zookeeper Automic Broadcast)是一套专门为Zookeeper设计的用于进行原子广播和崩溃恢复的协议ZAB协议主要包含了两个功能 原子广播:保证数据一致性崩溃恢复:保证集群的高可用 ZAB协议本身是基于2PC算法来进行的设计&#…

JZ-7-201XMT跳位合位监视专用继电器 220VDC 板后接线,面板安装 JOSEF约瑟

系列型号: JZ-7Y-201XMT跳位合位监视继电器; JZ-7J-201XMT跳位合位监视继电器; JZ-7Y-203XMT跳位合位监视继电器; JZ-7J-203XMT跳位合位监视继电器; JZ-7Y-204XMT跳位合位监视继电器; JZ-7J-204XMT跳…

vue 窗口内容滚动到底部

onMounted(() > {scrollToBottom() }) // 滚动到底部方法 const scrollToBottom () > {// 获取聊天窗口容器let chatRoom: any document.querySelector(".chat-content");// 滚动到容器底部chatRoom.scrollTop chatRoom.scrollHeight; } 效果 聊天窗口代码…

python(一)网络爬取

在爬取网页信息时,需要注意网页爬虫规范文件robots.txt eg:csdn的爬虫规范文件 csdn.net/robots.txt User-agent: 下面的Disallow规则适用于所有爬虫(即所有用户代理)。星号*是一个通配符,表示“所有”。 Disallow&…