PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 服务器 > Web服务器 > 正文

    mui 拍照和相册功能案例分析

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:mui 拍照和相册功能案例分析
    mui 拍照和相册 功能

    1. <!DOCTYPE html>   
    2. <html>   
    3.     <head>   
    4.         <meta charset="UTF-8">   
    5.         <title></title>   
    6.         <link href="../../../css/mui.min.css" rel="stylesheet" />   
    7.         <script src="../../../js/mui.min.js"></script>   
    8.         <script src="../../../js/jquery.js"></script>   
    9.         <style>   
    10.             .imageup{ position: absolute; margin:auto;left:0px;top:0;right:0;bottom:0; width:100px; height: 36px; line-height:36px; color: #000; border-radius: 5px; border:1px #ddd solid; text-align:center;font-size:20px;;}   
    11.         </style>   
    12.     </head>   
    13.     <body>   
    14.         <a href="javascript:void(0);" class="imageup">上传图片</a>   
    15.         <script>   
    16.             function plusReady(){   
    17.                 // 弹出系统选择按钮框 B5教程网  
    18.                 mui("body").on("tap",".imageup",function(){   
    19.                     page.imgUp();   
    20.                 })   
    21.                    
    22.             }   
    23.                 
    24.             var page=null;   
    25.             page={   
    26.                 imgUp:function(){   
    27.                     var m=this;   
    28.                     plus.nativeUI.actionSheet({cancel:"取消",buttons:[   
    29.                         {title:"拍照"},   
    30.                         {title:"从相册中选择"}   
    31.                     ]}, function(e){//1 是拍照  2 从相册中选择   
    32.                         switch(e.index){   
    33.                             case 1:clickCamera();break;   
    34.                             case 2:clickGallery();break;   
    35.                         }   
    36.                     });   
    37.                 }   
    38.                 //摄像头   
    39.             }   
    40.                
    41.                
    42.      //发送照片   
    43.        
    44.     function clickGallery() {   
    45.         plus.gallery.pick(function(path) {   
    46.             plus.zip.compressImage({   
    47.                 src: path,   
    48.                 dst: "_doc/chat/gallery/" + path,   
    49.                 quality: 20,   
    50.                 overwrite: true   
    51.             }, function(e) {   
    52.                 var task = plus.uploader.createUpload(server + "upload/chat", {   
    53.                     method: "post"   
    54.                 }, function(t, sta) {   
    55.                     console.log(JSON.stringify(t))   
    56.                     if(sta == 200) {   
    57.                         var msg = t.responseText;   
    58.                         var oImg = JSON.parse(msg);   
    59.                         var imgUrl = oImg.urls;   
    60.                         var re = new RegExp("\\\\", "g");   
    61.                         imgUrl = imgUrl.replace(re, "/");   
    62.                         uploadMsg(2, imgUrl);   
    63.                     }   
    64.                 });   
    65.                 task.addFile(e.target, {});   
    66.                 task.start();   
    67.             }, function(err) {   
    68.                 console.error("压缩失败:" + err.message);   
    69.             });   
    70.    
    71.         }, function(err) {});   
    72.     };   
    73.        
    74.        
    75.     // 拍照   
    76.        
    77.     function clickCamera() {   
    78.         var cmr = plus.camera.getCamera();   
    79.         var res = cmr.supportedImageResolutions[0];   
    80.         var fmt = cmr.supportedImageFormats[0];   
    81.         cmr.captureImage(function(path) {   
    82.             //plus.io.resolveLocalFileSystemURL(path, function(entry) {   
    83.             plus.io.resolveLocalFileSystemURL(path, function(entry) {   
    84.                 var localUrl = entry.toLocalURL();   
    85.                 plus.zip.compressImage({   
    86.                     src: localUrl,   
    87.                     dst: "_doc/chat/camera/" + localUrl,   
    88.                     quality: 20,   
    89.                     overwrite: true   
    90.                 }, function(e) {   
    91.                     var task = plus.uploader.createUpload(server + "upload/chat", {   
    92.                         method: "post"   
    93.                     }, function(t, sta) {   
    94.                         if(sta == 200) {   
    95.                             var msg = t.responseText;   
    96.                             var oImg = JSON.parse(msg);   
    97.                             var imgUrl = oImg.urls;   
    98.                             var re = new RegExp("\\\\", "g");   
    99.                             imgUrl = imgUrl.replace(re, "/");   
    100.                             console.log(imgUrl);   
    101.                             uploadMsg(2, imgUrl);   
    102.                         }   
    103.                     });   
    104.                     task.addFile(e.target, {});   
    105.                     task.start();   
    106.                 }, function(err) {   
    107.                     console.log("压缩失败:  " + err.message);   
    108.                 });   
    109.             });   
    110.         }, function(err) {   
    111.             console.error("拍照失败:" + err.message);   
    112.         }, {   
    113.             index: 1   
    114.         });   
    115.     };   
    116.    
    117.    
    118.                
    119.                
    120.             if(window.plus){   
    121.                 plusReady();   
    122.             }else{   
    123.                 document.addEventListener("plusready",plusReady,false);   
    124.             }   
    125.                
    126.         </script>   
    127.     </body>    
    128. </html>   

     

    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-122-5291-1.html
    相关热词搜索: