All Projects → DmcSDK → Cordova Plugin Mediapicker

DmcSDK / Cordova Plugin Mediapicker

Licence: mit
cordova android ios mediaPicker support selection of multiple image and video gif ✨ cordova android 和 ios 图片视频选择cordova插件,支持多图 视频 gif,ui类似微信

Projects that are alternatives of or similar to Cordova Plugin Mediapicker

Filepicker
🔥🔥🔥Android文件、图片选择器,可按文件夹查找,文件类型查找,支持自定义相机
Stars: ✭ 265 (+94.85%)
Mutual labels:  compress, imagepicker
cordova-plugin-advanced-imagepicker
Cordova Plugin for an advanced (multiple) ImagePicker
Stars: ✭ 23 (-83.09%)
Mutual labels:  cordova, imagepicker
Cordova Plugin Add Swift Support
🔨 Swiftify your Cordova app !
Stars: ✭ 108 (-20.59%)
Mutual labels:  cordova
Involt
Inject hardware interactions directly into HTML layout.
Stars: ✭ 128 (-5.88%)
Mutual labels:  cordova
Ritlimagepickerdemo
一个基于Photos.framework的图片多选,模仿微信,还有很多不足,正在改进和优化
Stars: ✭ 124 (-8.82%)
Mutual labels:  imagepicker
Py7zr
7zip in python3 with ZStandard, PPMd, LZMA2, LZMA1, Delta, BCJ, BZip2, and Deflate compressions, and AES encryption.
Stars: ✭ 110 (-19.12%)
Mutual labels:  compress
Components
MobileUI was created thinking of making your hybrid application faster and smaller since you only install what you are really going to use for UI.
Stars: ✭ 125 (-8.09%)
Mutual labels:  cordova
Html Minifier Terser
actively maintained fork of html-minifier - minify HTML, CSS and JS code using terser - supports ES6 code
Stars: ✭ 106 (-22.06%)
Mutual labels:  compress
Fluster App
[DEPRECATED] Fluster, your simple search for roommates
Stars: ✭ 134 (-1.47%)
Mutual labels:  cordova
Chihu2
ionic2-example <吃乎2>混合开发-美食app 🍜 ☕️ 🍦 (This is a support android and apple ionic2 case, a food app)
Stars: ✭ 124 (-8.82%)
Mutual labels:  cordova
Ionic2 Reddit Reader
Ionic 2 Sample App
Stars: ✭ 128 (-5.88%)
Mutual labels:  cordova
Apiproject
[https://www.sofineday.com], golang项目开发脚手架,集成最佳实践(gin+gorm+go-redis+mongo+cors+jwt+json日志库zap(支持日志收集到kafka或mongo)+消息队列kafka+微信支付宝支付gopay+api加密+api反向代理+go modules依赖管理+headless爬虫chromedp+makefile+二进制压缩+livereload热加载)
Stars: ✭ 124 (-8.82%)
Mutual labels:  compress
Tiny Html Minifier
Minify HTML in PHP with just a single class
Stars: ✭ 114 (-16.18%)
Mutual labels:  compress
Cordova Node Xcode
Apache cordova
Stars: ✭ 128 (-5.88%)
Mutual labels:  cordova
Cordova Plugin Vibration
Apache Cordova Plugin vibration
Stars: ✭ 109 (-19.85%)
Mutual labels:  cordova
Cordova Plugin Globalization
Apache Cordova Plugin globalization
Stars: ✭ 131 (-3.68%)
Mutual labels:  cordova
Pi Hole Droid
Pi-hole Droid is an unofficial app that connects to your Pi-hole to show charts and statistics.
Stars: ✭ 107 (-21.32%)
Mutual labels:  cordova
Code Push Server
CodePush service is hot update services which adapter react-native-code-push and cordova-plugin-code-push - 热更新
Stars: ✭ 1,604 (+1079.41%)
Mutual labels:  cordova
Ionic Typescript Starter
📱 Platform and IDE agnostic starter project for building mobile apps with Ionic and TypeScript.
Stars: ✭ 124 (-8.82%)
Mutual labels:  cordova
Hsuntzu
HDFS compress tar zip snappy gzip uncompress untar codec hadoop spark
Stars: ✭ 135 (-0.74%)
Mutual labels:  compress

MediaPicker v:2.4.3

android ios mediaPicker support selection of multiple image and video gif (Support Chinese, English, Spanish, Portuguese, and Turkish)

android 和 ios cordova图片视频选择插件,支持多图 视频 gif,ui类似微信。 联系QQ:3451927565

GitHub: https://github.com/DmcSDK/cordova-plugin-mediaPicker

怎么用?How do I use?

use npm OR github:

  cordova plugin add https://github.com/DmcSDK/cordova-plugin-mediaPicker.git --variable IOS_PHOTO_LIBRARY_USAGE_DESCRIPTION="your usage message"

Example

html code:

<body>
    <div>
        <img name="imgView"  height="100px" >
        <img name="imgView"  height="100px" >
    </div>
    <button id="openBtn">open</button>
    <button id="uploadBtn">upload</button>
    <button id="takePhotoBtn">takePhoto</button>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

demo.js simple code:

var resultMedias=[];
var imgs = document.getElementsByName('imgView');
var args = {
    'selectMode': 101, //101=picker image and video , 100=image , 102=video
    'maxSelectCount': 40, //default 40 (Optional)
    'maxSelectSize': 188743680, //188743680=180M (Optional) 
};

document.getElementById('openBtn').onclick = function() {
    MediaPicker.getMedias(args, function(medias) {
        //medias [{mediaType: "image", path:'/storage/emulated/0/DCIM/Camera/2017.jpg', uri:"android retrun uri,ios retrun URL" size: 21993}]
        resultMedias = medias;
        getThumbnail(medias);
    }, function(e) { console.log(e) })
};

function getThumbnail(medias) {
    for (var i = 0; i < medias.length; i++) {
        //medias[i].thumbnailQuality=50; (Optional)
        //loadingUI(); //show loading ui
        MediaPicker.extractThumbnail(medias[i], function(data) {
            imgs[data.index].src = 'data:image/jpeg;base64,' + data.thumbnailBase64;
            imgs[data.index].setAttribute('style', 'transform:rotate(' + data.exifRotate + 'deg)');
        }, function(e) { console.log(e) });
    }
}

function loadingUI() {}

upload and compress 上传 和 压缩

demo.js upload and compress code:

document.getElementById('uploadBtn').onclick = function() {
    //1.please:  cordova plugin add cordova-plugin-file-transfer
    //2.see:  https://github.com/apache/cordova-plugin-file-transfer
    
    //3.use medias[index].path //upload original img
    //OR
    //3.compressImage(); //upload compress img
};

function compressImage() {
    for (var i = 0; i < resultMedias.length; i++) {
        // if(resultMedias[i].size>1048576){ resultMedias[i].quality=50; } else {d ataArray[i].quality=100;}
        resultMedias[i].quality = 30; //when the value is 100,return original image
        MediaPicker.compressImage(resultMedias[i], function(compressData) {
            //user compressData.path upload compress img
            console.log(compressData.path);
        }, function(e) { console.log(e) });
    }
}

//ios Video transcoding compression to MP4 Event(use AVAssetExportPresetMediumQuality)
document.addEventListener("MediaPicker.CompressVideoEvent", function(data) {
    alert(data.status + "||" + data.index);
}, false);

takePhoto 拍照

demo.js takePhoto code:

please add : cordova plugin add cordova-plugin-camera

cameraOptions docs: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/index.html#camera

//please add : cordova plugin add cordova-plugin-camera
document.getElementById('takePhotoBtn').onclick = function() {
    var cameraOptions={ quality: 50,mediaType: Camera.MediaType.PICTURE };//see cordova camera docs
    MediaPicker.takePhoto(cameraOptions,function(media) {
            media.index=0;//index use to imgs[data.index].src; // media.index=resultMedias.length;
            resultMedias.push(media);
            getThumbnail(resultMedias);
      }, function(e) { console.log(e) });
};

More api 其他API

API https://github.com/DmcSDK/cordova-plugin-mediaPicker/blob/master/www/MediaPicker.js

My android source code GitHub: https://github.com/DmcSDK/MediaPickerPoject

My IOS source code GitHub: https://github.com/DmcSDK/IOSMediaPicker

Screenshots

Android iOS
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].