鸿蒙开发(18)---加载网络图片

简介: 鸿蒙开发(18)---加载网络图片

加载网络图片


在实际的项目中,我们并不总是显示资源文件的图片,在浏览资讯、微博时,基本上都是要从网络上进行加载的。


所以,掌握网络图片加载,或者说网络获取的相关知识,才是真正开发App的基础。当然,网络任务不能在主线程中进行,其中还涉及线程的相关知识。


获取网络图片

首先,我们需要获取网络图片。


一般来说,我们都是通过网址请求获取图片的输入流InputStream。示例代码如下所示(HttpsUtils):

public class HttpsUtils {
    private static InputStream inputStream;
    private static HttpsURLConnection connection;
    public static InputStream getInputStream(String urlStr,String methodType) {
        NetManager netManager = NetManager.getInstance(null);
        if (!netManager.hasDefaultNet()) {
            return null;
        }
        NetHandle netHandle = netManager.getDefaultNet();
        try {
            URL url = new URL(urlStr);
            URLConnection urlConnection = netHandle.openConnection(url, java.net.Proxy.NO_PROXY);
            if (urlConnection instanceof HttpsURLConnection) {
                connection = (HttpsURLConnection) urlConnection;
            }
            connection.setRequestMethod(methodType);
            connection.connect();
            inputStream = connection.getInputStream();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return inputStream;
    }
    public static void closeStream() {
        try {
            if (inputStream == null) {
                return;
            }
            inputStream.close();
            if (connection == null) {
                return;
            }
            connection.disconnect();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}


如上面代码所示,我们获取图片,或者说获取网络信息主要分为4个步骤:


1.调用NetManager.getInstance(Context)获取网络管理的实例对象。

2.调用NetManager.getDefaultNet()获取默认的数据网络。

3.调用NetHandle.openConnection()打开一个URL。

4.通过URL链接实例访问网站或图片网址。


因为这里不仅涉及网络的请求,还涉及网络的管理。所以除了网络权限之外,我们还需要设置2个网络权限config.json:

"module": {
    "reqPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      },
      {
        "name": "ohos.permission.GET_NETWORK_INFO"
      },
      {
        "name": "ohos.permission.SET_NETWORK_INFO"
      }
    ],
}


当然,因为你没有主动切换网络,可以不用SET_NETWORK_INFO权限,但GET_NETWORK_INFO是必须的。


将图片输入流转换为PixelMap

因为我们的Image组件只能添加资源文件,以及PixelMap格式的图片。所以,我们需要将获取的网络数据转换为PixelMap。代码如下:

public class ImageUtils {
    public static PixelMap createPixelMap(String imageUrl) {
        InputStream inputStream = HttpsUtils.getInputStream(imageUrl, RequestMethod.GET.name());
        ImageSource.SourceOptions sourceOptions = new ImageSource.SourceOptions();
        sourceOptions.formatHint = "image/jpeg";
        ImageSource imageSource = ImageSource.create(inputStream,sourceOptions);
        PixelMap pixelMap = imageSource.createPixelmap(null);
        HttpsUtils.closeStream();
        return pixelMap;
    }
}


如上面代码所示,将InputStream转换为PixelMap分为以下4步骤:


1.首先创建SourceOptions,指定图片的格式

2.然后通过ImageSource.create()创建ImageSource

3.最后,通过imageSource.createPixelmap创建pixelMap


子线程进行网络请求

到这里,我们就完成了图片的获取,并且可以将获取的网络图片设置到Image组件中。


但是有GUI开发经验的程序员都应该知道,耗时任务(网络请求)是不能在主线程运行的,因为这样会造成卡顿。


所以,我们需要使用鸿蒙提供给我们的线程进行处理。示例如下:

public class MainAbilitySlice extends AbilitySlice {
    HiLogLabel TAG = new HiLogLabel(HiLog.LOG_APP, 0x00201, "TAG");
    private Button button;
    private Image image;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        this.button=(Button)findComponentById(ResourceTable.Id_ability_main_button);
        this.image = (Image) findComponentById(ResourceTable.Id_ability_main_image);
        this.button.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                TaskDispatcher refreshUITask = createParallelTaskDispatcher("", TaskPriority.DEFAULT);
                refreshUITask.syncDispatch(()->{
                    PixelMap pixelMap = ImageUtils.createPixelMap("https://images-1300376177.cos.ap-shanghai.myqcloud.com/homepage1.jpg");
                    getContext().getUITaskDispatcher().asyncDispatch(new Runnable() {
                        @Override
                        public void run() {
                            //Image组件填充位图数据,ui界面更新
                            image.setPixelMap(pixelMap);
                            pixelMap.release();
                        }
                    });
                });
            }
        });
    }
}


ParallelTaskDispatcher:并发任务分发器,由Ability执行createParallelTaskDispatcher()创建并返回。


UITaskDispatcher:绑定到应用主线程的专有任务分发器, 由Ability执行getUITaskDispatcher()创建并返回。


网络请求枚举类

当然,上面的RequestMethod.GET.name()是一个枚举类,用于定义网络请求的各种方式。代码如下:

public enum RequestMethod {
    GET("GET"),
    POST("POST"),
    HEAD("HEAD"),
    OPTIONS("OPTIONS"),
    PUT("PUT"),
    DELETE("DELETE"),
    TRACE("TRACE");
    private String method;
    RequestMethod(String method) {
        this.method = method;
    }
    public String getMethod() {
        return method;
    }
    public void setMethod(String method) {
        this.method = method;
    }
}
}

运行之后,效果如下:


相关文章
|
5天前
|
网络协议 安全 网络安全
Python网络编程详解:Socket套接字的使用与开发
探索Python网络编程:本文详述Socket套接字,关键组件用于设备间通信。理解Socket类型(TCP/UDP),学习创建、绑定、监听、发送/接收数据步骤。示例展示服务端和客户端实现,及Socket聊天室应用。了解并发处理、错误处理和网络安全。通过学习,提升网络应用开发技能。参考书籍深入学习。
128 2
|
5天前
|
机器学习/深度学习 自然语言处理 数据处理
大模型开发:描述长短期记忆网络(LSTM)和它们在序列数据上的应用。
LSTM,一种RNN变体,设计用于解决RNN处理长期依赖的难题。其核心在于门控机制(输入、遗忘、输出门)和长期记忆单元(细胞状态),能有效捕捉序列数据的长期依赖,广泛应用于语言模型、机器翻译等领域。然而,LSTM也存在计算复杂度高、解释性差和数据依赖性强等问题,需要通过优化和增强策略来改进。
|
5天前
|
机器学习/深度学习
大模型开发:解释卷积神经网络(CNN)是如何在图像识别任务中工作的。
**CNN图像识别摘要:** CNN通过卷积层提取图像局部特征,池化层减小尺寸并保持关键信息,全连接层整合特征,最后用Softmax等分类器进行识别。自动学习与空间处理能力使其在图像识别中表现出色。
28 2
|
5天前
|
网络协议 C++
C++ Qt开发:QTcpSocket网络通信组件
`QTcpSocket`和`QTcpServer`是Qt中用于实现基于TCP(Transmission Control Protocol)通信的两个关键类。TCP是一种面向连接的协议,它提供可靠的、双向的、面向字节流的通信。这两个类允许Qt应用程序在网络上建立客户端和服务器之间的连接。Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍如何运用`QTcpSocket`组件实现基于TCP的网络通信功能。
49 8
C++ Qt开发:QTcpSocket网络通信组件
|
2天前
|
前端开发 网络安全
【XSS平台】使用,网络安全开发必学
【XSS平台】使用,网络安全开发必学
|
5天前
|
监控 网络安全
LabVIEW开发干扰对无线网络基础设施进行隐蔽影响测试
LabVIEW开发干扰对无线网络基础设施进行隐蔽影响测试
13 0
|
5天前
|
机器学习/深度学习 传感器 算法
LabVIEW开发基于神经网络的自动汽车制动系统
LabVIEW开发基于神经网络的自动汽车制动系统
|
5天前
|
JSON 网络协议 调度
LabVIEW开发TCP网络通讯程序4
LabVIEW开发TCP网络通讯程序4
|
5天前
|
XML JSON 网络协议
LabVIEW开发TCP网络通讯程序3
LabVIEW开发TCP网络通讯程序3
|
5天前
|
网络协议 测试技术
LabVIEW开发TCP网络通讯程序2
LabVIEW开发TCP网络通讯程序2
11 2

热门文章

最新文章