@cordova-ohos/cordova-plugin-mediapicker-dmcsdk

v2.4.5

Published

4 months ago

Cordova mediapicker Plugin

0High
0Medium
0Low

cordova mediapicker ecosystem:cordova cordova-openharmony

cordova-plugin-mediapicker-dmcsdk

插件简介

cordova-plugin-mediapicker-dmcsdk 是一款功能强大的 Cordova 媒体选择插件，提供跨平台、高性能的图片 / 视频选择与预览解决方案。插件支持单张 / 多张图片选择、视频选择、图片预览、裁剪、压缩等核心功能，适配 Android/iOS/OHOS 原生媒体库，支持自定义选择数量、文件类型、裁剪比例、压缩质量，适用于头像上传、朋友圈发布、视频投稿、附件上传等各类场景，大幅降低混合应用的媒体处理开发成本。

插件核心优势：

跨平台兼容：统一 Android/iOS/OHOS 媒体选择逻辑，API 调用无需区分平台
功能全面：支持图片 / 视频选择、预览、裁剪、压缩、多图批量选择
高性能：媒体加载速度快，支持超大图 / 长视频处理，无卡顿
高度可定制：自定义选择数量、文件类型、裁剪比例、压缩质量、UI 样式
原生体验：调用原生系统媒体库，保持平台一致的操作体验
安全可靠：自动处理存储 / 相册权限申请，支持文件路径获取、Base64 转换

安装与卸载

安装步骤

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


# 安装hcordova
npm install -g hcordova

# 基础安装（推荐稳定版）
hcordova plugin add cordova-plugin-mediapicker-dmcsdk --platform ohos

# 从 GitCode 安装（获取最新开发版）
hcordova plugin add https://gitcode.com/OpenHarmony-Cordova/cordova-plugin-mediapicker-dmcsdk.git --platform ohos

# 安装指定版本
hcordova plugin add [email protected]  --platform ohos

卸载步骤

如需移除插件，执行以下命令：


# 全平台卸载
hcordova plugin remove cordova-plugin-mediapicker-dmcsdk

# 指定OHOS卸载
hcordova plugin remove cordova-plugin-mediapicker-dmcsdk --platform ohos

API 文档

插件暴露全局对象 window.MediaPicker，所有方法均支持 Promise 语法或回调函数语法，核心 API 如下：

1. 选择多张图片

function getMedias() {
    var args = {
        'selectMode': 100, //101=picker image and video , 100=image , 102=video
        'maxSelectCount': 40 //default 40 (Optional)
    };

    MediaPicker.getMedias(args, function(medias) {
        //medias [{mediaType: "image", path:'/data/storage/el2/base/2017.jpg', uri:"OHOS URI" size: 21993}]
        var src = "";
        for (var i = 0; i < medias.length; i++) {
            src += "<img src='https://localhost" + medias[i].path + "' width='100%' />"
        }
        console.log(src);
        document.getElementById("imgInfo").innerHTML = src;
        //getThumbnail(medias);
    }, function(e) { console.log(e) })
}

2. 选择一个视频

function getMediasVod() {
    var args = {
        'selectMode': 102, //101=picker image and video , 100=image , 102=video
        'maxSelectCount': 1 //default 40 (Optional)
    };

    MediaPicker.getMedias(args, function(medias) {
        //medias [{mediaType: "image", path:'/data/storage/el2/base/2017.mp4', uri:"OHOS URI" size: 21993}]
        if(medias.length > 0) {
            fileName = "https://localhost"+medias[0].path;
        }
    }, function(e) { console.log(e) })
}

3. 选择图片缩略图

function extractThumbnail() {
    var args = {
        'selectMode': 101, //101=picker image and video , 100=image , 102=video
        'maxSelectCount': 1 //default 40 (Optional)
    };
    MediaPicker.getMedias(args, function(medias) {
        //返回缩略图的base64图片
        if(medias.length > 0) {
            MediaPicker.extractThumbnail(medias[0], function(data) {
                document.getElementById("thumbnailInfo").src = 'data:image/jpeg;base64,' + data.thumbnailBase64;
            }, function(e) { console.log(e) });
        }
    }, function(e) { console.log(e) })
}

4. 压缩图片

function compressImage() {
    var args = {
        'selectMode': 100, //101=picker image and video , 100=image , 102=video
        'maxSelectCount': 1 //default 40 (Optional)
    };
    MediaPicker.getMedias(args, function(medias) { //先选择一个图片
        if(medias.length > 0) {
            medias[0].quality = 50; //设置压缩质量
            MediaPicker.compressImage(medias[0], function(data) {
                //返回压缩后的图片信息：{mediaType: "image", path:'/data/storage/el2/base/2017.jpg', uri:"OHOS URI" size: 21993}
                document.getElementById("compressInfo").src = "https://localhost"+data.path;
            }, function(e) { console.log(e) });
        }
    }, function(e) { console.log(e) })
}

5. 调用相机拍照

//此功能依赖相机插件拍照，然后在获取照片的对象数据：{mediaType: "image", path:'/data/storage/el2/base/2017.jpg', uri:"OHOS URI" size: 21993}
function takePhoto() {
    var cameraOptions={ quality: 25,mediaType: Camera.MediaType.PICTURE };//see cordova camera docs
    MediaPicker.takePhoto(function(media) {
        document.getElementById("takePhotoInfo").src = "https://localhost"+media.path;
    }, function(e) { console.log(e) }, cameraOptions);
}

6. 调用相机拍摄视频

//此功能依赖相机插件拍视频，然后在获取视频的对象数据：{mediaType: "image", path:'/data/storage/el2/base/2017.jpg', uri:"OHOS URI" size: 21993}
function takeVideo() {
    var cameraOptions={ quality: 25,mediaType: Camera.MediaType.VIDEO };//see cordova camera docs
    MediaPicker.takePhoto(function(media) {
        fileName = "https://localhost"+media.path;
    }, function(e) { console.log(e) }, cameraOptions);
}

7. 获取图片属性

图片属性如下：

size： 图片大小
width: 图片宽度
height: 图片高度
属性参考连接： 点击查看开发者网站图片属性说明

function getImage() {
    var cameraOptions={ quality: 25,mediaType: Camera.MediaType.PICTURE };//see cordova camera docs
    var args = {
        'selectMode': 100, //101=picker image and video , 100=image , 102=video
        'maxSelectCount': 40 //default 40 (Optional)
    };

    MediaPicker.getMedias(args, function(medias) {
        if(medias.length > 0) {//选择一张图片后，获取第一张图片的大小
            MediaPicker.getExifForKey(medias[0].uri, "size", function (info) {
                document.getElementById("imgOpt").innerHTML = "size:"+info;
            }, function (error) {

            })
        }
    }, function(e) { console.log(e) }, cameraOptions);
}

许可证

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

联系方式

OHOS Cordova https://gitcode.com/OpenHarmony-Cordova/cordova-plugin-mediapicker-dmcsdk

Android/iOS：https://npmjs.com/cordova-plugin-mediapicker-dmcsdk/issues