写点什么

开源一夏|OpenHarmony 如何选择图片在 Image 组件上显示(eTS)

作者:坚果
  • 2022 年 8 月 10 日
    浙江
  • 本文字数:1357 字

    阅读完需:约 4 分钟

OpenHarmony 如何选择图片在 Image 组件上显示(eTS)

相信大家都会有这样的一个使用场景,就是将图片选择



那么,我们来看一下如何使用,

导入模块

import mediaLibrary from '@ohos.multimedia.mediaLibrary';
复制代码

mediaLibrary.getMediaLibrary8+

getMediaLibrary(context: Context): MediaLibrary

获取媒体库的实例,用于访问和修改用户等个人媒体数据信息(如音频、视频、图片、文档等)。

系统能力:SystemCapability.Multimedia.MediaLibrary.Core

参数:


startMediaSelect(deprecated)

startMediaSelect(option: MediaSelectOption): Promise<Array<string>>

启动媒体选择界面,以异步方法获取选择的媒体 URI 列表,使用 Promise 形式返回结果。

说明: 从 API Version 9 开始废弃。

系统能力:SystemCapability.Multimedia.MediaLibrary.Core

参数:

返回值:

示例:

let option = {  type : "image",  count : 2};mediaLibrary.getMediaLibrary().startMediaSelect(option).then((value) => {  console.log("Media resources selected.");  // Obtain the media selection value.}).catch((err) => {  console.log("An error occurred when selecting media resources.");});
复制代码


最后附上完整代码

// @ts-nocheck/* * Copyright (c) 2022 JianGuo Device Co., Ltd. * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * *    http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. *//**       * @ProjectName : nutsStudy  * @FileName :  file  * @Author : 坚果  * @Time : 2022/8/9 15:57  * @Description : 文件描述  */import mediaLibrary from '@ohos.multimedia.mediaLibrary';@Entry@Componentstruct FileSample {  @State imgList: Array<string> = [];  build() {    Column() {      Text("测试").fontSize(80).onClick(() => {        let option = {          type: "image",          count: 2        };        mediaLibrary.getMediaLibrary().startMediaSelect(option, (err, value) => {          if (err) {            console.log("An error occurred when selecting media resources." + err);            return;          }          console.log("图片路径是:" + value);          this.imgList = value;        });      })      ForEach(this.imgList, (item: any, index?: number) => { // 循环数组创建每一个Item        Image(item) // 可以生成一个或多个子组件          .width("20%").height("20%")      })    }.width("100%").height("100%")  }}
复制代码



参考文档

媒体库管理

Image


发布于: 2022 年 08 月 10 日阅读数: 65
用户头像

坚果

关注

此间若无火炬,我便是唯一的光 2020.10.25 加入

公众号:“大前端之旅”,华为云享专家,InfoQ签约作者,51CTO博客首席体验官,专注于大前端技术的分享,包括Flutter,小程序,安卓,VUE,JavaScript。

评论 (2 条评论)

发布
用户头像
每次看到坚果老师在文章最后都会把所讲的源码毫无保留的晒出来,真的是饱含开源精神的鸿蒙步道大神~哈哈
2022 年 08 月 12 日 11:53 · 上海
回复
前几天有个小伙伴问到了,就做了一下
2022 年 08 月 12 日 12:56 · 浙江
回复
没有更多了
开源一夏|OpenHarmony如何选择图片在Image组件上显示(eTS)_开源_坚果_InfoQ写作社区