【HarmonyOS Next】图片选择方案

配景

---

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

项目架构

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

紧张方法解析

---

调用相机照相

• 添加camera, cameraPicker的外部引用
  

1. import { camera, cameraPicker } from '@kit.CameraKit';

复制代码

• 使用cameraPicker的pick方法实现安全调用设备相机，并返回选择结果cameraPicker.PickerResult对象，通过设置cameraPicker.PickerProfile对象属性实现对相机的初始化属性设置。
  

1. try {
2.   //配置相机设置
3.   let pickerProfile: cameraPicker.PickerProfile = {
4.     cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK,
5.   };
6.   let result: cameraPicker.PickerResult =
7.     await cameraPicker.pick(getContext(), [cameraPicker.PickerMediaType.PHOTO],
8.       pickerProfile);
9.   if (result.resultCode == 0) {
10.     await this.UpdateShowImage(result.resultUri);
11.   }
12.   PromptActionClass.CloseDialog();
13.   return true;
14. } catch (e) {
15.   console.info(e);
16.   return false;
17. }

复制代码

访问图库选择图片

• 添加PromptActionClass的外部引用
  

1. import { PromptActionClass } from '../Common/PromptActionClass';

复制代码

• 使用photoAccessHelper.PhotoViewPicker对象的select方法，实现安全调用相册并选择图片。通过photoAccessHelper.PhotoSelectOptions对象，对选择方法举行初始化，可以设置默认选择、选择数量、选择范例等。
  

1. try {
2.   const photoSelectOpt = new photoAccessHelper.PhotoSelectOptions();
3.   //设置选择类型
4.   photoSelectOpt.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
5.   //选择图片最大数量
6.   photoSelectOpt.maxSelectNumber = 1;
7.   //图片选择器
8.   const photoPicker = new photoAccessHelper.PhotoViewPicker();
9.   const selectResult: photoAccessHelper.PhotoSelectResult = await photoPicker.select(photoSelectOpt)
10.   let uri: string = "";
11.   if (selectResult.isOriginalPhoto || selectResult.photoUris.length == 0) {
12.     return false;
13.   }
14.   uri = selectResult.photoUris[0];
15.   await this.UpdateShowImage(uri);
16.   PromptActionClass.CloseDialog();
17.   return true;
18. } catch (e) {
19.   console.info(e);
20.   return false;
21. }

复制代码

整体代码

---

Index

1. import { image } from '@kit.ImageKit';import { photoAccessHelper } from '@kit.MediaLibraryKit';import { fileIo } from '@kit.CoreFileKit';import { PromptActionClass } from '../Common/PromptActionClass';
2. import { SelectImageDialog } from '../components/SelectImageDialog';import { camera, cameraPicker } from '@kit.CameraKit';
3. @Entry@ComponentV2struct 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

1. import { promptAction } from "@kit.ArkUI";
2. import { BusinessError } from "@kit.BasicServicesKit";
4. /**
5. * 弹窗操作类
6. */
7. export class PromptActionClass {
8.   /**
9.    *展示界面的ID集合
10.    */
11.   private static ShowIDArray: number[] = [];
12.   static Context: UIContext;
13.   /**
14.    * 弹窗界面设置
15.    */
16.   static Options: promptAction.CustomDialogOptions;
18.   static SetContext(context: UIContext) {
19.     PromptActionClass.Context = context;
20.   }
22.   static SetOptions(options: promptAction.CustomDialogOptions) {
23.     PromptActionClass.Options = options;
24.   }
26.   /**
27.    * 弹窗
28.    */
29.   static OpenDialog() {
30.     if (PromptActionClass.Options) {
31.       PromptActionClass.Context.getPromptAction()
32.         .openCustomDialog(PromptActionClass.Options)
33.         .then((id: number) => {
34.           PromptActionClass.ShowIDArray.push(id);
35.           console.info('弹窗已打开')
36.         })
37.         .catch((error: BusinessError) => {
38.           let message = (error as BusinessError).message;
39.           let code = (error as BusinessError).code;
40.           console.error(`弹窗失败，错误代码是：${code}, message 是 ${message}`);
41.         })
42.     }
43.   }
45.   /**
46.    * 关闭弹窗
47.    */
48.   static CloseDialog() {
49.     if (PromptActionClass.ShowIDArray.length != 0) {
50.       try {
51.         PromptActionClass.Context.getPromptAction()
52.           .closeCustomDialog(PromptActionClass.ShowIDArray[PromptActionClass.ShowIDArray.length-1])
53.         console.info('成功关闭弹窗.')
54.       } catch {
55.         (error: BusinessError) => {
56.           let message = (error as BusinessError).message;
57.           let code = (error as BusinessError).code;
58.           console.error(`弹窗关闭失败，错误代码：${code}, message 是 ${message}`);
59.         }
60.       }
61.     }
62.   }
63. }

复制代码

SelectImageDialog

1. @ComponentV2
2. export struct SelectImageDialog {
3.   @Event TakePictureEvent: () => Promise<boolean> = async () => {
4.     return false;
5.   }
6.   @Event SelectedPictureEvent: () => Promise<boolean> = async () => {
7.     return false;
8.   }
9.   @Event CancelEvent: () => Promise<boolean> = async () => {
10.     return false;
11.   }
13.   build() {
14.     RelativeContainer() {
15.       Button("拍照")
16.         .type(ButtonType.Normal)
17.         .width("100%")
18.         .id("TakePictureBtn")
19.         .backgroundColor("#ffffff")
20.         .height(50)
21.         .fontColor("#343434")
22.         .alignRules({
23.           bottom: { anchor: "SelectedPictureBtn", align: VerticalAlign.Top }
24.         })
25.         .onClick(async () => {
26.           await this.TakePictureEvent();
27.         })
28.       Button("从相册中选择")
29.         .type(ButtonType.Normal)
30.         .width("100%")
31.         .height(50)
32.         .id("SelectedPictureBtn")
33.         .backgroundColor("#ffffff")
34.         .fontColor("#343434")
35.         .borderWidth({ bottom: 2, top: 2 })
36.         .borderColor("#f6f6f6")
37.         .alignRules({
38.           center: { anchor: "__container__", align: VerticalAlign.Center }
39.         })
40.         .onClick(async () => {
41.           await this.SelectedPictureEvent();
42.         })
44.       Button("取消")
45.         .width("100%")
46.         .type(ButtonType.Normal)
47.         .height(50)
48.         .backgroundColor("#ffffff")
49.         .fontColor("#aeaeae")
50.         .alignRules({
51.           top: { anchor: "SelectedPictureBtn", align: VerticalAlign.Bottom }
52.         })
53.         .onClick(async () => {
54.           await this.CancelEvent();
55.         })
56.     }
57.     .height("100%")
58.     .width("100%")
59.   }
60. }

复制代码

图片资源

从绑定资源中下载
代码文件下载

ImageSelectDemo: 图片选择博客代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。