HarmonyOS 鸿蒙Next 元服务web页面获取到的图片怎么转成base64

HarmonyOS 鸿蒙Next 元服务web页面获取到的图片怎么转成base64

鸿蒙元服务AtomicServiceWeb组件开发的web页面中用新的js sdk方法has.photoViewPicker.select()拿到的图片uri怎么转成base64格式呢？

2 回复

可以参考如下demo，替换相应的uri尝试一下：

 import { photoAccessHelper } from '[@kit](/user/kit).MediaLibraryKit';
import { buffer } from '[@kit](/user/kit).ArkTS';
import { PictureUtils } from '../utils/PictureUtils';

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  [@State](/user/State) pictures: Array<string> = [];

  [@Styles](/user/Styles)
  butStyle(){
    .width(200)
    .height(50)
    .margin({ top: 30 })
  }

  async selectAndCompressPicture() {
    this.pictures = [];
    let selectResult: photoAccessHelper.PhotoSelectResult = await PictureUtils.selectPicture(2);
    let pictureUriArr: Array<string> = selectResult.photoUris;
    pictureUriArr.forEach(uri => {
      PictureUtils.compressPicture(uri, "image/jpeg", 20).then((data: ArrayBuffer) => {
        // 将图片转成base64
        let base64Str = buffer.from(data).toString('base64')
        let resultBase64Str = "data:image/png;base64," + base64Str
        this.pictures.push(resultBase64Str)
      })
    });
  }

  build() {
    Column() {
      ForEach(this.pictures, (uri: string) => {
        Image(uri)
          .width(200)
          .height(200)
          .padding({ top: 30 })
      }, (item: string) => item)


      Button("选择图片并压缩", { type: ButtonType.Capsule, stateEffect: false })
        .fontSize('15fp')
        .fontColor('#ffffff')
        .butStyle()
        .onClick(() => {
          this.selectAndCompressPicture()
        })
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }
}

更多关于HarmonyOS 鸿蒙Next 元服务web页面获取到的图片怎么转成base64的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next元服务中，将web页面获取到的图片转换成Base64编码，可以通过以下步骤实现：

  1. 获取图片数据：首先，确保你已经通过web页面成功获取到了图片数据，通常是以Blob对象或者URL的形式存在。

  2. 读取图片数据：使用FileReader API读取图片数据。如果图片是以Blob对象形式存在，可以将其传递给FileReader的readAsDataURL方法。

  3. 转换Base64编码：FileReader的onload事件触发时，其result属性会包含图片的Base64编码字符串。你可以直接使用该字符串。

示例代码如下：

let imageBlob = // 从web页面获取到的图片Blob对象
let reader = new FileReader();
reader.onload = function(e) {
    let base64String = e.target.result.split(',')[1]; // 提取Base64编码部分
    console.log(base64String); // 输出Base64编码
};
reader.readAsDataURL(imageBlob);

注意，上述代码假设你已经有了图片的Blob对象。如果图片是以URL形式存在，你可能需要先通过fetch API或其他方式将其转换为Blob对象。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部