cordova-plugin-camera

1. 插件介绍

cordova-plugin-camera 是 Harmony Cordova 生态系统中一款核心插件，用于为 Cordova 应用提供访问设备摄像头的能力，支持拍摄照片、从相册选取图片，并能对获取的图片进行压缩、裁剪等基础处理。

1.1 核心功能

• 调用设备原生摄像头拍摄照片

• 从设备相册中选择已有的图片

• 配置图片质量、尺寸、格式（JPEG/PNG）

• 支持图片压缩与裁剪

• 提供 base64 编码或文件路径两种图片返回格式

2. 环境要求

• 支持平台：

  • OHOS：API 级别 12（OHOS 5.0）及以上

• 依赖插件：无强制依赖，若需处理图片路径，可搭配 cordova-plugin-file 使用

3. 安装步骤

通过 hcordova CLI 或 npm 即可快速安装插件，支持指定平台安装或全局安装。

3.1 基础安装（全平台）

在 hordova 项目根目录执行以下命令：

#使用 Hcordova CLI 安装

#安装hcordova命令化工具
npm install -g hcordova
#全平台安装插件
hcordova plugin add cordova-plugin-camera

3.2 指定安装到ohos

仅为OHOS 平台安装插件：

#仅安装到 OHOS 平台

hcordova plugin add cordova-plugin-camera --platform ohos

4. OHOS平台配置

OHOS相机功能，调用相机拍摄照片，无需权限申请

config.xml增加配置，显示压缩图片的提示框，showToastText为空，不显示提示框，maxCompressSize为压缩图片最后的大小，单位M，例如2M，压缩无限接近2M的图片

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

5. API 参考

插件核心通过 navigator.camera 对象暴露 API，主要方法为 getPicture()，用于获取图片；辅助方法 cleanup() 用于清理临时文件。

5.1 核心方法：getPicture ()

5.1.1 方法定义

navigator.camera.getPicture(
  successCallback,  // 成功回调（返回图片数据）
  errorCallback,    // 失败回调（返回错误信息）
  options           // 配置参数（可选）
);

5.1.2 回调函数说明

• successCallback(imageData)：

  • 功能：获取图片成功后触发

  • 参数 imageData：根据 options.destinationType 返回不同格式：

    • DATA_URL：返回 base64 编码的图片字符串（格式：data:image/jpeg;base64,...）

    • FILE_URI/NATIVE_URI：返回图片文件的本地路径，该路径可以直接在img标签中引用（如 https://localhost/data/storage/el2/base/haps/entry/cache/17636018073030.png）

• errorCallback(error)：

  • 功能：获取图片失败或用户取消时触发

  • 参数 error：包含错误信息的字符串

5.1.3 配置参数（options）

| 参数名 | 类型 | 可选值 | 默认值 | 说明 | | ------------------ | ------- | ---------------------------------------------------------------------------------------------------------------------- | ---------- | --------------------------------| | quality | Number | 0-100 | 50 | 图片质量（0 最低，100 最高） | | 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| Number | true/false | true | 保持图片正确方向 | | saveToPhotoAlbum | Boolean | true/false | true | OHOS无权限控制，默认保存到相册 | | cameraDirection | Boolean | Direction.BACK Direction.FRONT | BACK | 摄像头（后置摄像头、前置摄像头） |

6. 使用示例

以下提供常见场景的使用示例，涵盖 “拍摄照片”“从相册选图”“获取 base64 图片”。

// 前置摄像头拍摄照片
function openCamera() {
    var options = {
        // Some common settings are 20, 50, and 100
        quality: 100,
        destinationType: Camera.DestinationType.FILE_URI,
        sourceType: Camera.PictureSourceType.CAMERA,
        encodingType: Camera.EncodingType.JPEG,
        mediaType: Camera.MediaType.PICTURE,
        allowEdit: true,
        cameraDirection:Camera.Direction.FRONT,
        correctOrientation: true  //Corrects Android orientation quirks
    }
    navigator.camera.getPicture(function cameraSuccess(imageUri) {
        var elem = document.getElementById('imgInfo1');
        elem.src = imageUri;
        elem.onload = function(){
            document.getElementById('imgSize1').innerHTML = "width:"+elem.naturalWidth+",height:"+elem.naturalHeight;
        }
    }, function cameraError(error) {
        console.debug("Unable to obtain picture: " + error, "app");
    }, options);
}

// 后置摄像头录制视频
function openCameraVod() {
    var options = {
        quality: 100,
        destinationType: Camera.DestinationType.FILE_URI,
        sourceType: Camera.PictureSourceType.CAMERA,
        encodingType: Camera.EncodingType.JPEG,
        mediaType: Camera.MediaType.VIDEO,
        allowEdit: false,
        cameraDirection:Camera.Direction.BACK,
        correctOrientation: true  //Corrects Android orientation quirks
    }
    // var func = createNewFileEntry;
    navigator.camera.getPicture(function cameraSuccess(imageUri) {
        var fileName = imageUri;
    }, function cameraError(error) {
        console.debug("Unable to obtain picture: " + error, "app");
    }, options);
}

// 行相册选择一个图片，指定高度、宽度和压缩图片质量
function openPhoto() {
    var options = {
        quality: 80,
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
        encodingType: Camera.EncodingType.JPEG,
        mediaType: Camera.MediaType.PICTURE,
        targetWidth:800,
        targetHeight:600,
        allowEdit: true,
        correctOrientation: true  //Corrects Android orientation quirks
    }
    navigator.camera.getPicture(function cameraSuccess(imageData) {
        var elem = document.getElementById('imgInfo2');
        elem.src = "data:image/jpeg;base64,"+imageData;
        elem.onload = function(){
            document.getElementById('imgSize2').innerHTML = "width:"+elem.naturalWidth+",height:"+elem.naturalHeight;
        }
    }, function cameraError(error) {
        console.debug("Unable to obtain picture: " + error, "app");
    }, options);
}

7. Apache Cordova插件

Android、iOS插件：npmjs.com

8. 许可证

本插件基于 Apache License 2.0 开源，详情可查看 LICENSE 文件。