HarmonyOS 鸿蒙Next 浏览器上怎么直接调用相册相机，用js，应用内和非应用内

发布于 1周前 作者 itying888 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 浏览器上怎么直接调用相册相机，用js，应用内和非应用内 浏览器上怎么直接调用相册相机，用js，应用内和非应用内，尝试用uni.chooseImage发现不支持

Harmonyos Next教程
2 回复 
PhotoViewPicker中拿到uri后需要将换片缓存在cache中读取上传

参考：

```javascript
import request from '[@ohos](/user/ohos).request';
import picker from '[@ohos](/user/ohos).file.picker';
import fs, { ReadOptions } from '[@ohos](/user/ohos).file.fs';
import common from '[@ohos](/user/ohos).app.ability.common';

let context = getContext(this) as common.UIAbilityContext;
let cacheDir = context.cacheDir;

[@Entry](/user/Entry) struct page {
  private openPhotoPicker() {
    let photoPicker = new picker.PhotoViewPicker();
    photoPicker.select({ MIMEType: picker.PhotoViewMIMETypes.IMAGE_TYPE, maxSelectNumber: 1 }, (error, result) => {
      if (result) {
        result.photoUris.forEach(uri => {
          let file = fs.openSync(uri, fs.OpenMode.CREATE);
          fs.copyFileSync(file.fd, cacheDir + '/test.jpeg')
          this.uploadImage(['internal://cache/test.jpeg']);
        })
      }
    });
  }

  private uploadImage(paths: string[]) {
    let allFiles = Array<request.File>()
    let header = new Map<Object, string>();
    header.set('key1', 'value1');
    header.set('key2', 'value2');

    for (let i = 0; i < paths.length; i++) {
      let path = paths;
      allFiles[i] = {
        name: "image" + i + ".jpeg",
        filename: "image" + i + ".jpeg",
        uri: paths[i],
        type: "image"
      }
    }

    let data: Array<ArrayBufferData> = [{ name: 'name', value: 'value' }];

    let uploadConfig: request.UploadConfig = {
      url: "http://XXX",
      header: header,
      method: 'POST',
      files: allFiles,
      data: data
    }

    try {
      request.uploadFile(getContext(this), uploadConfig, (error, response) => {
        if (response) {
          response.on('progress', (uploadedSize: number, totalSize: number) => {
            console.log("progress, uploadedSize: " + uploadedSize + ", totalSize: " + totalSize)
          })
        } else {
          console.log("upload failure: " + error)
        }
      });
    } catch (error) {
      console.log("upload failure: " + error)
    }
  }

  build() {}
}

调相机

[@Entry](/user/Entry)
[@Component](/user/Component)
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  //定义一个全局的string类型的数组，用来存放通过picker拉起后选择完图片后图片的uri
  [@State](/user/State) uris: Array<string> = []

  aboutToAppear() {
    web_webview.WebviewController.setWebDebuggingAccess(true);
  }

  build() {
    Column() {
      Button("get uri").onClick(() =>{
        console.log("testTag - " + this.uris[0])
      })

      //用来展示选择的图片
      Image(this.uris[1]).width(100).height(100)

      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=>{
          let str:string = res.want?.parameters!["resourceUri"] as string
          let fd = fs.openSync(str).fd
          let arr:ArrayBuffer = new ArrayBuffer(128)
          fs.readSync(fd,arr)
          console.log("testTag - " + str);
          this.uris[0] = str
        })

        return false
      })
    }
  }
}

h5侧通用：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
<script>
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/jpeg" capture="camera"/>

  <!-- 添加一个图片元素用于展示图片 -->
  <img id="preview" />
</form>
</body>
</html>

更多关于HarmonyOS 鸿蒙Next 浏览器上怎么直接调用相册相机，用js，应用内和非应用内的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next浏览器中，若要通过JavaScript直接调用相册或相机，无论是应用内还是非应用内环境，通常需要依赖鸿蒙系统提供的API或特定的权限及接口。但直接在浏览器中实现这一功能较为复杂，因为浏览器通常限制了对系统硬件的直接访问以保护用户隐私。

不过，如果是在鸿蒙应用开发中，可以通过鸿蒙的Ability（能力）和权限管理来实现相机和相册的调用。但在纯Web环境中（即非鸿蒙应用内），这种直接调用通常不被支持，因为Web标准安全模型限制了网页对系统硬件的直接访问。

对于鸿蒙应用内的Web视图（WebView），开发者可能需要通过鸿蒙的Native代码（如使用ArkUI或ETS UI框架）来封装相机和相册的调用接口，并通过JavaScript与Native代码进行交互。这通常涉及到在Native代码中定义JavaScript接口，并在Web页面中通过特定的JS调用这些接口。

如果需要在鸿蒙浏览器中实现类似功能，可能需要考虑引导用户通过文件选择器（通常是由<input type="file">触发）来访问相册，但直接调用相机则较为困难，且通常不被浏览器支持。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部