2026/1/12 23:20:51
网站建设
项目流程
建设 网站工作汇报,网站建设岗位风险防控,网站下面 备案,中国最著名网站建设公司第13篇#xff1a;调用摄像头与相册#xff1a;图像采集与展示
# Flutter 鸿蒙实战30讲#xff08;13#xff09;#xff1a;调用摄像头与相册#xff1a;图像采集与展示 作者#xff1a;烟云任平生 发布时间#xff1a;2025年12月13日 标签#x…第13篇调用摄像头与相册图像采集与展示# Flutter × 鸿蒙实战30讲13调用摄像头与相册图像采集与展示 作者烟云任平生 发布时间2025年12月13日 标签#Flutter #OpenHarmony #摄像头 #相册 #CSDN --- ### 一、目标 让 Flutter 应用具备 **拍照** 和 **选择相册图片** 能力并将结果回传至 Flutter 显示。 --- ### 二、权限配置 json { requestPermissions: [ { name: ohos.permission.CAMERA }, { name: ohos.permission.READ_IMAGEVIDEO }, { name: ohos.permission.WRITE_IMAGEVIDEO } ] } 三、ArkTS 实现图像选择 // imagePicker.ts import picker from ohos.multimedia.photoAccessHelper; import abilityAccessCtrl from ohos.abilityAccessCtrl; export class ImagePicker { private static context getContext(); static async pickImage(): Promisestring { const atManager abilityAccessCtrl.createAtManager(); try { await atManager.requestPermissionsFromUser(this.context, [ ohos.permission.READ_IMAGEVIDEO ]); } catch { throw new Error(Permission denied); } // OpenHarmony 暂无官方图像选择器此处模拟返回本地路径 // 实际可结合 FilePicker 或自定义 UI return file://data/storage/el2/base/haps/entry/files/sample.jpg; } } ⚠️ 注OpenHarmony 标准系统暂未提供 photoPicker需自行实现文件选择界面或使用社区方案。 四、简化方案预存测试图 为快速验证可将测试图放入 rawfile/test.jpg并通过以下方式返回 base64 // 将 rawfile 图片转为 base64仅用于演示 const buffer getContext().resourceManager.getRawFileContentSync(test.jpg); const base64 util.Base64.encodeToString(buffer); return data:image/jpeg;base64, base64; 五、Flutter 侧接收并显示 Futurevoid selectImage() async { final bridge html.window[ImageAPI]; final imageUrl await bridge.callMethod(pickImage); if (imageUrl is String) { setState(() { _imagePath imageUrl; // 可直接用于 Image.network }); } } Widget build(BuildContext context) { return Column( children: [ if (_imagePath ! null) Image.network(_imagePath!), ElevatedButton(onPressed: selectImage, child: Text(选择图片)) ], ); } 六、未来展望 待 OpenHarmony 官方提供 PhotoPicker 后可无缝替换底层实现Flutter 代码无需改动。 下一篇预告《第14讲位置服务集成获取 GPS 坐标》 你在鸿蒙上实现过图像选择吗欢迎分享经验