问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

HarmonyOS webview中的页面使用input唤起拍照问题？

头像
HarmonyOS码上奇行
    5.4k25

    webview中的页面使用input标签 type=“file” accept=“image/*” capture=“camera” 未直接唤起拍照，而是弹出选项需要 选择 图片，拍照，文件。

    HarmonyOSharmonyosharmonyos-next
    阅读 407
    1 个回答
    得票最新
    头像
    HarmonyOS码上奇行
      5.4k25

      可以参考以下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>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      logo
      HarmonyOS
      子站问答
      访问
      宣传栏