HarmonyOS鸿蒙Next中拉起相册并将选择的图片转为PixelMap

将相册选择的图片生成PixelMap

方案一

1. 创建图库选择器实例调用select()接口拉起photoPicker界面进行图片选择。图片选择成功后，返回PhotoSelectResult结果集。
2. 通过photoAccessHelper模块中的getAssets接口获取媒体文件对应文件的uri。
3. 调用getThumbnail获取缩略图。

import { picker } from '@kit.CoreFileKit'; 
import { photoAccessHelper } from '@kit.MediaLibraryKit'; 
import { BusinessError } from '@kit.BasicServicesKit'; 
import { dataSharePredicates } from '@kit.ArkData'; 
import { common } from '@kit.AbilityKit'; 

const context = getContext(this) as common.UIAbilityContext; 
@Entry 
@Component 
struct WebComponent { 
  build() { 
    Column() { 
      Button('选择图片').onClick(() => { 
        try { 
          let uris: Array<string> = []; 
          let PhotoSelectOptions = new picker.PhotoSelectOptions(); 
          PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; 
          PhotoSelectOptions.maxSelectNumber = 1; 
          let photoPicker = new picker.PhotoViewPicker(); 
          photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult: picker.PhotoSelectResult) => { 
            console.info('photoPicker.select successfully, PhotoSelectResult uri: ' + JSON.stringify(PhotoSelectResult)); 
            uris = PhotoSelectResult.photoUris; 
            let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context); 
            let predicates: dataSharePredicates.DataSharePredicates = new dataSharePredicates.DataSharePredicates(); 
            /// 使用PhotoViewPicker选择图片返回的uri进行查询 
            predicates.equalTo('uri', uris[0]); 
            let fetchOptions: photoAccessHelper.FetchOptions = { 
              fetchColumns: [], 
              predicates: predicates 
            }; 
            phAccessHelper.getAssets(fetchOptions, async (err, fetchResult) => { 
              if (fetchResult !== undefined) { 
                console.info('fetchResult success'); 
                let photoAsset: photoAccessHelper.PhotoAsset = await fetchResult.getFirstObject(); 
                if (photoAsset !== undefined) { 
                  // 获取缩略图 
                  photoAsset.getThumbnail((err, pixelMap) => { 
                    if (err == undefined) { 
                      console.info('getThumbnail successful ' + JSON.stringify(pixelMap)); 
                    } else { 
                      console.error('getThumbnail fail', err); 
                    } 
                  }); 
                  console.info('photoAsset.displayName : ' + photoAsset.displayName); 
                } 
              } else { 
                console.error(`fetchResult fail with error: ${err.code}, ${err.message}`); 
              } 
            }); 
          }).catch((err: BusinessError) => { 
            console.error('photoPicker.select failed with err: ' + JSON.stringify(err)); 
          }); 
        } catch (error) { 
          let err: BusinessError = error as BusinessError; 
          console.error('photoPicker failed with err: ' + JSON.stringify(err)); 
        } 
      }) 
    } 
  } 
}

方案二

1. 创建图库选择器实例调用select()接口拉起photoPicker界面进行图片选择。图片选择成功后，返回PhotoSelectResult结果集。
2. 待界面从图库返回后，使用fs.openSync接口，通过uri打开这个文件得到fd。这里需要注意接口权限参数是fs.OpenMode.READ_ONLY。
3. 通过image使用image.createImageSource接口创建图片源实例。
4. 然后根据imageSource创建pixelMap。

import { photoAccessHelper } from '@kit.MediaLibraryKit'; 
import { BusinessError } from '@kit.BasicServicesKit'; 
import { image } from '@kit.ImageKit'; 
import { picker } from '@kit.CoreFileKit'; 
import { fileIo } from '@kit.CoreFileKit'; 

@Entry 
@Component 
struct WebComponent { 
  build() { 
    Column() { 
      Button('选择图片').onClick(() => { 
        try { 
          let uris: Array<string> = []; 
          let PhotoSelectOptions = new picker.PhotoSelectOptions(); 
          PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; 
          PhotoSelectOptions.maxSelectNumber = 1; 
          let photoPicker = new picker.PhotoViewPicker(); 
          photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult: photoAccessHelper.PhotoSelectResult) => { 
            uris = PhotoSelectResult.photoUris; 
            let file = fileIo.openSync(uris[0], fileIo.OpenMode.READ_ONLY); 
            console.info('file fd: ' + file.fd); 
            let buffer = new ArrayBuffer(4096); 
            let readLen = fileIo.readSync(file.fd, buffer); 
            console.info('readSync data to file succeed and buffer size is:' + readLen); 
            const imageSource: image.ImageSource = image.createImageSource(file.fd); 
            let decodingOptions: image.DecodingOptions = { 
              editable: true, 
              desiredPixelFormat: 3, 
            } 
            imageSource.createPixelMap(decodingOptions, (err: BusinessError, pixelMap: image.PixelMap) => { 
              if (err !== undefined) { 
                console.error(`Failed to create pixelMap.code is ${err.code},message is ${err.message}`); 
              } else { 
                console.info('Succeeded in creating pixelMap object.'); 
              } 
            }) 
          }).catch((err: BusinessError) => { 
            console.error(`Invoke photoPicker.select failed, code is ${err.code}, message is ${err.message}`); 
          }) 
        } catch (error) { 
          let err: BusinessError = error as BusinessError; 
          console.error('photoPicker failed with err: ' + JSON.stringify(err)); 
        } 
      }) 
    } 
  } 
}