HarmonyOS 鸿蒙Next Web 展示相册中的图片

发布于 1周前 作者 yibo5220 最后一次编辑是 5天前 来自 鸿蒙OS

从相册中选择文件，在H5 页面上展示。现在可以从相册中返回数据，但是在 H5 上图片显示不出来，直接图裂了

下面是选择图片的代码

// maxSelectNumber: 可以根据最大可选择的图片数量进行传值配置
private onPhotoBtnClick(maxSelectNumber: number, callbackContext: CallbackContext) {
  try {
    // 通过picker拉起图库的图片
    let photoOption = new picker.PhotoSelectOptions(); // 创建图库对象实例
    photoOption.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择文件类型为IMAGE
    photoOption.maxSelectNumber = maxSelectNumber; // 选择图片的最大数目
    let photoPicker = new picker.PhotoViewPicker();
    photoPicker.select(photoOption).then((photoResult) => {
      let infoW: number = 0;
      let infoH: number = 0;
      try {
        let file = fileIo.openSync(photoResult.photoUris[0], fileIo.OpenMode.READ_ONLY);
        const imageSourceApi = image.createImageSource(file.fd);
        imageSourceApi.getImageInfo(0, (error: BusinessError, imageInfo) => {
          if (imageInfo == undefined) {
            CordovaLog.e(Constants.TAG ,`Failed to get imageInfo by callbak. Code: ${error.code}, message: ${error.message}`);
            return;
          }
          infoW = imageInfo.size.width;
          infoH = imageInfo.size.height;
        })
      } catch (error) {
        CordovaLog.e(Constants.TAG ,`Failed to get imageInfo. Code: ${error.code}, message: ${error.message}`);
        callbackContext.errorByJson(error)
        return;
      }
      try {
        // 返回给前端的值
        this.callbackPhotoUris(photoResult.photoUris, callbackContext)
      } catch (error) {
        CordovaLog.e(Constants.TAG ,`Failed to decode. Code: ${error.code}, message: ${error.message}`);
        callbackContext.errorByJson(error)
      }
    })
  } catch (error) {
    CordovaLog.e(Constants.TAG ,`Failed to select photo. Code: ${error.code}, message: ${error.message}`);
    callbackContext.errorByJson(error)
  }
}

private callbackPhotoUris(photoUris: Array<string>, callbackContext: CallbackContext) {
  let result: Array<object> = []
  let cacheDir = this.cordova?.getAbilityContext().cacheDir;
  photoUris.forEach((photoUri, index) => {

    let splitArray = photoUri.split('/')
    let randomXIndex = Math.trunc(1000 * Math.random());
    let fileName = randomXIndex + '_' + splitArray[splitArray.length - 1]

    let cacheFullPath = cacheDir + '/' + fileName
    let file = fs.openSync(photoUri, fs.OpenMode.CREATE);

    // 复制文件到缓存目录下
    fs.copyFileSync(file.fd, cacheFullPath)

    //internal://cache代表fullPath 的文件路径
    let cachePath = `internal://cache/${fileName}`

    result.push(new Object({
      path: cachePath, uri: cachePath,
      size: 0, file_length: 0, name: fileName,
      index: index, mediaType: 'image'
    }))
  })
  callbackContext.successByJson(result)
}

下面是 H5 展示的代码

// html

<img :src="imgUrl" @click="fileOperation(file)">

// js

let pic = new UploadMedia(objThis,{photoOptions:{maxSelectCount: 1}})
pic.getCustomPhoto(results=>{
objThis.imgUrl = results[0].uri
objThis.changeImg = true
// this.harmonyPreviewImage()
},error=>{
objThis.$root.toast('选取照片错误：' + error)
})

更多关于HarmonyOS 鸿蒙Next Web 展示相册中的图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复
好的，。目前的方案就是获取图片后转换成base64字符串然后在前端显示。若不符合需求，您可以自行上传至服务器再预览。

更多关于HarmonyOS 鸿蒙Next Web 展示相册中的图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next Web展示相册中的图片，可以通过以下步骤实现：

  1. 获取相册权限：首先，需要在应用的manifest文件中声明访问相册的权限。这通常包括读取存储空间的权限。

  2. 选择图片：使用鸿蒙系统提供的媒体选择器API，让用户从相册中选择图片。该API会返回一个包含所选图片路径的列表。

  3. 加载图片：利用鸿蒙系统的图片加载组件，如Image，将用户选择的图片路径设置给该组件的src属性。鸿蒙系统提供了高效的图片加载和缓存机制，以确保图片的流畅显示。

  4. 展示图片：将加载的图片组件添加到页面的布局中，即可在Next Web页面上展示用户选择的相册图片。

  5. 处理异常：在加载和展示图片的过程中，需要处理可能发生的异常，如权限被拒绝、图片路径无效等。

示例代码（伪代码）：

// 假设已有选择图片的函数selectImage()
selectImage().then(imagePaths => {
    imagePaths.forEach(path => {
        let imageElement = document.createElement('image');
        imageElement.src = path;
        document.body.appendChild(imageElement);
    });
}).catch(error => {
    console.error('Error loading images:', error);
});

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

回到顶部