HarmonyOS 鸿蒙Next如何将PhotoPickerComponent选中的file地址的图片转为base64

import fs from '@ohos.file.fs';
// xxx.ets
import {
  photoAccessHelper, PhotoPickerComponent, PickerController, PickerOptions,
  DataType, ItemInfo, PhotoBrowserInfo, AnimatorParams,
  MaxSelected, ItemType, ClickType, PickerOrientation,
  SelectMode, PickerColorMode, ReminderMode, MaxCountType
} from '@kit.MediaLibraryKit';
import { common } from '@kit.AbilityKit';
import { image } from '@kit.ImageKit';
import { buffer } from '@kit.ArkTS';
@Entry
@Component
struct Page21 {
pickerOptions: PickerOptions = new PickerOptions();
@State pickerController: PickerController = new PickerController();
@State selectUris: Array<string> = new Array<string>();
aboutToAppear() {
this.pickerOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE;
this.pickerOptions.maxSelectNumber = 10;
this.pickerOptions.isSearchSupported = false;
this.pickerOptions.isPhotoTakingSupported = false;
// 其他属性…
}
private onSelect(uri: string): void {
// 添加
if (uri) {
this.selectUris.push(uri);
}
}
private onDeselect(uri: string): void {
// 移除
if (uri) {
this.selectUris = this.selectUris.filter((item: string) => {
return item != uri;
})
}
}
private onItemClicked(itemInfo: ItemInfo, clickType: ClickType): boolean {
console.info(onItemClicked:${<span class="hljs-built_in"><span class="hljs-built_in">JSON</span></span>.stringify(itemInfo)})
if (!itemInfo) {
return false;
}
let type: ItemType | undefined = itemInfo.itemType;
if (type === ItemType.CAMERA) {
// 点击相机item
console.info(‘点击相机item’)
return true; // 返回true则拉起系统相机，若应用需要自行处理则返回false。
} else {
if (clickType === ClickType.SELECTED) {
// 应用做自己的业务处理
console.info(应用做自己的业务处理uri:${itemInfo.uri})
if(itemInfo.uri){
this.fileChangePixelMap(itemInfo.uri)
}
return true; // 返回true则勾选，否则则不响应勾选。
}
}
return true;
}
private onEnterPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean {
// 进入大图的回调
return true;
}
private onExitPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean {
// 退出大图的回调
return true;
}
private onPickerControllerReady(): void {
// 接收到该回调后，便可通过pickerController相关接口向picker发送数据，在此之前不生效。
}
@State base64:string = “”
build() {
Column() {
PhotoPickerComponent({
pickerOptions: this.pickerOptions,
// onSelect: (uri: string): void => this.onSelect(uri),
// onDeselect: (uri: string): void => this.onDeselect(uri),
onItemClicked: (itemInfo: ItemInfo, clickType: ClickType): boolean => this.onItemClicked(itemInfo, clickType), // 该接口可替代上面两个接口
onEnterPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onEnterPhotoBrowser(photoBrowserInfo),
onExitPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onExitPhotoBrowser(photoBrowserInfo),
onPickerControllerReady: (): void => this.onPickerControllerReady(),
pickerController: this.pickerController,
}).height(‘50%’).width(‘100%’)
  Text(<span class="hljs-string"><span class="hljs-string">'通过base64展示当前图片'</span></span>)
  Image(<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.base64).width(<span class="hljs-string"><span class="hljs-string">'300lpx'</span></span>).height(<span class="hljs-string"><span class="hljs-string">'300lpx'</span></span>)

  <span class="hljs-comment"><span class="hljs-comment">// 这里模拟应用侧底部的选择栏</span></span>
  Row() {
    ForEach(<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.selectUris, (uri: string) =&gt; {
      Image(uri).height(<span class="hljs-string"><span class="hljs-string">'10%'</span></span>).width(<span class="hljs-string"><span class="hljs-string">'10%'</span></span>).onClick(() =&gt; {
        <span class="hljs-comment"><span class="hljs-comment">// 点击事件模拟删除操作，通过pickerController向picker组件发送已选择的数据列表，触发picker组件勾选框刷新</span></span>
        <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.selectUris = <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.selectUris.filter((item: string) =&gt; {
          <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> item != uri;
        })
        <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.pickerController.setData(DataType.SET_SELECTED_URIS, <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.selectUris);
      })
    }, (uri: string) =&gt; <span class="hljs-built_in"><span class="hljs-built_in">JSON</span></span>.stringify(uri))
  }
}
}
async fileChangePixelMap(path: string) {
try {
  <span class="hljs-comment"><span class="hljs-comment">// 打开文件读取流</span></span>
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> file = fs.openSync(path, fs.OpenMode.READ_ONLY);
  <span class="hljs-comment"><span class="hljs-comment">// 获取当前上下文</span></span>
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> context = getContext() as common.UIAbilityContext;
  <span class="hljs-comment"><span class="hljs-comment">// 新建一个保存裁剪后图片的路径</span></span>
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> newPath = context.filesDir + <span class="hljs-string"><span class="hljs-string">'/test'</span></span> + <span class="hljs-keyword"><span class="hljs-keyword">new</span></span> <span class="hljs-built_in"><span class="hljs-built_in">Date</span></span>().getTime() + <span class="hljs-string"><span class="hljs-string">'.jpg'</span></span>;
  <span class="hljs-comment"><span class="hljs-comment">// 复制图片到新的路径</span></span>
  fs.copyFileSync(file.fd, newPath);
  <span class="hljs-comment"><span class="hljs-comment">// 关闭文件读取流</span></span>
  fs.closeSync(file);

  <span class="hljs-comment"><span class="hljs-comment">// 创建图片源对象</span></span>
  <span class="hljs-keyword"><span class="hljs-keyword">const</span></span> imageSource: image.ImageSource = image.createImageSource(newPath);
  console.log(<span class="hljs-string"><span class="hljs-string">'imageSource🥳'</span></span>, <span class="hljs-string"><span class="hljs-string">'-----&gt;👉'</span></span>, <span class="hljs-built_in"><span class="hljs-built_in">JSON</span></span>.stringify(imageSource));
  <span class="hljs-comment"><span class="hljs-comment">// 图片解码选项</span></span>
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> decodingOptions: image.DecodingOptions = {
    editable: <span class="hljs-literal"><span class="hljs-literal">true</span></span>,
    desiredPixelFormat: <span class="hljs-number"><span class="hljs-number">3</span></span>,
  };
  <span class="hljs-comment"><span class="hljs-comment">// 创建像素地图</span></span>
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> mPixelMap: image.PixelMap = await imageSource.createPixelMap(decodingOptions);

  <span class="hljs-comment"><span class="hljs-comment">// 转换成base64</span></span>
  <span class="hljs-keyword"><span class="hljs-keyword">const</span></span> imagePackerApi: image.ImagePacker = image.createImagePacker();
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> packOpts: image.PackingOption = { format: <span class="hljs-string"><span class="hljs-string">'image/jpeg'</span></span>, quality: <span class="hljs-number"><span class="hljs-number">100</span></span> };
  imagePackerApi.packing(mPixelMap, packOpts).then((data: <span class="hljs-built_in"><span class="hljs-built_in">ArrayBuffer</span></span>) =&gt; {
    <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> buf: buffer.Buffer = buffer.from(data);
    <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.base64 = <span class="hljs-string"><span class="hljs-string">'data:image/jpeg;base64,'</span></span> + buf.toString(<span class="hljs-string"><span class="hljs-string">'base64'</span></span>, <span class="hljs-number"><span class="hljs-number">0</span></span>, buf.length);
    console.info(<span class="hljs-string"><span class="hljs-string">'base64: '</span></span> + <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.base64);
  })


  <span class="hljs-comment"><span class="hljs-comment">// 获取图片信息</span></span>
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> mImageInfo: image.ImageInfo = await mPixelMap.getImageInfo();
  console.log(<span class="hljs-string"><span class="hljs-string">'mImageInfo🥳'</span></span>, <span class="hljs-string"><span class="hljs-string">'-----&gt;👉'</span></span>, <span class="hljs-built_in"><span class="hljs-built_in">JSON</span></span>.stringify(mImageInfo));
  <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> mPixelMap
} <span class="hljs-keyword"><span class="hljs-keyword">catch</span></span> (e) {
  console.error(<span class="hljs-string"><span class="hljs-string">'imgChange🥳'</span></span>, <span class="hljs-built_in"><span class="hljs-built_in">JSON</span></span>.stringify(e));
  <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> <span class="hljs-literal"><span class="hljs-literal">undefined</span></span>
}
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>