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

发布于 1周前 作者 yibo5220 来自 鸿蒙OS

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

如何将PhotoPickerComponent选中的file地址的图片转为base64


关于HarmonyOS 鸿蒙Next如何将PhotoPickerComponent选中的file地址的图片转为base64的问题,您也可以访问:https://www.itying.com/category-93-b0.html 联系官网客服。

5 回复
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>

有要学HarmonyOS AI的同学吗,联系我:https://www.itying.com/goods-1206.html

好像不可以,通过picker选中返回的uri是file…/…/xx.jpg,我想把这样的图片地址转为base64

参考2楼,转换成base64那部分

回到顶部