Java教程

H5调用手机摄像头和相册

本文主要是介绍H5调用手机摄像头和相册，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！ 
  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>Insert title here</title>
  6         <script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
  7     </head>
  8     <body>
  9         <h2 class="title-detail">
 10             图片描述
 11         </h2>
 12         <input type="hidden" id="picIndex" value="0">
 13         <div id='image-list' class="row image-list">
 14             <!-- <input id="upload_image" type="file" name="image" accept="image/*" /> -->
 15  
 16         </div>
 17         <div class="image-item space" onclick="showActionSheet()">
 18             <button class="image-up">拍照</button>
 19         </div>
 20  
 21     </body>
 22     <script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
 23     <script type="text/javascript">
 24         //图片显示
 25         function showPics(url, name) {
 26             //根据路径读取到文件 
 27             plus.io.resolveLocalFileSystemURL(url, function(entry) {
 28                 entry.file(function(file) {
 29                     var fileReader = new plus.io.FileReader();
 30                     fileReader.readAsDataURL(file);
 31                     fileReader.onloadend = function(e) {
 32                         var picUrl = e.target.result.toString();
 33                         var picIndex = $("#picIndex").val();
 34                         var nowIndex = parseInt(picIndex) + 1;
 35                         $("#picIndex").val(nowIndex);
 36                         var html = '';
 37                         html += '<div class="image-item " id="item' + nowIndex + '">';
 38                         html += '<div class="image-close" onclick="delPic(this)">X</div>';
 39                         html += '<div><img src="' + picUrl + '" class="upload_img" style="width:100%;height:100%;"/></div>';
 40                         html += '</div>';
 41                         html += $("#image-list").html();
 42                         $("#image-list").html(html);
 43                         console.log(html)
 44                     }
 45                 });
 46             });
 47         }
 48         //压缩图片  
 49         function compressImage(url, filename) {
 50             var name = "_doc/upload/" + filename;
 51             plus.zip.compressImage({
 52                     src: url, //src: (String 类型 )压缩转换原始图片的路径  
 53                     dst: name, //压缩转换目标图片的路径  
 54                     quality: 40, //quality: (Number 类型 )压缩图片的质量.取值范围为1-100  
 55                     overwrite: true //overwrite: (Boolean 类型 )覆盖生成新文件  
 56                 },
 57                 function(zip) {
 58                     //页面显示图片
 59                     showPics(zip.target, name);
 60                 },
 61                 function(error) {
 62                     plus.nativeUI.toast("压缩图片失败，请稍候再试");
 63                 });
 64         }
 65  
 66         //调用手机摄像头并拍照
 67         function getImage() {
 68             var cmr = plus.camera.getCamera();
 69             cmr.captureImage(function(p) {
 70                 plus.io.resolveLocalFileSystemURL(p, function(entry) {
 71                     compressImage(entry.toLocalURL(), entry.name);
 72                 }, function(e) {
 73                     plus.nativeUI.toast("读取拍照文件错误：" + e.message);
 74                 });
 75             }, function(e) {}, {
 76                 filter: 'image'
 77             });
 78         }
 79         //从相册选择照片
 80         function galleryImgs() {
 81             plus.gallery.pick(function(e) {
 82                 var name = e.substr(e.lastIndexOf('/') + 1);
 83                 compressImage(e, name);
 84             }, function(e) {}, {
 85                 filter: "image"
 86             });
 87         }
 88  
 89       // 删除照片
 90         function delPic(a) {
 91             $(a).next().remove();
 92             $(a).remove()
 93         } 
 94  
 95         //点击事件，弹出选择摄像头和相册的选项
 96         function showActionSheet() {
 97             var bts = [{
 98                 title: "拍照"
 99             }, {
100                 title: "从相册选择"
101             }];
102             plus.nativeUI.actionSheet({
103                     cancel: "取消",
104                     buttons: bts
105                 },
106                 function(e) {
107                     if (e.index == 1) {
108                         getImage();
109                     } else if (e.index == 2) {
110                         galleryImgs();
111                     }
112                 }
113             ); 
114         }
115     </script>
116 </html>

 

这篇关于H5调用手机摄像头和相册的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航