HarmonyOS 鸿蒙Next中选择系统相册里的图片并转base64

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

HarmonyOS 鸿蒙Next中选择系统相册里的图片并转base64

getPhotoAssets(): Promise<SelectedImageResult> {
  let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
  PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
  PhotoSelectOptions.maxSelectNumber = 1;
  let photoPicker = new photoAccessHelper.PhotoViewPicker();
  let p: Promise<SelectedImageResult> = new Promise((resolve,reject) => {
  photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult: photoAccessHelper.PhotoSelectResult) => {
  let url = PhotoSelectResult.photoUris[0];
  this.uriToBase64(url,(imagedata:string)=>{
  let result: SelectedImageResult = {
    code: 0,
    msg: 'success',
    data: imagedata
  }
  resolve(result);
});
}).catch(() => {
  let result: SelectedImageResult = {
    code: -1,
    msg: 'failure',
    data: ''
  }
  reject(result);
});
});
return p;
}

uriToBase64(uri:string,callback:(url:string)=>void){
  let file = fileIo.openSync(uri, fileIo.OpenMode.READ_ONLY);
  let rebuffer = new ArrayBuffer(4096*10);
  let descValue = new Uint8Array(rebuffer);
  fileIo.readSync(file.fd, rebuffer);
  let base64Helper = new util.Base64Helper();
  base64Helper.encodeToString(descValue, util.Type.MIME).then((val) => {
    let result = "data:image/png;base64,"+val;
    callback(result);
  })
}

选择系统相册后,将uri转成base64,不过转的base64用image控件无法展示出来


更多关于HarmonyOS 鸿蒙Next中选择系统相册里的图片并转base64的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

可以参考这个从图库选择图片上传案例:

import { BusinessError } from '@ohos.base';
import { rcp } from '@kit.RemoteCommunicationKit';
import { picker } from '@kit.CoreFileKit';
import fs from '@ohos.file.fs';
import { http } from '@kit.NetworkKit';

let uploadUrl: string = '';

function example01(): string {
  let uri = '';
  let photoViewPicker = new picker.PhotoViewPicker();
  let photoSelectOption = new picker.PhotoSelectOptions();
  photoSelectOption.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
  photoViewPicker.select(photoSelectOption).then((photoSelectResult) => {
    console.log("fyh photoSelectResult:" + photoSelectResult);
    uri = photoSelectResult.photoUris[0];
    console.log("fyh uri:" + uri);
    try {
      let resultPhoto = fs.openSync(uri, fs.OpenMode.READ_ONLY);
      let resultName = resultPhoto.name;
      let fileTemp = fs.openSync(getContext().filesDir + resultPhoto.name, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
      let imageUri = fileTemp.path;
      fs.copyFileSync(resultPhoto.fd, fileTemp.fd);
      fs.closeSync(resultPhoto);
      fs.closeSync(fileTemp);
      const httpRequest = http.createHttp();
      httpRequest.request(uploadUrl, {
        method: http.RequestMethod.POST,
        header: {
          'Content-Type': 'multipart/form-data',
          'Connection': 'keep-alive'
        },
        expectDataType: http.HttpDataType.ARRAY_BUFFER,
        multiFormDataList: [
          {
            name: 'file',
            contentType: 'image/jpg',
            filePath: imageUri,
            remoteFileName: 'file.jpg'
          },
        ],
      }, (err, data) => {
        console.log('fyh:上传结束')
        httpRequest.destroy();
      }
      )
    } catch (err) {
      console.error(`fyh:Failed to request the upload. err: ${JSON.stringify(err)}`);
    }
  }).catch((err: BusinessError) => {
    console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
  })
  return uri;
}

function testRcpMultiPartUpload() {
  example01();
}

function clickget() {
  const session = rcp.createSession();
  session.get("").then((response) => {
    console.log("fyh" + JSON.stringify(response));
  }).catch((err: BusinessError) => {
    console.error("err:" + JSON.stringify(err));
  });
}

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            testRcpMultiPartUpload();
          })
        Text('getText')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            clickget();
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

参考如下demo:

import photoAccessHelper from '@ohos.file.photoAccessHelper';
import image from '@ohos.multimedia.image';
import fs from '@ohos.file.fs';
import { buffer } from '@kit.ArkTS';

@Entry
@Component
struct Page2 {
  @State resultBase64Str: string = '';
  @State getAlbum: string = '显示相册中的图片';
  @State pixel: image.PixelMap | undefined = undefined;
  @State albumPath: string = '';
  @State photoSize: number = 0;

  async getPictureFromAlbum() {
    // 拉起相册,选择图片
    let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
    PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
    PhotoSelectOptions.maxSelectNumber = 1;
    let photoPicker = new photoAccessHelper.PhotoViewPicker();
    let photoSelectResult: photoAccessHelper.PhotoSelectResult = await photoPicker.select(PhotoSelectOptions);
    this.albumPath = photoSelectResult.photoUris[0];
    console.info('albumPath: ' + this.albumPath)
    // 读取图片为buffer
    const file = fs.openSync(this.albumPath, fs.OpenMode.READ_WRITE);
    this.photoSize = fs.statSync(file.fd).size;
    console.info('Photo Size: ' + this.photoSize);
    let buffer1 = new ArrayBuffer(this.photoSize);
    fs.readSync(file.fd, buffer1);
    let base64Str: string = buffer.from(buffer1).toString('base64')
    let resultBase64Str = "data:image/png;base64," + base64Str
    this.resultBase64Str = resultBase64Str
    fs.closeSync(file);
    // 解码成PixelMap
    const imageSource = image.createImageSource(buffer1);
    console.log('imageSource: ' + JSON.stringify(imageSource));
    this.pixel = await imageSource.createPixelMap({});
  }

  build() {
    Scroll() {
      Column() {
        Text('获取图片')
          .onClick(async () => {
            await this.getPictureFromAlbum()
          })
        // Image(this.pixel)
        Image(this.resultBase64Str).width(40).height(40)
        Text(this.resultBase64Str)
      }
    }
  }
}

更多关于HarmonyOS 鸿蒙Next中选择系统相册里的图片并转base64的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS(鸿蒙Next)中,选择系统相册里的图片并将其转换为Base64编码,可以通过以下步骤实现:

  1. 选择图片:使用鸿蒙的@ohos.file.picker模块中的PhotoViewPicker类来选择系统相册中的图片。PhotoViewPicker提供了select方法,可以打开系统相册并选择图片。

  2. 获取图片URI:select方法返回一个PhotoSelectResult对象,其中包含所选图片的URI。通过这个URI,可以访问图片文件。

  3. 读取图片数据:使用@ohos.file.fs模块中的fs.readFile方法读取图片文件的数据。fs.readFile方法接收图片URI,并返回一个ArrayBuffer对象,表示图片的二进制数据。

  4. 转换为Base64:将ArrayBuffer对象转换为Base64编码。可以使用@ohos.util.base64模块中的encodeToString方法,将二进制数据转换为Base64字符串。

以下是示例代码:

import picker from '@ohos.file.picker';
import fs from '@ohos.file.fs';
import base64 from '@ohos.util.base64';

async function pickAndConvertImageToBase64() {
    const photoPicker = new picker.PhotoViewPicker();
    const photoSelectOptions = new picker.PhotoSelectOptions();
    photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
    photoSelectOptions.maxSelectNumber = 1;

    const photoSelectResult = await photoPicker.select(photoSelectOptions);
    const uri = photoSelectResult.photoUris[0];

    const file = fs.openSync(uri, fs.OpenMode.READ_ONLY);
    const buffer = new ArrayBuffer(fs.statSync(uri).size);
    fs.readSync(file.fd, buffer);

    const base64String = base64.encodeToString(buffer);
    console.log(base64String);

    fs.closeSync(file);
}

这段代码展示了如何从系统相册中选择一张图片,读取其二进制数据,并将其转换为Base64编码。

在HarmonyOS(鸿蒙Next)中,选择系统相册图片并转换为Base64的步骤如下:

  1. 调用系统相册:通过Intent启动系统相册应用,允许用户选择图片。
  2. 获取图片URI:在onActivityResult中获取用户选择的图片URI。
  3. 读取图片数据:使用ContentResolver打开输入流,读取图片数据。
  4. 转换为Base64:将读取的字节数组通过Base64编码转换为Base64字符串。
Intent intent = new Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
startActivityForResult(intent, REQUEST_CODE_IMAGE);

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    if (requestCode == REQUEST_CODE_IMAGE && resultCode == RESULT_OK && data != null) {
        Uri uri = data.getData();
        try {
            InputStream inputStream = getContentResolver().openInputStream(uri);
            byte[] bytes = new byte[inputStream.available()];
            inputStream.read(bytes);
            String base64 = Base64.encodeToString(bytes, Base64.DEFAULT);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

此代码片段展示了如何选择图片并将其转换为Base64字符串。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!