当前位置: > > > Cordova - 使用Cordova开发iOS应用实战5(获取手机里照片,并编辑)

Cordova - 使用Cordova开发iOS应用实战5(获取手机里照片,并编辑)

使用Cordova可以很方便的通过js代码读取系统相簿里面的照片,同使用设备摄像头拍照一样,同样需要先添加camera插件。

一,添加camera插件
首先我们要在“终端”中进入工程所在的目录,然后运行如下命令:
cordova plugin add cordova-plugin-camera
可以看到camera相机插件已经成功添加了:



二,获取照片
我们可以选择是从“照片库(时刻)”中读取图片,或者从“相簿”中读取图片。
1,从“相簿”中获取照片
                        
<!DOCTYPE html>
<html>
    <head>
        <title>Capture Photo</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8">
            var pictureSource;
            var destinationType;
            
            document.addEventListener("deviceready",onDeviceReady,false);
            
            //Cordova加载完成会触发
            function onDeviceReady() {
                pictureSource=navigator.camera.PictureSourceType;
                destinationType=navigator.camera.DestinationType;
            }
        
            //获取照片
            function getPhoto(source) {
                //quality : 图像的质量,范围是[0,100]
                navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
                                            destinationType: destinationType.FILE_URI,
                                            sourceType: source });
            }
        
            //获取照片成功
            function onPhotoURISuccess(imageURI) {
                //打印出照片路径
                console.log(imageURI);
                var largeImage = document.getElementById('largeImage');
                largeImage.style.display = 'block';
                largeImage.src = imageURI;
            }

            //获取照片是吧
            function onFail(message) {
                alert('获取失败: ' + message);
            }
        </script>
    </head>
    <body style="padding-top:50px">
        <button style="font-size:23px;" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">
            从“相簿”中获取照片
        </button> <br>
        <img style="display:none;" id="largeImage" src="" />
    </body>
</html>

2,从“照片库(时刻)”中获取照片
                
<!DOCTYPE html>
<html>
    <head>
        <title>Capture Photo</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8">
            var pictureSource;
            var destinationType;
            
            document.addEventListener("deviceready",onDeviceReady,false);
            
            //Cordova加载完成会触发
            function onDeviceReady() {
                pictureSource=navigator.camera.PictureSourceType;
                destinationType=navigator.camera.DestinationType;
            }
        
            //获取照片
            function getPhoto(source) {
                //quality : 图像的质量,范围是[0,100]
                navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
                                            destinationType: destinationType.FILE_URI,
                                            sourceType: source });
            }
        
            //获取照片成功
            function onPhotoURISuccess(imageURI) {
                //打印出照片路径
                console.log(imageURI);
                var largeImage = document.getElementById('largeImage');
                largeImage.style.display = 'block';
                largeImage.src = imageURI;
            }

            //获取照片是吧
            function onFail(message) {
                alert('获取失败: ' + message);
            }
        </script>
    </head>
    <body style="padding-top:50px">
        <button style="font-size:23px;" onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">
            从“时刻”中获取照片
        </button> <br>
        <img style="display:none;" id="largeImage" src="" />
    </body>
</html>
评论1
  • 1楼
    2016-04-25 23:22
    黑木宁

    可以获取上传视频么??

    站长回复

    视频的话你可以用媒体捕获插件(cordova-plugin-media-capture),录制完毕后可以得到保存的路径,让后你再将其上传。