HarmonyOS 鸿蒙Next H5访问相册的demo示例

HarmonyOS 鸿蒙Next H5访问相册的demo示例

H5访问相册的demo示例

2 回复

此demo用于当web组件加载一个h5页面时，用与h5页面用input标签调用手机相册以及系统相机。 注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。注册后，须调用refresh接口生效。注册对象的名称，与window中调用的对象名一致。注册后window对象可以通过此名字访问应用侧JavaScript对象。

import business_error from '[@ohos](/user/ohos).base';
import picker from '[@ohos](/user/ohos).file.picker';
import { BusinessError } from '[@ohos](/user/ohos).base';
import common from '[@ohos](/user/ohos).app.ability.common';
import web_webview from '[@ohos](/user/ohos).web.webview';
class pickImage {
 constructor() {
 }
 testPickImage(): string {
   try {
     let PhotoSelectOptions = new picker.PhotoSelectOptions();
     PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
     PhotoSelectOptions.maxSelectNumber = 5;
     let photoPicker = new picker.PhotoViewPicker();
     photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult: picker.PhotoSelectResult) => {
       console.info('PhotoViewPicker.select successfully, PhotoSelectResult uri: ' + JSON.stringify(PhotoSelectResult));
     }).catch((err: BusinessError) => {
       console.error('PhotoViewPicker.select failed with err: ' + JSON.stringify(err));
     });
   } catch (error) {
     let err: BusinessError = error as BusinessError;
     console.error('PhotoViewPicker failed with err: ' + JSON.stringify(err));
   }
   return '121';
 }
}
class cameraImage {
 constructor() {
 }
 testCameraImage(): string {
   const context = getContext(this) as common.UIAbilityContext
   context.startAbilityForResult({
     action:"ohos.want.action.imageCapture",
     parameters:{
       callBundleName:"com.hm.imageshow"
     }
   },(err,data) => {
     console.info("imageCapture:" + `${JSON.stringify(data)}`)
   })
   return '1221';
 }
}
[@Entry](/user/Entry)
[@Component](/user/Component)
struct photo {
 controller: web_webview.WebviewController = new web_webview.WebviewController();
 [@State](/user/State) webPickImage: pickImage = new pickImage();
 [@State](/user/State) webCameraImage: cameraImage = new cameraImage();
 aboutToAppear(){
   // 配置Web开启调试模式
   web_webview.WebviewController.setWebDebuggingAccess(true);
 }
 build() {
   Column() {
     Button('refresh')
       .onClick(() => {
         try {
           this.controller.refresh();
         } catch (error) {
           let e: business_error.BusinessError = error as business_error.BusinessError;
           console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
         }
       })
     Button('Register JavaScript To Window')
       .onClick(() => {
         try {
           this.controller.registerJavaScriptProxy(this.webPickImage, "pickImageName", ["testPickImage"]);
           this.controller.registerJavaScriptProxy(this.webCameraImage, "cameraImageName", ["testCameraImage"]);
         } catch (error) {
           let e: business_error.BusinessError = error as business_error.BusinessError;
           console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
         }
       })
     Web({ src: $rawfile('Test1128.html'), controller: this.controller })
       .javaScriptAccess(true)
   }
 }
}

html:

<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="pickImage()">唤起图库</button>
<button type="button" onclick="cameraImage()">唤起照相机</button>
<p id="demo"></p>
<script>
    function pickImage() {
         let str=pickImageName.testPickImage();
    }
    function cameraImage(){
           let str2=cameraImageName.testCameraImage();
    }
</script>
</body>
</html>

更多关于HarmonyOS 鸿蒙Next H5访问相册的demo示例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


以下是一个HarmonyOS鸿蒙Next H5访问相册的demo示例代码：

index.html

<!DOCTYPE html>
<html>
<head>
    <title>访问相册示例</title>
</head>
<body>
    <button id="selectPhoto">选择照片</button>
    <img id="photoDisplay" src="" alt="照片预览" style="display:none;">
    <script src="app.js"></script>
</body>
</html>

app.js

document.getElementById('selectPhoto').addEventListener('click', function() {
    plus.io.resolveLocalFileSystemURL('_documents/', function(entry) {
        entry.getDirectory('DCIM', {create: true}, function(dcimDir) {
            dcimDir.createReader().readEntries(function(entries) {
                for (var i = 0; i < entries.length; i++) {
                    if (entries[i].isFile && entries[i].name.endsWith('.jpg')) {
                        var imgUrl = entries[i].toLocalURL();
                        document.getElementById('photoDisplay').src = imgUrl;
                        document.getElementById('photoDisplay').style.display = 'block';
                        break; // 仅显示第一张图片作为示例
                    }
                }
            });
        });
    });
});

manifest.json（需要配置权限）

{
    "module": {
        "requests": [
            "ohos.permission.READ_MEDIA"
        ]
    }
}

上述代码实现了在HarmonyOS鸿蒙Next H5应用中通过点击按钮访问相册并显示第一张图片的功能。如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部