ios开发之使用phonegap调用本地相机

最新推荐文章于 2016-11-19 11:59:42 发布

ciwei_numberOne

最新推荐文章于 2016-11-19 11:59:42 发布

阅读量836

点赞数

本文链接：https://blog.csdn.net/ciwei_numberOne/article/details/46558295

版权

一、安装：

1、首先去安装NodeJS，网址为https://nodejs.org

2、执行终端命令安装phonegap：

$ sudo npm install -g phonegap

3、新建应用程序：

$ phonegap create my-app
$ cd my-app
$ phonegap run iOS

4、向phonegap中添加camera插件

 $ phonegap plugin add cordova-plugin-camera
  $ phonegap plugin add cordova-plugin-media-capture
  $ phonegap plugin add cordova-plugin-media

5、修改项目文件夹Staging/www/index.html, 调用相机

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello World</title>
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8">
            var pictureSource; //图片来源
            var destinationType; //设置返回值的格式
            var imagePath; //选择的图像文件
            
            //等待PhoneGap连接设备
            document.addEventListener("deviceready", onDeviceReady, false);
            
            //PhoneGap准备就绪，可以使用
            function onDeviceReady(){
                pictureSource = navigator.PictureSourceType;
                destinationType = navigator.camera.DestinationType;
            }
        
            //当成功获得一张照片的Base64编码数据后被调用
            function onPhotoDataSuccess(imageData){
                //取消注释已查看Base64编码的图像数据
                //console.log(imageData);
                //获取图像句柄
                var smallImage = document.getElementById("smallImage");
                
                //取消隐藏的图像元素
                smallImage.style.display = "block";
                
                //显示拍摄的照片
                //使用内嵌CSS规则来缩放照片
                smallImage.src = "data:image/jpeg;base64,"+imageData;
            }
        
            //当成功得到一张照片的URI后被调用
            function onPhotoDataSuccess(imageURI){
                //取消注释以查看图片的URI
                console.log(imageURI);
                //获取图片句柄
                var largeImage = document.getElementById("largeImage");
                
                //取消隐藏的图像元素
                largeImage.style.display = "block";
                
                //显示拍摄的照片
                //使用内嵌CSS规则来缩放图片
                largeImage.src=imageURI;
                
                imagePath = imageURI;
            }
        
            //文件操作失败触发函数
            function onFileFail(error){
                //打印文件的错误代码
                console.log("error code:"+error.code);
            }
        
    
            //"Capture Photo"按钮点击时间触发函数
            function capturePhoto(){
                //使用设备上的摄像头拍照，并获得Base64编码字符串格式的图像
                navigator.camera.getPicture(onPhotoDataSuccess, onFail, {quality: 50});
            }
        
            //"Capture Editable Photo"按钮点击事件触发函数
            function capturePhotoEdit(){
                //使用设备上的摄像头拍照，并获得Base64编码字符串格式的可编辑图像
                navigator.camera.getPicture(onPhotoDataSuccess, onFail, {quality: 20, allowEdit:true});
            }
            //"From Photo Library"/"From Photo Album"按钮点击事件触发函数
            function getPhoto(source){
                //从设定的来源处获取图像文件URI
                navigator.camera.getPicture(onPhotoURISuccess, onFail, {quality:50,
                                            destinationType:destinationType.FILE_URI, sourceType:source});
            }
        
            //当有错误发生时出发此函数
            function onFail(message){
                alert('Failed because:'+message);
            }
        
            //移动图像
            function toMove(){
                var path="/Image"; //图像的目标路径
                var name="newFile.jpg";  //新文件的名称
                
                //开始操作文件
                //通过本地URI参数检索DirectoryEntry或FileEntry
                window.resolveLocalFileSystemURI(imagePath,function(fileEntry){
                    //请求持久化文件系统
                    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,
                        //如果目录不存在就创建目录
                        function(fileSystem){
                            var direc = fileSystem.root.getDirectory(path,{create:true},
                                //移动文件
                                function(parent){
                                    console.log("path"+path);
                                    fileEntry.moveTo(parent,name,function(){
                                        console.log("move ok");                                                   },onFileFail);
                                        },onFileFail);
                                     },onFileFail);
                                  },onFileFail);
            }
        
        
        </script>
    </head>
    <body>
    <div style="height: 200px; font-size: 20px; background-color: blue;" οnclick="capturePhoto()">
        capturePhoto;
    </div>
    <div style="height: 200px; font-size: 20px; background-color: red;" οnclick="capturePhotoEdit()">
        capturePhotoEdit;
    </div>
    <img style="display:none; width: 60px; height: 60px;" id="largeImage" src="" οnclick="toMove()"/>
    </body>
</html>

注：本文部分代码参考自：http://m.blog.csdn.net/blog/whitebian/23738479如需转载注明转载地址

ciwei_numberOne

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ios开发之使用phonegap调用本地相机

一、安装：1、首先去安装NodeJS，网址为https://nodejs.org2、执行终端命令安装phonegap：$ sudo npm install -g phonegap3、新建应用程序：$ phonegap create my-app$ cd my-app$ phonegap run iOS4、向phonegap中添加camera插件
复制链接

扫一扫