第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(): Promise<string> { 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 侧接收并显示 Future<void> 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 坐标》 💬 你在鸿蒙上实现过图像选择吗？欢迎分享经验
