指引网

搜索

热门标签:

当前位置: 主页 > 服务器 > Nginx >

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

来源:网络 作者:佚名 点击: 次时间:2017-08-02 23:29
[摘要] 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.                 // 弹出系统选择按钮框 指引教程网  
  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>   

 
标签： 服务器
相关内容
------分隔线----------------------------
[关闭窗口] [返回顶部]
栏目列表
推荐内容
热点内容

网站内容来自网络整理或网友投稿如有侵权行为请邮件:Rinchey@163.com 我们24小时内处理

CopyRight © 2006-2018 指引網 Ondex.Net , All Rights Reserved. 粤ICP备16026640号-1