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

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

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

HarmonyOS
2025-01-09 17:20:33
浏览
收藏 0
回答 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>
分享
微博
QQ
微信
回复
2025-01-09 19:22:47
相关问题
H5图片在Web组件显示异常
625浏览 • 1回复 待解决
HarmonyOS H5页面保存图片到本地相册
382浏览 • 1回复 待解决
HarmonyOS h5页面如何接入智能图片picker
321浏览 • 1回复 待解决
如何HarmonyOS调试h5页面
1294浏览 • 1回复 待解决
HarmonyOS h5如何实现保存图片相册
491浏览 • 1回复 待解决
HarmonyOS h5客服无法上传相册图片
286浏览 • 1回复 待解决
HarmonyOS h5页面缩放问题
1104浏览 • 1回复 待解决
H5页面如何与ArkTS交互
3562浏览 • 1回复 待解决
HarmonyOS H5如何访问相册
656浏览 • 1回复 待解决
HarmonyOS H5页面localstorage为null
383浏览 • 1回复 待解决
HarmonyOS webview H5页面事件监听
524浏览 • 1回复 待解决
Web组件和h5页面如何交互?
646浏览 • 1回复 待解决
HarmonyOS H5页面加载缓存机制
717浏览 • 1回复 待解决
HarmonyOS 原生和H5页面交互
332浏览 • 1回复 待解决