问答博客资讯标签用户活动
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 拦截H5方法进行打开相册进行照片选择？

头像
HarmonyOS码上奇行
    12.2k16329

    如题：HarmonyOS 拦截H5方法进行打开相册进行照片选择？

    HarmonyOSharmonyosharmonyos-next
    阅读 494
    1 个回答
    得票最新
    头像
    HarmonyOS码上奇行
      12.2k16329

      可以使用onShowFileSelector来拦截h5中的input拉起系统相册的方法，参考文档及示例代码如下：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5\#onshowfileselector9

      <!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>
      Web({ src: $rawfile('TestonShowFileSelector.html'), controller: this.controller })
  .javaScriptAccess(true)
  .domStorageAccess(true)
  .onShowFileSelector((event) => {
    // //-------调用相册-------------------------
    console.log('MyFileUploader onShowFileSelector invoked')
    const photoSelectOptions = new picker.PhotoSelectOptions();
    // 过滤选择媒体文件类型为IMAGE_VIDEO_TYPE
    photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE;
    // 选择媒体文件的最大数目
    photoSelectOptions.maxSelectNumber = 2;
    //let uris: Array<string> = [];
    const photoViewPicker = new picker.PhotoViewPicker();
    photoViewPicker.select(photoSelectOptions).then((photoSelectResult: picker.PhotoSelectResult) => {
      this.uris = photoSelectResult.photoUris;
      let file1 = fs.openSync(this.uris[0])
      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 = base64.encodeToStringSync(unit);
      this.base64Str = "myFunction(\"" + mystr + "\")"
      this.controller.runJavaScript(this.base64Str)
      console.info('photoViewPicker.select to file succeed and uris are:' +
      this.uris); //file://media/Photo/11/IMG_1713942933_005/IMG_20240424_151353.jpg
    }).catch((err: BusinessError) => {
      console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
    })
    return false
  })
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题