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/js-apis-photoAccessHelper.md#createassetrequest11)接口新建一个创建资产的变更请求,指定待创建资产的子类型为动态照片。 274. 调用[MediaAssetChangeRequest.addResource](../../reference/apis-media-library-kit/js-apis-photoAccessHelper.md#addresource11)接口指定动态照片的图片和视频内容。 28 29 以下示例以从应用沙箱的[应用文件](../../file-management/app-file-access.md)fileUri指定动态照片的图片和视频内容为例。 30 31 开发者可根据实际情况,通过ArrayBuffer的方式指定资源内容,参考[MediaAssetChangeRequest.addResource(type: ResourceType, data: ArrayBuffer)](../../reference/apis-media-library-kit/js-apis-photoAccessHelper.md#addresource11-1)。 32 335. 调用[PhotoAccessHelper.applyChanges](../../reference/apis-media-library-kit/js-apis-photoAccessHelper.md#applychanges11)接口提交创建资产的变更请求。 34 35```ts 36import { photoAccessHelper } from '@kit.MediaLibraryKit'; 37 38@Entry 39@Component 40struct Index { 41 @State message: string = 'Hello World' 42 @State saveButtonOptions: SaveButtonOptions = { 43 icon: SaveIconStyle.FULL_FILLED, 44 text: SaveDescription.SAVE_IMAGE, 45 buttonType: ButtonType.Capsule 46 } // 设置安全控件按钮属性 47 48 build() { 49 Row() { 50 Column() { 51 Text(this.message) 52 .fontSize(50) 53 .fontWeight(FontWeight.Bold) 54 SaveButton(this.saveButtonOptions) // 创建安全控件按钮 55 .onClick(async (event, result: SaveButtonOnClickResult) => { 56 if (result == SaveButtonOnClickResult.SUCCESS) { 57 try { 58 let context = getContext(); 59 let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context); 60 // 需要确保imageFileUri和videoFileUri对应的资源存在,分别表示待创建到媒体库的动态照片的图片和视频。 61 let imageFileUri = 'file://com.example.temptest/data/storage/el2/base/haps/entry/files/create_moving_photo.jpg'; 62 let videoFileUri = 'file://com.example.temptest/data/storage/el2/base/haps/entry/files/create_moving_photo.mp4'; 63 let assetChangeRequest: photoAccessHelper.MediaAssetChangeRequest = photoAccessHelper.MediaAssetChangeRequest.createAssetRequest(context, photoAccessHelper.PhotoType.IMAGE, "jpg", { 64 title: "moving_photo", 65 subtype: photoAccessHelper.PhotoSubtype.MOVING_PHOTO 66 }); 67 assetChangeRequest.addResource(photoAccessHelper.ResourceType.IMAGE_RESOURCE, imageFileUri); 68 assetChangeRequest.addResource(photoAccessHelper.ResourceType.VIDEO_RESOURCE, videoFileUri); 69 await phAccessHelper.applyChanges(assetChangeRequest); 70 console.info('create moving photo successfully, uri: ' + assetChangeRequest.getAsset().uri); 71 } catch (err) { 72 console.error(`create moving photo failed with error: ${err.code}, ${err.message}`); 73 } 74 } else { 75 console.error('SaveButtonOnClickResult create moving photo failed'); 76 } 77 }) 78 } 79 .width('100%') 80 } 81 .height('100%') 82 } 83} 84``` 85 86## 获取动态照片对象 87 88- 应用可以通过Picker的方式获取用户媒体库里的动态照片对象,后续可用于在应用内播放动态照片,或是读取动态照片资源进行其他操作(如上传到应用共享给他人浏览等)。 89 90- 应用也可以通过传入应用沙箱的[应用文件](../../file-management/app-file-access.md)图片和视频fileUri的方式构造应用本地的动态照片对象。 91 92获取到动态照片对象后,如需播放动态照片请使用[MovingPhotoView组件](movingphotoview-guidelines.md)。 93 94### 获取媒体库动态照片对象 95 961. 通过Picker选择动态照片的[媒体文件](../../file-management/user-file-uri-intro.md#媒体文件uri)uri。 972. 调用[PhotoAccessHelper.getAssets](../../reference/apis-media-library-kit/js-apis-photoAccessHelper.md#getassets-1)和[FetchResult.getFirstObject](../../reference/apis-media-library-kit/js-apis-photoAccessHelper.md#getfirstobject-1)接口获取uri对应的PhotoAsset资产。 983. 调用[MediaAssetManager.requestMovingPhoto](../../reference/apis-media-library-kit/js-apis-photoAccessHelper.md#requestmovingphoto12)获取PhotoAsset对应的动态照片对象(MovingPhoto)。 99 100```ts 101import { photoAccessHelper } from '@kit.MediaLibraryKit'; 102import { dataSharePredicates } from '@kit.ArkData'; 103let context = getContext(this); 104let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context); 105 106async function example() { 107 try { 108 // picker选择动态照片uri 109 let photoSelectOptions = new photoAccessHelper.PhotoSelectOptions(); 110 photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.MOVING_PHOTO_IMAGE_TYPE; 111 photoSelectOptions.maxSelectNumber = 9; 112 let photoViewPicker = new photoAccessHelper.PhotoViewPicker(); 113 let photoSelectResult = await photoViewPicker.select(photoSelectOptions); 114 let uris = photoSelectResult.photoUris; 115 for (let i = 0; i < uris.length; i++) { 116 // 获取uri对应的PhotoAsset资产 117 let predicates: dataSharePredicates.DataSharePredicates = new dataSharePredicates.DataSharePredicates(); 118 predicates.equalTo(photoAccessHelper.PhotoKeys.URI, uris[i]); 119 let fetchOption: photoAccessHelper.FetchOptions = { 120 fetchColumns: [], 121 predicates: predicates 122 }; 123 let fetchResult: photoAccessHelper.FetchResult<photoAccessHelper.PhotoAsset> = await phAccessHelper.getAssets(fetchOption); 124 let photoAsset: photoAccessHelper.PhotoAsset = await fetchResult.getFirstObject(); 125 // 获取PhotoAsset对应的动态照片对象 126 await photoAccessHelper.MediaAssetManager.requestMovingPhoto(context, photoAsset, { 127 deliveryMode: photoAccessHelper.DeliveryMode.FAST_MODE 128 }, { 129 async onDataPrepared(movingPhoto: photoAccessHelper.MovingPhoto) { 130 if (movingPhoto !== undefined) { 131 // 应用可自定义对movingPhoto的处理逻辑 132 console.info('request moving photo successfully, uri: ' + movingPhoto.getUri()); 133 } 134 } 135 }) 136 } 137 } catch (err) { 138 console.error(`request moving photo failed with error: ${err.code}, ${err.message}`); 139 } 140} 141``` 142 143### 获取应用沙箱动态照片对象 144 145调用[MediaAssetManager.loadMovingPhoto](../../reference/apis-media-library-kit/js-apis-photoAccessHelper.md#loadmovingphoto12)加载应用沙箱的动态照片对象(MovingPhoto)。 146 147```ts 148import { photoAccessHelper } from '@kit.MediaLibraryKit'; 149let context = getContext(this); 150 151async function example() { 152 try { 153 let imageFileUri = 'file://com.example.temptest/data/storage/el2/base/haps/entry/files/local_moving_photo.jpg'; 154 let videoFileUri = 'file://com.example.temptest/data/storage/el2/base/haps/entry/files/local_moving_photo.mp4'; 155 let movingPhoto = await photoAccessHelper.MediaAssetManager.loadMovingPhoto(context, imageFileUri, videoFileUri); 156 console.info('load moving photo successfully'); 157 } catch (err) { 158 console.error(`load moving photo failed with error: ${err.code}, ${err.message}`); 159 } 160} 161``` 162 163## 读取动态照片资源 164 165对于一个动态照片对象,应用可以通过[MovingPhoto.requestContent](../../reference/apis-media-library-kit/js-apis-photoAccessHelper.md#requestcontent12)导出图片和视频到应用沙箱,或者读取图片或视频的ArrayBuffer内容。 166 167```ts 168import { photoAccessHelper } from '@kit.MediaLibraryKit'; 169 170async function example(movingPhoto: photoAccessHelper.MovingPhoto) { 171 try { 172 let imageFileUri = 'file://com.example.temptest/data/storage/el2/base/haps/entry/files/request_moving_photo.jpg'; 173 let videoFileUri = 'file://com.example.temptest/data/storage/el2/base/haps/entry/files/request_moving_photo.mp4'; 174 await movingPhoto.requestContent(imageFileUri, videoFileUri); // 将动态照片导出到应用沙箱 175 let imageData = await movingPhoto.requestContent(photoAccessHelper.ResourceType.IMAGE_RESOURCE); // 读取图片的ArrayBuffer内容 176 let videoData = await movingPhoto.requestContent(photoAccessHelper.ResourceType.VIDEO_RESOURCE); // 读取视频的ArrayBuffer内容 177 } catch (err) { 178 console.error(`request content of moving photo failed with error: ${err.code}, ${err.message}`); 179 } 180} 181``` 182