可以参考以下demo直接唤起拍照：//index.ets import web_webview from '@ohos.web.webview' import { common } from '@kit.AbilityKit' import { uri, util } from '@kit.ArkTS' import fs from '@ohos.file.fs'; import picker from '@ohos.file.picker' import { BusinessError } from '@kit.BasicServicesKit'; class testClass { base64Str: string constructor(base64Str:string) { this.base64Str=base64Str; } test(): string { return "2123"; } toString(): void { console.log('Web Component toString'); } } @Entry @Component struct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() //定义一个全局的string类型的数组，用来存放通过picker拉起后选择完图片后图片的uri @State uris: Array<string> = [] @State base64Str : string = "" @State testObj: testClass = new testClass(this.base64Str); aboutToAppear() { web_webview.WebviewController.setWebDebuggingAccess(true); } build() { Column() { Web({ src: $rawfile('TestonShowFileSelector.html'), controller: this.controller }) .javaScriptAccess(true) .domStorageAccess(true) .onShowFileSelector((event) => { //-----相机-------------------------------- const context = getContext(this) as common.UIAbilityContext context.startAbilityForResult({ action:"ohos.want.action.imageCapture", parameters:{ callBundleName:"com.hm.imageshow" } }).then((res)=>{ console.log("testTag - " +JSON.stringify(res)); let str:string = res.want?.parameters!["resourceUri"] as string console.log("str"+str);//file://media/Photo/11/IMG_1713942933_005/IMG_20240424_151353.jpg let fd = fs.openSync(str).fd this.uris[0] = str let arr:ArrayBuffer = new ArrayBuffer(128) fs.readSync(fd,arr) console.log("testTag - " + str); }) return false }) } } }TestonShowFileSelector.html<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"> <script> function myFunction(mystr) { var img = new Image(); img.width = 100; img.height = 50; img.src = "data:image/png;base64,"+mystr; document.body.appendChild(img); <!-- let str=objName.test()--> console.log(mystr) console.log("这部分是将arkts发送过来的str渲染到h5页面上，或者存在h5侧的变量中") } window.onload = function() { // 获取文件输入元素 var fileInput = document.getElementById('upload'); // 监听文件输入的改变事件 fileInput.addEventListener('change', function(e) { // 获取选中的文件 var file = e.target.files[0]; // 创建一个FileReader对象 var reader = new FileReader(); // 定义文件读取完成后的回调函数 reader.onloadend = function() { // 获取图片元素 var img = document.getElementById('preview'); // 将读取到的结果赋值给图片元素的src属性 img.src = reader.result; } // 读取文件内容 if (file) { reader.readAsDataURL(file); } }); } </script> </head> <body> <form id="upload-form" enctype="multipart/form-data"> <!-- 修改type属性为camera --> <input type="file" id="upload" name="upload" accept="image/*" capture="camera" /> <!-- 添加一个图片元素用于展示图片 --> <img id="preview"/> </form> <div id="155134"></div> </body> </html>
极客观点
项目管理
HarmonyOS
可以参考以下demo直接唤起拍照：
TestonShowFileSelector.html