使用HTML5+调用手机摄像头和相册

具体流程：点击触发选择拍照或相册-->拍照或相册选择照片-->拿到图片路径进行压缩-->读取文件并显示在页面上

1.首先是html代码，很简单，就是给一个添加按钮，点击触发事件，这里我就不把css文件放出来，大家知道是一个添加按钮就行。

<h2 class="title-detail">  

                   图片描述  

                </h2>  

                <input type="hidden" id="picIndex" value="0">  

                <div id='image-list' class="row image-list">  

                    <!-- <input id="upload_image" type="file" name="image" accept="image/*" /> -->  

                   <div class="image-item space" onclick="showActionSheet()">  

                        <div class="image-up"></div>  

                  </div>  

               </div>  

2.后面我们来看下具体的js代码，按照上面我们说的方法共分为5个方法，具体如下：

[javascript] view plain copy

1. //图片显示  
2.        function showPics(url,name){          
3.          //根据路径读取到文件   
4.            plus.io.resolveLocalFileSystemURL(url,function(entry){  
5.                entry.file( function(file){  
6.                    var fileReader = new plus.io.FileReader();  
7.                    fileReader.readAsDataURL(file);  
8.                 <span style="whitespace:pre;">  </span>   fileReader.onloadend = function(e) {  
9.                            var picUrl = e.target.result.toString();  
10.                            var picIndex = $("#picIndex").val();  
11.                         var nowIndex = parseInt(picIndex)+1;  
12.                         $("#picIndex").val(nowIndex);  
13.                         var html = '';  
14.                         html += '<div class="image-item " id="item'+nowIndex+'">';  
15.                         html += '<div class="image-close" onclick="delPic('+nowIndex+')">X</div>';  
16.                         html += '<div><img src="'+picUrl+'" class="upload_img" style="width:100%;height:100%;"/></div>';  
17.                         html += '</div>';  
18.                         html += $("#image-list").html();  
19.                         $("#image-list").html(html);   
20.                    <span style="white-space:pre;">  </span>}  
21.                });  
22.           });   
23.        }  
24.         //压缩图片    
25.        function compressImage(url,filename){    
26.            var name="_doc/upload/"+filename;  
27.            plus.zip.compressImage({    
28.                    src:url,//src: (String 类型 )压缩转换原始图片的路径    
29.                    dst:name,//压缩转换目标图片的路径    
30.                    quality:40,//quality: (Number 类型 )压缩图片的质量.取值范围为1-100    
31.                    overwrite:true//overwrite: (Boolean 类型 )覆盖生成新文件    
32.                },    
33.                function(zip) {  
34.                    //页面显示图片  
35.                    showPics(zip.target,name);  
36.                },function(error) {    
37.                    plus.nativeUI.toast("压缩图片失败，请稍候再试");    
38.            });    
39.        }   
40.         
41.         //调用手机摄像头并拍照  
42.        function getImage() {    
43.            var cmr = plus.camera.getCamera();    
44.            cmr.captureImage(function(p) {    
45.                plus.io.resolveLocalFileSystemURL(p, function(entry) {    
46.                    compressImage(entry.toLocalURL(),entry.name);    
47.                }, function(e) {    
48.                    plus.nativeUI.toast("读取拍照文件错误：" + e.message);    
49.                });    
50.            }, function(e) {    
51.            }, {    
52.                filter: 'image'   
53.            });    
54.        }  
55.        //从相册选择照片  
56.        function galleryImgs() {    
57.             plus.gallery.pick(function(e) {    
58.                 var name = e.substr(e.lastIndexOf('/') + 1);  
59.                compressImage(e,name);  
60.             }, function(e) {    
61.             }, {    
62.                 filter: "image"    
63.             });    
64.         }  
65.          
66.        //点击事件，弹出选择摄像头和相册的选项  
67.         function showActionSheet() {    
68.             var bts = [{    
69.                 title: "拍照"    
70.             }, {    
71.                 title: "从相册选择"    
72.             }];    
73.             plus.nativeUI.actionSheet({    
74.                     cancel: "取消",    
75.                     buttons: bts    
76.                 },    
77.                 function(e) {    
78.                     if (e.index == 1) {    
79.                         getImage();    
80.                     } else if (e.index == 2) {    
81.                         galleryImgs();    
82.                     }    
83.                 }    
84.             );    
85.         }