HarmonyOS 鸿蒙Next中如何将系统相册中的图片在h5页面上显示
HarmonyOS 鸿蒙Next中如何将系统相册中的图片在h5页面上显示 操作步骤：
1、现在已经通过h5 页面调起 系统的相机并进行拍照
2、并且将拍照的结果那张图片的路径返回到h5 页面
那我该如何向这张图片显示到h5 页面上，我直接将这个路径赋值给 img 标签的src 是不行的，是不是需要处理成何种格式才能在h5 页面上显示
3 回复
ets参考代码：
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('shaxiangtupian.html'), 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}`)
})
}
}
}
H5参考代码：更多关于HarmonyOS 鸿蒙Next中如何将系统相册中的图片在h5页面上显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中，将系统相册中的图片在H5页面上显示可以通过以下步骤实现：
- 获取图片URI：使用
[@ohos](/user/ohos).file.picker模块中的PhotoViewPicker选择器获取系统相册中的图片URI。 - 读取图片数据：使用
[@ohos](/user/ohos).file.fs模块中的fs.read方法读取图片数据。 - 将图片数据转换为Base64：使用
[@ohos](/user/ohos).util.base64模块将图片数据转换为Base64编码。 - 在H5页面上显示：将Base64编码的图片数据嵌入到H5页面的
<img>标签中。
示例代码如下：
import picker from '[@ohos](/user/ohos).file.picker';
import fs from '[@ohos](/user/ohos).file.fs';
import base64 from '[@ohos](/user/ohos).util.base64';
async function selectAndDisplayImage() {
// 1. 获取图片URI
const photoPicker = new picker.PhotoViewPicker();
const result = await photoPicker.select();
const uri = result[0];
// 2. 读取图片数据
const file = fs.openSync(uri, fs.OpenMode.READ_ONLY);
const buffer = new ArrayBuffer(1024 * 1024); // 1MB buffer
const readLen = fs.readSync(file.fd, buffer);
fs.closeSync(file);
// 3. 将图片数据转换为Base64
const base64Data = base64.encodeFromByteArray(new Uint8Array(buffer, 0, readLen));
// 4. 在H5页面上显示
const imgElement = document.createElement('img');
imgElement.src = 'data:image/jpeg;base64,' + base64Data;
document.body.appendChild(imgElement);
}
selectAndDisplayImage();
``
通过以上步骤，可以在H5页面上显示从系统相册中选择的图片。
