HarmonyOS 拍照或者选择相册中的图片插入到富文本框？

Question

如何通过拍照或者选择相册中的图片插入到富文本框

Answer 1

可参考以下demo实现

import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { router } from '@kit.ArkUI';
import picker from '@ohos.file.picker';
import fs from '@ohos.file.fs';
import { buffer, util } from '@kit.ArkTS';
let buf:ArrayBuffer | undefined = undefined
@Entry
@Component
struct PikerTest {
  @State message: string = '';
  @State arr:Array<string> = []
  @State data: string = '<h1 style="text-align: center;">h1标题</h1>' +
    '<h2 style="text-align: center;">h2标题</h2>' +
    '<p style="text-align: center;">p常规</p><hr/>' +
    '<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>';

  build() {
    Scroll(){
      Column() {

        List(){
          ForEach(this.arr,(ImageUri:string,index:number)=>{
            ListItem(){
              Row(){
                Text(`第${index}个`)
                Image(ImageUri)
                  .width(200)
              }
            }
          })
        }

        Text("photoAccessHelper 拉起相册")
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
            this.example01()
          })

        Text("picker 拉起相册")
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
            this.example02()
          })

        Image(this.message)
          .width(200)

        RichText(this.data)
          .onClick(()=>{
            let imageuri = "";
            for (let index = 0; index < this.arr.length; index++) {
              const file = fs.openSync(this.arr[index], fs.OpenMode.READ_ONLY);;
              let buffer1 = new ArrayBuffer(fs.statSync(file.fd).size);
              fs.readSync(file.fd, buffer1);
              let base64Str: string = buffer.from(buffer1).toString('base64')
              let resultBase64Str = "data:image/png;base64," + base64Str
              this.message = resultBase64Str
              imageuri += `<image style="height:300px" src=${resultBase64Str}></image>`
            }
            this.data += imageuri;
          })
          .height("50%")

        Text("到底")
      }
    }
  }

  example01() {
    try {
      let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
      PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
      PhotoSelectOptions.maxSelectNumber = 5;
      PhotoSelectOptions.preselectedUris = this.arr
      let photoPicker = new photoAccessHelper.PhotoViewPicker();
      photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult: photoAccessHelper.PhotoSelectResult) => {
        this.arr = PhotoSelectResult.photoUris
        console.info('PhotoViewPicker.select successfully, PhotoSelectResult uri: ' + JSON.stringify(PhotoSelectResult));
      }).catch((err: BusinessError) => {
        console.error(`PhotoViewPicker.select failed with err: ${err.code}, ${err.message}`);
      });
    } catch (error) {
      let err: BusinessError = error as BusinessError;
      console.error(`PhotoViewPicker failed with err: ${err.code}, ${err.message}`);
    }
  }

  example02() {
    try {
      let photoSelectOptions = new picker.PhotoSelectOptions();
      photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
      photoSelectOptions.maxSelectNumber = 5;
      let photoPicker = new picker.PhotoViewPicker();
      photoPicker.select(photoSelectOptions).then((PhotoSelectResult: photoAccessHelper.PhotoSelectResult) => {
        this.arr = PhotoSelectResult.photoUris
        console.info('PhotoViewPicker.select successfully, PhotoSelectResult uri: ' + JSON.stringify(PhotoSelectResult));
      }).catch((err: BusinessError) => {
        console.error(`PhotoViewPicker.select failed with err: ${err.code}, ${err.message}`);
      });
    } catch (error) {
      let err: BusinessError = error as BusinessError;
      console.error(`PhotoViewPicker failed with err: ${err.code}, ${err.message}`);
    }
  }
}