今天的内容是介绍在鸿蒙开发中从相册选择照片,和调用相机拍照,并使用这两个功能实现朋友圈编辑页面。
这部分内容没什么好废话的,都是固定用法,直接上代码。
首先添加权限:
ohos.permission.CAMERAohos.permission.READ_IMAGEVIDEO
选择相册:
async getAlbum() {const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型为IMAGEphotoSelectOptions.maxSelectNumber = 5; // 选择媒体文件的最大数目let uris: Array<string> = [];const photoViewPicker = new photoAccessHelper.PhotoViewPicker();photoViewPicker.select(photoSelectOptions).then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => {uris = photoSelectResult.photoUris;uris.forEach(element => {this.photoList.push(element)});console.info('photoViewPicker.select to file succeed and uris are:' + uris);}).catch((err: BusinessError) => {console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);})}
调用相机:
async invokeCamera(callback: (uri: string) => void) {try {let pickerProfile: cameraPicker.PickerProfile = {cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK};let pickerResult: cameraPicker.PickerResult = await cameraPicker.pick(getContext(),[cameraPicker.PickerMediaType.PHOTO, cameraPicker.PickerMediaType.VIDEO], pickerProfile);console.log("the pick pickerResult is:" + JSON.stringify(pickerResult));if (callback && pickerResult) {callback(pickerResult.resultUri);}} catch (error) {let err = error as BusinessError;console.error(`the pick call failed. error code: ${err.code}`);}}
整个页面完整代码如下:
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { cameraPicker } from '@kit.CameraKit';
import { camera } from '@kit.CameraKit';
import { AlertSheet } from './AlertSheet';@Entry
@Component
struct Index {@State photoList:string[] = []dialogController: CustomDialogController | null = new CustomDialogController({builder: AlertSheet({titles:['拍照','相册'],itemClick:(str)=>{switch (str){case '拍照':this.invokeCamera((url)=>{this.photoList.push(url)})break;case '相册':this.getAlbum()break;}}}),alignment: DialogAlignment.Bottom,offset: { dx: 0, dy: -25 }})async getAlbum() {const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型为IMAGEphotoSelectOptions.maxSelectNumber = 5; // 选择媒体文件的最大数目let uris: Array<string> = [];const photoViewPicker = new photoAccessHelper.PhotoViewPicker();photoViewPicker.select(photoSelectOptions).then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => {uris = photoSelectResult.photoUris;uris.forEach(element => {this.photoList.push(element)});console.info('photoViewPicker.select to file succeed and uris are:' + uris);}).catch((err: BusinessError) => {console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);})}async invokeCamera(callback: (uri: string) => void) {try {let pickerProfile: cameraPicker.PickerProfile = {cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK};let pickerResult: cameraPicker.PickerResult = await cameraPicker.pick(getContext(),[cameraPicker.PickerMediaType.PHOTO, cameraPicker.PickerMediaType.VIDEO], pickerProfile);console.log("the pick pickerResult is:" + JSON.stringify(pickerResult));if (callback && pickerResult) {callback(pickerResult.resultUri);}} catch (error) {let err = error as BusinessError;console.error(`the pick call failed. error code: ${err.code}`);}}build() {Column(){TextArea({placeholder:'这一刻的想法'}).placeholderFont({size:16}).placeholderColor('rgb(188,188,188)').width('100%').height(100).backgroundColor(Color.White)Grid(){ForEach(this.photoList,(str:string,index)=>{GridItem(){Image(str).width(90).height(90)}})GridItem(){Image($r('app.media.add')).width(90).height(90).onClick(()=>{this.dialogController?.open()})}}.columnsGap(10).rowsGap(10).columnsTemplate('1fr 1fr 1fr 1fr')}.padding({left:15,right:15,top:40})}
}