ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

H5调用手机摄像头和相册

2022-02-27 23:34:01  阅读:223  来源: 互联网

标签:function name 相册 H5 html plus var entry 摄像头


  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>

 

标签:function,name,相册,H5,html,plus,var,entry,摄像头
来源: https://www.cnblogs.com/lgx5/p/15943927.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有