phoneGap相机

来源：互联网发布：太空工程师要学编程编辑：程序博客网时间：2024/04/28 08:51
<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=0;"          name="viewport"/>    <link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>    <script type="text/javascript" src="../cordova-2.7.0.js"></script>    <script src="js/jquery-1.8.2.min.js"></script>    <script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>    <style>        .select{border:4px #ff0000 solid;}    </style>    <script type="text/javascript">        $(document).live("pageinit",function(e){            // 设置返回值的格式            $("#pz").live("tap",function(e){//拍照                alert("aaaa");                navigator.camera.getPicture(onPhotoURISuccess, onFail,                        {   quality: 50,                            destinationType: navigator.camera.DestinationType.FILE_URI ,                            sourceType: navigator.camera.PictureSourceType.CAMERA}                );            });            $("#sc").live("tap",function(e){//上传                if(photoList.length<=0){                    alert("您尚未选择任何图片！");                    return false;                }                alert("上传图片"+photoList);                var imageURI=photoList[0];                var options = new FileUploadOptions();                options.fileKey="file";                options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);                options.mimeType="image/jpeg";                var params = {};                params.value1 = "test";                params.value2 = "param";                options.params = params;                var ft = new FileTransfer();                ft.upload(imageURI, encodeURI("http://some.server.com/upload.php"),                function(){                    console.log("Code = " + r.responseCode);                    console.log("Response = " + r.response);                    console.log("Sent = " + r.bytesSent);                }, function(error){                    alert("An error has occurred: Code = " + error.code);                    console.log("upload error source " + error.source);                    console.log("upload error target " + error.target);                }, options);            });            var photoList=new Array();            //拍照成功的回调            /*             //camera的选项：             1----Camera.sourceType:(A CameraPopoverHandle object(照片获取控制参数))             //打开默认的的照相设备，获取一张照片             Camera.sourceType = Camera.PictureSourceType.CAMERA             //弹出照片选择框 ，从相册中选取一张图片。             Camera.sourceType = Camera.PictureSourceType.PHOTOLIBRARY             Camera.sourceType = Camera.PictureSourceType.SAVEDPHOTOALBUM             Camera.PictureSourceType = {             //常量             PHOTOLIBRARY : 0,             CAMERA : 1,             SAVEDPHOTOALBUM : 2             };             2 ----Camera.DestinationType：(成功回调的返回值得格式设置)             Camera.DestinationType= Camera.DestinationType.DATA_URL;// 返回图片的base64编码字符串             Camera.DestinationType= Camera.DestinationType.FILE_URI;// 返回图片文件的URI             Camera.DestinationType= Camera.DestinationType.NATIVE_URI;// Return image native URI (eg. assets-library:// on iOS or content:// on Android)             Camera.DestinationType = {             //常量             DATA_URL : 0,             FILE_URI : 1,             NATIVE_URI : 2             };             3 ---- Camera.Direction：选择摄像头（前置（font）/后置（））。             Camera.Direction = {             BACK : 0,           // 后置             FRONT : 1           // 前置             };             4 ----Camera.MediaType：设置媒体选择的类型。只能当PictureSourceType PHOTOLIBRARY或SAVEDPHOTOALBUM可以使用。             Camera.MediaType = {             PICTURE: 0,             // allow selection of still pictures only. DEFAULT. Will return format specified via DestinationType             VIDEO: 1,               // allow selection of video only, WILL ALWAYS RETURN FILE_URI             ALLMEDIA : 2            // allow selection from all media types             }             //camera方法:             navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );             1 cameraSuccess(params):获取成功的回调函数。             //params依赖于cameraOptions的格式化             //params:    1 照片base64编码生成的String，             2 图像文件在本地存储位置的String(默认)。             （你可以做任何你想要的图片或URI编码,例如:             <img>标签内显示图片             保存数据到本地(LocalStorage, Lawnchair等)             提交数据到服务器             ）             //cameraOptions:自定义相机的设置参数             { quality : 75,//照片质量(0-100)             //照片选择返回值的格式.由navigator.camera.DestinationType设定             destinationType : Camera.DestinationType.DATA_URL,             //照片获取控制参数             sourceType : Camera.PictureSourceType.CAMERA,             //允许简单的图像编辑之前的选择。（boolean）             allowEdit : true,             //返回的图像文件的编码。navigator.camera中由Camera.EncodingType定义             //Camera.EncodingType = {             //      JPEG : 0,               // Return JPEG encoded image             //      PNG : 1                 // Return PNG encoded image             // };             encodingType: Camera.EncodingType.JPEG,             //宽度。与targetHeight必须使用长宽比             targetWidth: 100,             targetHeight: 100,             //设置媒体选择的类型。只能当PictureSourceType PHOTOLIBRARY或SAVEDPHOTOALBUM可以使用。             //Camera.MediaType = {             //     PICTURE: 0,             // allow selection of still pictures only. DEFAULT. Will return format specified via DestinationType             //     VIDEO: 1,               // allow selection of video only, WILL ALWAYS RETURN FILE_URI             //     ALLMEDIA : 2            // allow selection from all media types             // }             mediaType: Camera.MediaType.PICTURE,             //旋转图像捕获设备的正确的方向             correctOrientation: false;             //选择摄像头（前置（font）/后置（））             //Camera.Direction = {             //     BACK : 0,           // 后置             //     FRONT : 1           // 前置             // };             cameraDirection: navigator.camera.Font,             //popoverOptions: iOS only options to specify popover location in iPad. Defined in CameraPopoverOptions.             popoverOptions: CameraPopoverOptions,             //保存到相册             saveToPhotoAlbum: false };             */            function onPhotoURISuccess(imageData) {//获取图片抵制                alert("拍照成功："+imageData);                var currentTime=new Date();                var $li=$("<li><img src='"+imageData+"' title='未选' height='120px' width='120px'/>"                        +"<h6>拍摄时间："+currentTime+"</h6></li>");                $("#photoList").append($li);                $.mobile.pageContainer.trigger("create");            }            $("#photoList").find("img").live("tap",function(){ //图片选中                if($(this).hasClass("select")){                   $(this).removeClass("select");                    photoList.splice(photoList.indexOf($(this).attr("src")),1);                }else{                    $(this).css({"border":"4px #ff0000 dashed","title":"已选"});                    if(photoList.indexOf($(this).attr("src"))==-1){                        photoList.push($(this).attr("src"));                    }                }                alert("已选"+photoList.length+"张图片！");            });            //拍照失败的回调            function onFail(message) {                alert('拍照失败: ' + message);            }        });    </script>    <style>        .a{border: 2px saddlebrown dashed;        }    </style></head><body><div data-role="page" id="upload">    <div data-role="header" data-position="fixed" data-tap-toggle="false" data-id="myHeader">        <h2>图片上传</h2>        <a id="pz" data-role="button" data-mini="true" data-inline="true">拍照</a>        <a id="sc" data-role="button" data-mini="true" data-inline="true">上传</a>    </div>    <div data-role="content">        <ul data-role="listview" id="photoList">        </ul>    </div></div></body></html>
0 0