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

 <input type="hidden" id="picIndex" value="0">
  <div id='image-list' class="row image-list">
  <span class="mui-icon mui-icon-image" style="color: #888;" οnclick="showActionSheet()"></span>
     </div>

 

//图片显示
       函数showPics(url,name){           
         //根据路径读取到文件 
           plus.io.resolveLocalFileSystemURL(url,function(entry){
               entry.file(function(file){
                   var fileReader = new plus.io. FileReader();
                   fileReader.readAsDataURL(file);
                          fileReader.onloadend = function(e){
                           var picUrl = e.target.result.toString();
                           var picIndex = $(“#picIndex”)。val();
                           var nowIndex = parseInt(picIndex)+1;
                           $(“#picIndex”)。val(nowIndex);
                           var html ='';
                           html + ='<div class =“image-item”id =“item'+ nowIndex +'”>';
                           html + ='<div class =“image-close”onclick =“delPic('+ nowIndex +')”> X </ div>';
                           html + ='<div> <img src =“'+ picUrl +'”class =“upload_img”style =“width:100%; height:100%;”/> </ div>';
                           html + ='</ div>';
                           html + = $(“#image-list”)。html();
                           $( “#图像列表”)HTML(HTML); 
                       }
               };
          }); 
       }
       
       //删除图片
       function delPic(nowIndex){
           
           $(“#item”+ nowIndex +“”).remove();
       }
         //压缩图片  
       function compressImage(url,filename){  
           var name =“_ doc / upload /”+ filename;
           plus.zip.compressImage({  
                   src:url,// src :( String类型)压缩转换原始图片的路径  
                   dst:name,//压缩转换目标图片的路径  
                   质量:40,//质量:(数字类型)压缩图片的质量。取值范围为1-100  
                   overwrite:true // overwrite :(布尔类型)覆盖生成新文件  
               },  
               function(zip){
                   //页面显示图片
                   showPics(zip.target,name);
               },function (错误){  
                   plus.nativeUI.toast(“压缩图片失败,请稍候再试”);  
           });  
       } 


        //调用手机摄像头并拍照
       函数getImage(){  
           var cmr = plus.camera.getCamera();  
           cmr.captureImage(function(p){  
               plus.io.resolveLocalFileSystemURL(p,function(entry){  
                   compressImage(entry.toLocalURL(),entry.name);  
               },function(e){  
                   plus.nativeUI.toast(“read取拍照文件错误:“+ e.message);  
               });  
           },function(e){  
           },{  
               filter:'image' 
           });  
       }
       //从相册选择照片
       function galleryImgs(){  
            plus.gallery.pick(function(e){  
                var name = e.substr(e.lastIndexOf('/')+ 1);
               compressImage(E,名称);
            },function(e){  
            },{  
                filter:“image”  
            });  
        }
       
       //点击事件,弹出选择摄像头和相册的选项
        函数showActionSheet(){  
            var bts = [{  
                title:“拍照”  
            },{  
                title:“从相册选择”  
            }];  
            plus.nativeUI.actionSheet({  
                    cancel:“取消”,  
                    按钮:bts  
                },  
                function(e){  
                    if(e。  
                        的getImage();  
                    } else if(e.index == 2){  
                        galleryImgs();  
                    }  
                }  
            ;  

        }

  • 0
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

特立独行的Mr高

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值