• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 访问和管理动态照片资源
2
3动态照片是一种结合了图片和视频的照片形式，可以显示一小段时间的动态画面和声音。可以帮助用户捕捉精彩的动态瞬间，提升创作空间，同时令拍照的容错率更高。
4
5媒体库提供访问和管理动态照片资源的能力，包括：
6
7- [使用安全控件保存动态照片资源](#保存动态照片资源)
8- [获取动态照片对象（MovingPhoto）](#获取动态照片对象)
9- [使用MovingPhotoView播放动态照片](movingphotoview-guidelines.md)
10- [读取动态照片资源](#读取动态照片资源)
11
12拍摄动态照片的能力由Camera Kit提供，可参考[Camera Kit-动态照片](../camera/camera-moving-photo.md)。
13
14## 保存动态照片资源
15
16使用安全控件保存动态照片资源后，可用于获取MovingPhoto对象，从而完成播放动态照片等操作。
17
18使用安全控件保存动态照片资源，无需申请相册管理模块权限'ohos.permission.WRITE_IMAGEVIDEO'，允许用户通过点击按钮临时获取存储权限，并将资源直接保存到指定的媒体库路径，使得操作更为便捷。
19
20详情请参考[安全控件的保存控件](../../reference/apis-arkui/arkui-ts/ts-security-components-savebutton.md)。
21
22**开发步骤**
23
241. 设置安全控件按钮属性。
252. 创建安全控件按钮。
263. 调用[MediaAssetChangeRequest.createAssetRequest](../../reference/apis-media-library-kit/arkts-apis-photoAccessHelper-MediaAssetChangeRequest.md#createassetrequest11)接口新建一个创建资产的变更请求，指定待创建资产的子类型为动态照片。
274. 调用[MediaAssetChangeRequest.addResource](../../reference/apis-media-library-kit/arkts-apis-photoAccessHelper-MediaAssetChangeRequest.md#addresource11)接口指定动态照片的图片和视频内容，动态照片的视频时长不能超过10s。
28
29   以下示例以从应用沙箱的[应用文件](../../file-management/app-file-access.md)fileUri指定动态照片的图片和视频内容为例。
30
31   开发者可根据实际情况，通过ArrayBuffer的方式指定资源内容，参考[MediaAssetChangeRequest.addResource(type: ResourceType, data: ArrayBuffer)](../../reference/apis-media-library-kit/arkts-apis-photoAccessHelper-MediaAssetChangeRequest.md#addresource11-1)。
32
335. 调用[PhotoAccessHelper.applyChanges](../../reference/apis-media-library-kit/arkts-apis-photoAccessHelper-PhotoAccessHelper.md#applychanges11)接口提交创建资产的变更请求。
34
35```ts
36import { photoAccessHelper } from '@kit.MediaLibraryKit';
37import { common } from '@kit.AbilityKit';
38
39@Entry
40@Component
41struct Index {
42  @State message: string = 'Hello World'
43  @State saveButtonOptions: SaveButtonOptions = {
44    icon: SaveIconStyle.FULL_FILLED,
45    text: SaveDescription.SAVE_IMAGE,
46    buttonType: ButtonType.Capsule
47  } // 设置安全控件按钮属性。
48
49  build() {
50    Row() {
51      Column() {
52        Text(this.message)
53          .fontSize(50)
54          .fontWeight(FontWeight.Bold)
55        SaveButton(this.saveButtonOptions) // 创建安全控件按钮。
56          .onClick(async (event, result: SaveButtonOnClickResult) => {
57             if (result == SaveButtonOnClickResult.SUCCESS) {
58               try {
59                 let context: Context = this.getUIContext().getHostContext() as common.UIAbilityContext;
60                 let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);
61                 // 需要确保imageFileUri和videoFileUri对应的资源存在，分别表示待创建到媒体库的动态照片的图片和视频。
62                 let imageFileUri = 'file://com.example.temptest/data/storage/el2/base/haps/entry/files/create_moving_photo.jpg';
63                 let videoFileUri = 'file://com.example.temptest/data/storage/el2/base/haps/entry/files/create_moving_photo.mp4';
64                 let assetChangeRequest: photoAccessHelper.MediaAssetChangeRequest = photoAccessHelper.MediaAssetChangeRequest.createAssetRequest(context, photoAccessHelper.PhotoType.IMAGE, "jpg", {
65                  title: "moving_photo",
66                  subtype: photoAccessHelper.PhotoSubtype.MOVING_PHOTO
67                 });
68                 assetChangeRequest.addResource(photoAccessHelper.ResourceType.IMAGE_RESOURCE, imageFileUri);
69                 assetChangeRequest.addResource(photoAccessHelper.ResourceType.VIDEO_RESOURCE, videoFileUri);
70                 await phAccessHelper.applyChanges(assetChangeRequest);
71                 console.info('create moving photo successfully, uri: ' + assetChangeRequest.getAsset().uri);
72               } catch (err) {
73                 console.error(`create moving photo failed with error: ${err.code}, ${err.message}`);
74               }
75             } else {
76               console.error('SaveButtonOnClickResult create moving photo failed');
77             }
78          })
79      }
80      .width('100%')
81    }
82    .height('100%')
83  }
84}
85```
86
87## 获取动态照片对象
88
89- 应用可以通过Picker的方式获取用户媒体库里的动态照片对象，后续可用于在应用内播放动态照片，或是读取动态照片资源进行其他操作（如上传到应用共享给他人浏览等）。
90
91- 应用也可以通过传入应用沙箱的[应用文件](../../file-management/app-file-access.md)图片和视频fileUri的方式构造应用本地的动态照片对象。
92
93获取到动态照片对象后，如需播放动态照片请使用[MovingPhotoView组件](movingphotoview-guidelines.md)。
94
95### 获取媒体库动态照片对象
96
971. 通过Picker选择动态照片的[媒体文件](../../file-management/user-file-uri-intro.md#媒体文件uri)uri。
982. 调用[PhotoAccessHelper.getAssets](../../reference/apis-media-library-kit/arkts-apis-photoAccessHelper-PhotoAccessHelper.md#getassets-1)和[FetchResult.getFirstObject](../../reference/apis-media-library-kit/arkts-apis-photoAccessHelper-FetchResult.md#getfirstobject-1)接口获取uri对应的PhotoAsset资产。
993. 调用[MediaAssetManager.requestMovingPhoto](../../reference/apis-media-library-kit/arkts-apis-photoAccessHelper-MediaAssetManager.md#requestmovingphoto12)获取PhotoAsset对应的动态照片对象（MovingPhoto）。
100
101```ts
102import { photoAccessHelper } from '@kit.MediaLibraryKit';
103import { dataSharePredicates } from '@kit.ArkData';
104import { common } from '@kit.AbilityKit';
105
106@Entry
107@Component
108struct Index {
109  build() {
110    Row() {
111      Button("example").onClick(async () => {
112        let context: Context = this.getUIContext().getHostContext() as common.UIAbilityContext;
113        let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);
114        example(phAccessHelper, context);
115      }).width('100%')
116    }
117    .height('90%')
118  }
119}
120
121async function example(phAccessHelper: photoAccessHelper.PhotoAccessHelper, context: Context) {
122  try {
123    // picker选择动态照片uri。
124    let photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
125    photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.MOVING_PHOTO_IMAGE_TYPE;
126    photoSelectOptions.maxSelectNumber = 9;
127    let photoViewPicker = new photoAccessHelper.PhotoViewPicker();
128    let photoSelectResult = await photoViewPicker.select(photoSelectOptions);
129    let uris = photoSelectResult.photoUris;
130    for (let i = 0; i < uris.length; i++) {
131      // 获取uri对应的PhotoAsset资产。
132      let predicates: dataSharePredicates.DataSharePredicates = new dataSharePredicates.DataSharePredicates();
133      predicates.equalTo(photoAccessHelper.PhotoKeys.URI, uris[i]);
134      let fetchOption: photoAccessHelper.FetchOptions = {
135        fetchColumns: [],
136        predicates: predicates
137      };
138      let fetchResult: photoAccessHelper.FetchResult<photoAccessHelper.PhotoAsset> = await phAccessHelper.getAssets(fetchOption);
139      let photoAsset: photoAccessHelper.PhotoAsset = await fetchResult.getFirstObject();
140      // 获取PhotoAsset对应的动态照片对象。
141      await photoAccessHelper.MediaAssetManager.requestMovingPhoto(context, photoAsset, {
142        deliveryMode: photoAccessHelper.DeliveryMode.FAST_MODE
143      }, {
144        async onDataPrepared(movingPhoto: photoAccessHelper.MovingPhoto) {
145          if (movingPhoto !== undefined) {
146            // 应用可自定义对movingPhoto的处理逻辑。
147            console.info('request moving photo successfully, uri: ' + movingPhoto.getUri());
148          }
149        }
150      })
151    }
152  } catch (err) {
153    console.error(`request moving photo failed with error: ${err.code}, ${err.message}`);
154  }
155}
156```
157
158### 获取应用沙箱动态照片对象
159
160调用[MediaAssetManager.loadMovingPhoto](../../reference/apis-media-library-kit/arkts-apis-photoAccessHelper-MediaAssetManager.md#loadmovingphoto12)加载应用沙箱的动态照片对象（MovingPhoto）。
161
162```ts
163import { photoAccessHelper } from '@kit.MediaLibraryKit';
164import { common } from '@kit.AbilityKit';
165
166@Entry
167@Component
168struct Index {
169  @State outputText: string = '支持的类型为：\n';
170
171  build() {
172    Row() {
173      Button("example").onClick(async () => {
174        let context: Context = this.getUIContext().getHostContext() as common.UIAbilityContext;
175        example(context);
176      }).width('100%')
177    }
178    .height('90%')
179  }
180}
181
182async function example(context: Context) {
183  try {
184    let imageFileUri = 'file://com.example.temptest/data/storage/el2/base/haps/entry/files/local_moving_photo.jpg';
185    let videoFileUri = 'file://com.example.temptest/data/storage/el2/base/haps/entry/files/local_moving_photo.mp4';
186    let movingPhoto = await photoAccessHelper.MediaAssetManager.loadMovingPhoto(context, imageFileUri, videoFileUri);
187    console.info('load moving photo successfully');
188  } catch (err) {
189    console.error(`load moving photo failed with error: ${err.code}, ${err.message}`);
190  }
191}
192```
193
194## 读取动态照片资源
195
196对于一个动态照片对象，应用可以通过[MovingPhoto.requestContent](../../reference/apis-media-library-kit/arkts-apis-photoAccessHelper-MovingPhoto.md#requestcontent12)导出图片和视频到应用沙箱，或者读取图片或视频的ArrayBuffer内容。
197
198```ts
199import { photoAccessHelper } from '@kit.MediaLibraryKit';
200
201async function example(movingPhoto: photoAccessHelper.MovingPhoto) {
202  try {
203    let imageFileUri = 'file://com.example.temptest/data/storage/el2/base/haps/entry/files/request_moving_photo.jpg';
204    let videoFileUri = 'file://com.example.temptest/data/storage/el2/base/haps/entry/files/request_moving_photo.mp4';
205    await movingPhoto.requestContent(imageFileUri, videoFileUri); // 将动态照片导出到应用沙箱。
206    let imageData = await movingPhoto.requestContent(photoAccessHelper.ResourceType.IMAGE_RESOURCE); // 读取图片的ArrayBuffer内容。
207    let videoData = await movingPhoto.requestContent(photoAccessHelper.ResourceType.VIDEO_RESOURCE); // 读取视频的ArrayBuffer内容。
208  } catch (err) {
209    console.error(`request content of moving photo failed with error: ${err.code}, ${err.message}`);
210  }
211}
212```
213