HarmonyOS 如何将系统相册中的图片在h5页面上显示

1、现在已经通过h5页面调起系统的相机并进行拍照。

2、并且将拍照的结果那张图片的路径返回到h5页面。

HarmonyOS

Excelsior_abit

2025-01-09 17:20:33

浏览

回答 1

待解决

回答 1

按赞同

按时间

Heiang

H5中不能直接使用本地路径显示图片，可以将图片转为base64显示，示例参考如下：

import { webview } from '@kit.ArkWeb';
import common from '@ohos.app.ability.common';
import fs from '@ohos.file.fs';
import { util } from '@kit.ArkTS';

// 获取应用文件路径
let context = getContext(this) as common.UIAbilityContext;
let pathDir = context.filesDir; // 应用通用文件路径

let filePath = pathDir + '/picture.png'
let arrayBuff = context.resourceManager.getMediaContentSync($r('app.media.startIcon')).buffer

let file = fs.openSync(filePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
fs.writeSync(file.fd, arrayBuff)
fs.closeSync(file);

@Entry
@Component
struct shaxiangtupian {
  private webviewController: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: $rawfile('资源引用'), controller: this.webviewController })
        .width('100%')
        .height('50%')

      Button("转base64显示图片")
        .onClick(() => {
          let filePath = pathDir + "/picture.png";
          let file1 = fs.openSync(filePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
          let array: ArrayBuffer = new ArrayBuffer(fs.statSync(file1.fd).size)
          fs.readSync(file1.fd, array)
          let unit = new Uint8Array(array)
          let base64 = new util.Base64Helper();
          let mystr = "data:image/png;base64," + base64.encodeToStringSync(unit);
          let base64Str = "myFunction(\"" + mystr + "\")"
          this.webviewController.runJavaScript(base64Str)
          console.log(`wsf: resultBase64Str = ${mystr}`)
        })
    }
  }
}

<!DOCTYPE html>
<html>
<head>
</head>

<body>
</div>
<script>
    function myFunction(base64str) {
    var img = new Image();
    img.width = 200;
    img.height = 200;
    img.src = base64str;
    document.body.appendChild(img);
    }
</script>
</body>
</html>

2025-01-09 19:22:47

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 如何将系统相册中的图片在h5页面上显示

订阅鸿蒙技术特刊，精选内容抢先看