@ionic-native/camera

本项目基于 @ionic-native/[email protected] 开发。

简介

一个用于访问设备摄像头的插件，支持拍摄照片、从相册选取图片，并能对获取的图片进行压缩、裁剪等基础处理。兼容Android、iOS和OpenHarmony平台，为跨平台应用开发提供统一的图片获取能力。本文档主要说明在OpenHarmony系统中的应用。

在移动应用开发中，摄像头访问和图片选择是常见的功能需求，常用于头像上传、图片分享、扫码识别等场景。@ionic-native/camera插件通过封装原生平台API，为开发者提供了统一的跨平台接口，无需深入原生开发即可实现拍照和相册选择功能。

支持平台

• OpenHarmony：5.0+

下载安装

通过命令行或手动引入即可快速安装插件，支持从npm仓库获取。

命令行安装（推荐）

安装hionic CLI：

npm install -g hionic

以下两种方式中任选其一即可，无需重复操作：

npm安装：

# 安装插件
npm install @ionic-native/camera

# 同步插件
hionic sync

hionic CLI安装：

hionic plugin add @ionic-native/camera

手动引入安装

1.添加插件配置

根据plugin.xml的config-json项，找到entry模块中config.xml文件，并根据param标签添加配置

<feature name="Camera">
  <param name="harmony-package" value="CameraLauncher" />
</feature>

2.修改 CMake 配置

根据plugin.xml的CMakeLists项，找到cordova模块，路径为target字段的文件CMakeLists.txt，添加add_library

add_library(cordova SHARED
  // ...
  camera/CameraLauncher.cpp
  // ...
)

3.复制源码文件

根据plugin.xml的source-file项，将src字段的路径代码复制到cordova模块中target-dir字段的目录中:

将源码中src/main/cpp/Camera目录下的CameraLauncher.h、CameraLauncher.cpp文件引入到cordova模块中src/main/cpp/camera目录下。

将源码中src/main/ets/components/ImageCompress目录下的CameraAction.ets文件引入到cordova模块中src/main/ets/components/ImageCompress目录下。

将源码中src/main/ets/components/MediaAction目录下的MediaAction.ets文件引入到cordova模块中src/main/ets/components/MediaAction目录下。

4.添加ets文件路径

在cordova模块的build-profile.json5文件中，buildOption/arkOptions/runtimeOnly/sources配置项数组中加入步骤3中拷贝的ets文件路径:

"buildOption":{
  "arkOptions": {
    "runtimeOnly": {
      "sources": [
        // ...
        "./src/main/ets/components/ImageCompress/CameraAction.ets",
        "./src/main/ets/components/MediaAction/MediaAction.ets"
        // ...
      ]
    }
  }
}

卸载

# hionic CLI卸载
hionic plugin remove @ionic-native/camera

约束与限制

兼容性

在以下版本中已测试通过：

1. SDK: 5.0.5(17); IDE: DevEco Studio: 6.0.0; ROM: 5.1.0.150;

权限要求

OpenHarmony权限参考申请应用权限 ，使用相机拍摄功能需要配置相机权限，在主工程的module.json5的requestPermissions数组中添加以下权限配置：

{
  "name": "ohos.permission.CAMERA",
  "reason": "$string:camera",
  "usedScene": {
    "abilities": [
      "EntryAbility"
    ],
    "when": "always"
  }
}

使用示例

示例1：拍摄照片

实现调用摄像头拍摄照片的功能。

import { Camera, CameraOptions } from '@ionic-native/camera';

const options: CameraOptions = {
  quality: 50,
  destinationType: Camera.DestinationType.FILE_URI,
  sourceType: Camera.PictureSourceType.CAMERA,
  encodingType: Camera.EncodingType.JPEG,
  targetWidth: -1,
  targetHeight: -1,
  mediaType: Camera.MediaType.PICTURE,
  correctOrientation: true,
  saveToPhotoAlbum: true,
  cameraDirection: Camera.Direction.BACK
};

try {
  const imageData = await Camera.getPicture(options);
  console.log('拍照成功:', imageData);
} catch (error) {
  console.error('拍照失败:', error);
}

示例2：从相册选择图片

实现从相册选择图片的功能。

import { Camera, CameraOptions } from '@ionic-native/camera';

const options: CameraOptions = {
  quality: 50,
  destinationType: Camera.DestinationType.FILE_URI,
  sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
  encodingType: Camera.EncodingType.JPEG,
  targetWidth: -1,
  targetHeight: -1,
  mediaType: Camera.MediaType.PICTURE,
  correctOrientation: true
};

try {
  const imageData = await Camera.getPicture(options);
  console.log('选择图片成功:', imageData);
} catch (error) {
  console.error('选择图片失败:', error);
}

使用说明

插件在全局对象 Camera 下暴露所有功能接口，使用前需确保设备就绪事件（deviceready）已触发。

1. 获取图片

调用摄像头或从相册获取图片，返回图片路径或Base64数据。

方法签名

Camera.getPicture(options: CameraOptions)

CameraOptions 参数说明

| 属性 | 类型 | 描述 | | ------------------------------ | ------------------- | ------------ | | quality | number | 图片质量（0 最低，100 最高），默认值：50 | | destinationType | number | 图片返回格式，可选值：Camera.DestinationType.DATA_URL Camera.DestinationType.FILE_URI Camera.DestinationType.NATIVE_URI，默认值：FILE_URI | | sourceType | number | 图片来源（摄像头 / 相册 / 保存的相册），可选值：Camera.PictureSourceType.CAMERA Camera.PictureSourceType.PHOTOLIBRARY Camera.PictureSourceType.SAVEDPHOTOALBUM，默认值：CAMERA | | allowEdit | boolean | 是否允许用户编辑图片（仅支持true值，该字段已弃用，兼容Android/iOS而保留），默认值：true | | encodingType | number | 图片编码格式，可选值：Camera.EncodingType.JPEG Camera.EncodingType.PNG，默认值：JPEG | | targetWidth | number | 图片目标宽度（像素），会按比例缩放，正整数，默认值：-1(原尺寸) | | targetHeight | number | 图片目标高度（像素），会按比例缩放，正整数，默认值：-1(原尺寸) | | mediaType | number | 媒体类型（仅图片 / 仅视频 / 所有媒体），可选值：Camera.MediaType.PICTURE Camera.MediaType.VIDEO Camera.MediaType.ALLMEDIA，默认值：PICTURE | | correctOrientation | boolean | 保持图片正确方向，true/false，默认值：true | | saveToPhotoAlbum | boolean | openHarmony默认保存到相册，true/false，默认值：true | | cameraDirection | number | 摄像头（后置摄像头、前置摄像头），可选值：Camera.Direction.BACK Camera.Direction.FRONT，默认值：BACK |

配置

以下配置可用

| 数据 | 类型 | 描述 | |-------|------|------| | CameraImageCompress | boolean | true | | maxCompressSize | number | 压缩图片最大大小，单位M，无默认值。未配置时，压缩图片大小以压缩质量参数为准。 | | showToastText | string | 压缩图片时显示的提示内容，为空不显示提示 |

配置示例

在config.xml中添加以下配置：

<!--config.xml不配置，小于100的压缩质量参数生效，不以maxCompressSize为准，压缩时showToastText提醒内容为："压缩图片，请稍后"-->
<!--config.xml增加配置以下，小于100的压缩质量参数失效，以maxCompressSize为准，显示压缩图片的提示框内容，showToastText为空，不显示提示框，maxCompressSize为压缩图片最后的大小，单位M，例如2M，压缩无限接近2M的图片-->
<preference name="CameraImageCompress" value="true" maxCompressSize="2" showToastText="处理中..." />

目录结构

|---- 目录
|     |---- src/main  # 插件的实现代码
|           |---- cpp  # C++ 代码
|           |---- ets  # ArkTS 代码
|     |---- www    # Web 侧代码
|     |---- README.md          # 说明文档
|     |---- package.json       # 配置文件
|     |---- plugin.xml         # 插件配置文件

参考资料

1. Android、iOS插件说明：Apache Cordova 官方文档

2. OpenHarmony系统相机开发指导：OpenHarmony 开发者文档

贡献代码

使用过程中发现任何问题都可以提 Issue，当然，也非常欢迎发 PR 共建。

许可证

本插件基于 Apache License 2.0 开源，详见 LICENSE 文件。