OpenHarmony实战开发-图片选择和下载保存案例。

介绍

本示例介绍图片相关场景的使用:包含访问手机相册图片、选择预览图片并显示选择的图片到当前页面,下载并保存网络图片到手机相册或到指定用户目录两个场景。

效果图预览

在这里插入图片描述
使用说明

  • 从主页通用场景集里选择图片选择和下载保存进入首页。
  • 分两个场景
  • 点击“下载保存图片”文字,“下载网络图片到手机相册”场景示例。点击“下载”按钮,将图片保存到图库。点击“下载到指定路径”按钮,将图片保存到用户选择的指定路径,
  • 点击“选择图片”文字进入”访问手机相册图片预览并选择”场景示例。点击下部“+”选择图片并显示到页面中。

实现思路

场景1:访问手机相册图片预览并选择

通过photoViewPicker.select()拉起图库界面,用户可以预览并选择一个或多个文件,即可实现拉起手机相册并进行图片的预览与选择。

1.创建文件类型为图片的,并最大预览数量为2的图库实例

async getFileAssetsFromType(){const photoSelectOptions = new picker.PhotoSelectOptions(); // 创建图库对象实例photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; // 选择媒体文件类型为ImagephotoSelectOptions.maxSelectNumber = 2; // 选择媒体文件的最大数目}

2.通过photoViewPicker.select()接口,通过传入参数PhotoSaveOptions图库对象,获取返回的用户选择的图片信息。

async getFileAssetsFromType(){  photoViewPicker.select(photoSelectOptions).then((photoSelectResult) => { this.uris = photoSelectResult.photoUris; // select返回的uri权限是只读权限,需要将uri写入全局变量@State中即可根据结果集中的uri进行读取文件数据操作。}).catch((err: BusinessError) => {console.info('Invoke photoViewPicker.select failed, code is ${err.code},message is ${err.message}');})}

场景2:下载并保存网络图片

1.通过http中request方法获取在线图片数据。

http.createHttp().request('https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/Shopping/OrangeShopping/feature/navigationHome/src/main/resources/base/media/product002.png',(error: BusinessError, data: http.HttpResponse) => {if (error) {promptAction.showToast({message: $r('app.string.image_request_fail'),duration: 2000})return}this.transcodePixelMap(data);if (data.result instanceof ArrayBuffer) {this.imageBuffer = data.result as ArrayBuffer;}})

2.使用createPixelMap方法将获取到的图片数据转换成pixelmap展示到页面中

// 将ArrayBuffer类型的图片装换为PixelMap类型
transcodePixelMap(data: http.HttpResponse) {let code: http.ResponseCode | number = data.responseCode;if (ResponseCode.ResponseCode.OK === code) {let imageData: ArrayBuffer = data.result as ArrayBuffer;let imageSource: image.ImageSource = image.createImageSource(imageData);class tmp {height: number = 100;width: number = 100;};let options: Record<string, number | boolean | tmp> = {'alphaType': 0, // 透明度'editable': false, // 是否可编辑'pixelFormat': 3, // 像素格式'scaleMode': 1, // 缩略值'size': { height: 100, width: 100 }}; // 创建图片大小imageSource.createPixelMap(options).then((pixelMap: PixelMap) => {this.image = pixelMap;this.isShow = true});}
}

3.将图片保存到图库或者用户选择的路径

  • 使用getPhotoAccessHelper、createAsset、fs.open、fs.write等接口将数据存到本地图库中
async saveImage(buffer: ArrayBuffer | string): Promise<void> {let context = getContext(this) as common.UIAbilityContext;let helper = photoAccessHelper.getPhotoAccessHelper(context);let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg');let file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);await fs.write(file.fd, buffer);await fs.close(file.fd);}
  • 使用photoViewPicker.save、fs.open、fs.write等接口将数据存到用户选择路径的数据库中
async pickerSave(buffer: ArrayBuffer | string): Promise<void> {const photoSaveOptions = new picker.PhotoSaveOptions(); // 创建文件管理器保存选项实例photoSaveOptions.newFileNames = ['PhotoViewPicker ' + new Date().getTime() + 'jpg'] // 保存文件名(可选)const photoViewPicker = new picker.PhotoViewPicker;photoViewPicker.save(photoSaveOptions).then(async (photoSvaeResult) => {console.info('PhotoViewPicker.save successfully,photoSvaeResult uri:' + JSON.stringify(photoSvaeResult));let uri = photoSvaeResult[0];let file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);await fs.write(file.fd, buffer);await fs.close(file.fd);promptAction.showToast({message: $r('app.string.image_request_success'),duration: 2000})})}

高性能知识点

不涉及

工程结构&模块类型

picturemanage                                   // har类型
|---src/main/ets/components
|   |---SelectPictures.ets                      // 场景一:访问手机相册图片预览并选择 
|   |---SaveNetWorkPictures.ets                 // 场景二:下载网络图片并保存到手机相册或用户选择的文件夹
|   |---PictureManage.ets                       // 视图层-主页面,三个场景入口

模块依赖

依赖har包-common库中UX标准

为了帮助大家更深入有效的学习到鸿蒙开发知识点,小编特意给大家准备了一份全套最新版的HarmonyOS NEXT学习资源,获取完整版方式请点击→HarmonyOS教学视频:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

HarmonyOS教学视频:语法ArkTS、TypeScript、ArkUI等…视频教程

在这里插入图片描述
在这里插入图片描述

鸿蒙生态应用开发白皮书V2.0PDF: 获取完整版白皮书方式请点击→https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG?u=a42c4946d1514235863bb82a7b2ac128

在这里插入图片描述

鸿蒙 (Harmony OS)开发学习手册→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

一、入门必看

1.应用开发导读(ArkTS)
2………
在这里插入图片描述

二、HarmonyOS 概念→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.系统定义
2.技术架构
3.技术特性
4.系统安全
5…

在这里插入图片描述

三、如何快速入门?→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3…

在这里插入图片描述

四、开发基础知识→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
在这里插入图片描述

五、基于ArkTS 开发→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
在这里插入图片描述

更多了解更多鸿蒙开发的相关知识可以参考:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

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

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

相关文章

Linux UDP通信系统

目录 一、socket编程接口 1、socket 常见API socket()&#xff1a;创建套接字 bind()&#xff1a;将用户设置的ip和port在内核中和我们的当前进程关联 listen() accept() 2、sockaddr结构 3、inet系列函数 二、UDP网络程序—发送消息 1、服务器udp_server.hpp initS…

Hadoop HDFS:海量数据的存储解决方案

引言 在大数据时代&#xff0c;数据的存储与处理成为了业界面临的一大挑战。Hadoop的分布式文件系统&#xff08;Hadoop Distributed File System&#xff0c;简称HDFS&#xff09;作为一个高可靠性、高扩展性的文件系统&#xff0c;提供了处理海量数据的有效解决方案。本文将…

stm32开发之threadx整合letter-shell 组件记录

前言 使用过rt-thread的shell 命令交互的方式&#xff0c;觉得比较方便,所以在threadx中也移植个shell的组件。这里使用的是letter-shellletter-shell 核心的逻辑在于组件通过链接文件自动初始化或自动添加的两种方式&#xff0c;方便开发源码仓库 实验(核心代码) shell 线程…

rhce day1

一 . 在系统中设定延迟任务要求如下 在系统中建立 easylee 用户&#xff0c;设定其密码为 easylee 延迟任务由 root 用户建立 要求在 5 小时后备份系统中的用户信息文件到 /backup 中 确保延迟任务是使用非交互模式建立 确保系统中只有 root 用户和 easylee 用户可以执行延…

✌粤嵌—2024/3/11—跳跃游戏

代码实现&#xff1a; 方法一&#xff1a;递归记忆化 int path; int used[10000];bool dfs(int *nums, int numsSize) {if (path numsSize - 1) {return true;}for (int i 1; i < nums[path]; i) {if (used[path i]) {continue;}path i;used[path] 1;if (dfs(nums, num…

“华为杯“华南理工大学程序设计竞赛 L-再一道好题

题目 #include<bits/stdc.h> using namespace std; #define int long long #define pb push_back #define fi first #define se second const int maxn 1e6 5; const int inf 1e9 5;using namespace std;int n, m;void solve(){int res 0;int q;string s;int k;cin …

北京市为例的空气质量分析报告分析【免费送】

原始数据&#xff1a; 日期名称类型所属区拥挤指数速度客流指数20240405世界之花假日广场购物;购物中心大兴区2.46621.369.4920240405华润五彩城购物;购物中心海淀区2.01329.7111.1720240405北京市百货大楼购物;购物中心东城区1.85615.938.2320240405apm购物;购物中心东城区1.…

C#开源项目推荐

winform界面开发 SunnyUI SharpSCADALite工业控制数据采集 https://github.com/qwe7922142/SharpSCADALite net中国集合优秀Net项目 https://gitee.com/dotnetchina 数据库管理系统 https://gitee.com/dotnetchina/SmartSQL 工作流项目 RoadFlow-UnMean 网口通讯 weaving-…

Grok-1.5 Vision:X AI发布突破性的多模态AI模型,超越GPT 4V

在人工智能领域&#xff0c;多模态模型的发展一直是科技巨头们竞争的焦点。 近日&#xff0c;马斯克旗下的X AI公司发布了其最新的多模态模型——Grok-1.5 Vision&#xff08;简称Grok-1.5V&#xff09;&#xff0c;这一模型在处理文本和视觉信息方面展现出了卓越的能力&#x…

Python统计模型线性推理事件前因后果

&#x1f3af;要点 经典统计方法&#xff1a;&#x1f58a; A/B测试&#xff0c;计算两个均值样本的置信区间&#xff0c;&#x1f58a;最小二乘法计算变量估值&#xff0c;&#x1f58a;使用非线性关系式表示线性回归。&#x1f58a;实例&#xff1a;高等教育和数学高分的事件…

批量导入照片

clear clc close all % 创建或获取演示文稿对象 ppt Presentation(new_presentation.pptx, 演示文稿1.pptx); open(ppt); % 添加新的幻灯片 slide1 add(ppt, Title Slide); % 指定第一张图片路径 imagePath1 C:\Users\Administrator\Desktop\001\阵风因子-横风向图20…

Linux usermod命令教程:如何修改用户属性(附案例详解和注意事项)

Linux usermod命令介绍 usermod命令是Linux系统中用来修改用户属性的命令。它可以修改用户的登录名、家目录、登录shell、用户组等信息。 Linux usermod命令适用的Linux版本 usermod命令在大多数Linux发行版中都是可用的&#xff0c;包括Debian、Ubuntu、Alpine、Arch Linux…

即席查询笔记

文章目录 一、Kylin4.x1、Kylin概述1.1 定义1.2 Kylin 架构1.3 Kylin 特点1.4 Kylin4.0 升级 2、Kylin 环境搭建2.1 简介2.2 Spark 安装和部署2.3 Kylin 安装和部署2.4 Kylin 启动环境准备2.5 Kylin 启动和关闭 3、快速入门3.1 数据准备3.2 Kylin项目创建入门3.3 Hive 和 Kylin…

Canvas图形编辑器-数据结构与History(undo/redo)

Canvas图形编辑器-数据结构与History(undo/redo) 这是作为 社区老给我推Canvas&#xff0c;于是我也学习Canvas做了个简历编辑器 的后续内容&#xff0c;主要是介绍了对数据结构的设计以及History能力的实现。 在线编辑: https://windrunnermax.github.io/CanvasEditor开源地…

【个人博客搭建】(3)添加SqlSugar ORM

1、安装sqlsugar。在models下的依赖项那右击选择管理Nuget程序包&#xff0c;输入sqlsugarcore&#xff08;因为我们用的是netcore&#xff0c;而不是net famework所以也对应sqlsugarcore&#xff09;&#xff0c;出来的第一个就是了&#xff0c;然后点击选择版本&#xff0c;一…

esp32联网获取时间和天气(四)

说明 本章节需要先学习之前&#xff08;三&#xff09;中获取当前时间方法&#xff0c;本文基于platformIO&#xff0c;需提前安装timelib库&#xff0c;可以参考之前&#xff08;三&#xff09; 代码 代码如下&#xff0c;需要一点http知识&#xff0c;可以自行百度 #incl…

密码学 | 椭圆曲线 ECC 密码学入门(四)

目录 正文 1 曲线方程 2 点的运算 3 求解过程 4 补充&#xff1a;有限域 ⚠️ 知乎&#xff1a;【密码专栏】动手计算双线性对&#xff08;中&#xff09; - 知乎 ⚠️ 写在前面&#xff1a;本文属搬运博客&#xff0c;自己留着学习。注意&#xff0c;这篇博客与前三…

代码随想录算法训练营Day56|LC583 两个字符串的删除操作LC72 编辑距离

一句话总结&#xff1a;看起来复杂&#xff0c;动规分析以后就比较简单。 原题链接&#xff1a;583 两个字符串的删除操作 本质就是求两个字符串的最短子序列的长度。已经做过&#xff0c;不再详解。 class Solution {public int minDistance(String word1, String word2) {/…

Day13-Java基础之运算符和表达式

运算符和表达式 运算符&#xff1a; 就是对常量或者变量进行操作的符号。 比如&#xff1a; - * / 表达式&#xff1a; 用运算符把常量或者变量连接起来的&#xff0c;符合Java语法的式子就是表达式。 比如&#xff1a;a b 这个整体就是表达式。 而其中是算术运算符的…