【HarmonyOSNext】图片选择方案

背景

---

封装一个选择图片和调用拍照相机的按钮，展示api13下选择图片和调用相机，可以使用不申请用户权限的方式，进行图片的选择和修改。但是，目前方案并未包含上传图片保存的功能，仅提供图片选择或者拍照后，图片展示的一种方案。

项目架构

Common ：公共操作类存放文件夹PromptActionClass：全局弹窗操作类components：公共弹窗组件文件夹SelectImageDialog：选择图片弹窗组件pages->Index：入口界面 重要方法解析

---

调用相机拍照 添加camera, cameraPicker的外部引用 import { camera, cameraPicker } from '@kit.CameraKit'; 使用cameraPicker的pick方法实现安全调用设备相机，并返回选择结果cameraPicker.PickerResult对象，通过设置cameraPicker.PickerProfile对象属性实现对相机的初始化属性设置。 try { //配置相机设置 let pickerProfile: cameraPicker.PickerProfile = { cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK, }; let result: cameraPicker.PickerResult = await cameraPicker.pick(getContext(), [cameraPicker.PickerMediaType.PHOTO], pickerProfile); if (result.resultCode == 0) { await this.UpdateShowImage(result.resultUri); } PromptActionClass.CloseDialog(); return true; } catch (e) { console.info(e); return false; } 访问图库选择图片 添加PromptActionClass的外部引用 import { PromptActionClass } from '../Common/PromptActionClass'; 使用photoAccessHelper.PhotoViewPicker对象的select方法，实现安全调用相册并选择图片。通过photoAccessHelper.PhotoSelectOptions对象，对选择方法进行初始化，可以设置默认选择、选择数量、选择类型等。 try { const photoSelectOpt = new photoAccessHelper.PhotoSelectOptions(); //设置选择类型 photoSelectOpt.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; //选择图片最大数量 photoSelectOpt.maxSelectNumber = 1; //图片选择器 const photoPicker = new photoAccessHelper.PhotoViewPicker(); const selectResult: photoAccessHelper.PhotoSelectResult = await photoPicker.select(photoSelectOpt) let uri: string = ""; if (selectResult.isOriginalPhoto || selectResult.photoUris.length == 0) { return false; } uri = selectResult.photoUris[0]; await this.UpdateShowImage(uri); PromptActionClass.CloseDialog(); return true; } catch (e) { console.info(e); return false; } 整体代码

---

Index import { image } from '@kit.ImageKit'; import { photoAccessHelper } from '@kit.MediaLibraryKit'; import { fileIo } from '@kit.CoreFileKit'; import { PromptActionClass } from '../Common/PromptActionClass'; import { SelectImageDialog } from '../components/SelectImageDialog'; import { camera, cameraPicker } from '@kit.CameraKit'; @Entry @ComponentV2 struct Index { @Local ShowImage: ResourceStr | PixelMap = $r('app.media.AddImageIcon') aboutToAppear(): void { PromptActionClass.SetContext(this.getUIContext()); PromptActionClass.SetOptions({ builder: () => { this.PictureBuilder() }, alignment: DialogAlignment.Bottom, cornerRadius: { topLeft: 20, topRight: 20, bottomLeft: 20, bottomRight: 20 }, height: 154, width: "90%", }) } build() { RelativeContainer() { Button() { Image(this.ShowImage) .width("100%") .borderRadius(20) .padding(10) } .width(120) .height(120) .type(ButtonType.Normal) .backgroundColor(Color.White) .borderWidth(3) .borderColor('#592708') .borderRadius(20) .id("AddImageBtn") .alignRules({ middle: { anchor: "__container__", align: HorizontalAlign.Center } }) .margin({ top: 20 }) .onClick(() => { PromptActionClass.OpenDialog(); }) } .height('100%') .width('100%') } @Builder PictureBuilder() { SelectImageDialog({ CancelEvent: async () => { try { PromptActionClass.CloseDialog(); return true; } catch (e) { console.info(e); return false; } }, TakePictureEvent: async () => { try { //配置相机设置 let pickerProfile: cameraPicker.PickerProfile = { cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK, }; let result: cameraPicker.PickerResult = await cameraPicker.pick(getContext(), [cameraPicker.PickerMediaType.PHOTO], pickerProfile); if (result.resultCode == 0) { await this.UpdateShowImage(result.resultUri); } PromptActionClass.CloseDialog(); return true; } catch (e) { console.info(e); return false; } }, SelectedPictureEvent: async () => { try { const photoSelectOpt = new photoAccessHelper.PhotoSelectOptions(); //设置选择类型 photoSelectOpt.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; //选择图片最大数量 photoSelectOpt.maxSelectNumber = 1; //图片选择器 const photoPicker = new photoAccessHelper.PhotoViewPicker(); const selectResult: photoAccessHelper.PhotoSelectResult = await photoPicker.select(photoSelectOpt) let uri: string = ""; if (selectResult.isOriginalPhoto || selectResult.photoUris.length == 0) { return false; } uri = selectResult.photoUris[0]; await this.UpdateShowImage(uri); PromptActionClass.CloseDialog(); return true; } catch (e) { console.info(e); return false; } } }) } async UpdateShowImage(uri: string) { let file = fileIo.openSync(uri, fileIo.OpenMode.READ_ONLY) const imageSourceApi = image.createImageSource(file.fd); let map: PixelMap = await imageSourceApi.createPixelMap(); this.ShowImage = map; } } PromptActionClass import { promptAction } from "@kit.ArkUI"; import { BusinessError } from "@kit.BasicServicesKit"; /** * 弹窗操作类 */ export class PromptActionClass { /** *展示界面的ID集合 */ private static ShowIDArray: number[] = []; static Context: UIContext; /** * 弹窗界面设置 */ static Options: promptAction.CustomDialogOptions; static SetContext(context: UIContext) { PromptActionClass.Context = context; } static SetOptions(options: promptAction.CustomDialogOptions) { PromptActionClass.Options = options; } /** * 弹窗 */ static OpenDialog() { if (PromptActionClass.Options) { PromptActionClass.Context.getPromptAction() .openCustomDialog(PromptActionClass.Options) .then((id: number) => { PromptActionClass.ShowIDArray.push(id); console.info('弹窗已打开') }) .catch((error: BusinessError) => { let message = (error as BusinessError).message; let code = (error as BusinessError).code; console.error(`弹窗失败，错误代码是：${code}, message 是 ${message}`); }) } } /** * 关闭弹窗 */ static CloseDialog() { if (PromptActionClass.ShowIDArray.length != 0) { try { PromptActionClass.Context.getPromptAction() .closeCustomDialog(PromptActionClass.ShowIDArray[PromptActionClass.ShowIDArray.length-1]) console.info('成功关闭弹窗.') } catch { (error: BusinessError) => { let message = (error as BusinessError).message; let code = (error as BusinessError).code; console.error(`弹窗关闭失败，错误代码：${code}, message 是 ${message}`); } } } } } SelectImageDialog @ComponentV2 export struct SelectImageDialog { @Event TakePictureEvent: () => Promise<boolean> = async () => { return false; } @Event SelectedPictureEvent: () => Promise<boolean> = async () => { return false; } @Event CancelEvent: () => Promise<boolean> = async () => { return false; } build() { RelativeContainer() { Button("拍照") .type(ButtonType.Normal) .width("100%") .id("TakePictureBtn") .backgroundColor("#ffffff") .height(50) .fontColor("#343434") .alignRules({ bottom: { anchor: "SelectedPictureBtn", align: VerticalAlign.Top } }) .onClick(async () => { await this.TakePictureEvent(); }) Button("从相册中选择") .type(ButtonType.Normal) .width("100%") .height(50) .id("SelectedPictureBtn") .backgroundColor("#ffffff") .fontColor("#343434") .borderWidth({ bottom: 2, top: 2 }) .borderColor("#f6f6f6") .alignRules({ center: { anchor: "__container__", align: VerticalAlign.Center } }) .onClick(async () => { await this.SelectedPictureEvent(); }) Button("取消") .width("100%") .type(ButtonType.Normal) .height(50) .backgroundColor("#ffffff") .fontColor("#aeaeae") .alignRules({ top: { anchor: "SelectedPictureBtn", align: VerticalAlign.Bottom } }) .onClick(async () => { await this.CancelEvent(); }) } .height("100%") .width("100%") } } 图片资源

从绑定资源中下载

代码文件下载

ImageSelectDemo: 图片选择博客代码