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

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

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

可参考以下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}`);
    }
  }
}
分享
微博
QQ
微信
回复
1天前
相关问题
进入相册拍照选择图片做头像
13633浏览 • 2回复 已解决
如何获取文本框文字宽度
2525浏览 • 1回复 待解决
textinput 文本框是否可以分段展示?
255浏览 • 1回复 待解决
HarmonyOS TextInput全宽文本框怎么使用
15浏览 • 1回复 待解决
如何拿到文本框文字宽度数值
463浏览 • 1回复 待解决
鸿蒙-文本如何添加图片
7140浏览 • 1回复 待解决
如何保存本地图片相册
1130浏览 • 1回复 待解决
HarmonyOS 保存图片本地相册
21浏览 • 1回复 待解决
HarmonyOS 保存图片相册问题
405浏览 • 1回复 待解决
HarmonyOS 截图保存图片相册
35浏览 • 1回复 待解决
HarmonyOS 实现保存图片相册
22浏览 • 1回复 待解决
拉起相册选择图片页面失败
1970浏览 • 1回复 待解决