添加业主添加拍照片功能

WebService/src/main/resources/components/ownerPackage/add-owner/addOwner.html

@@ -1,20 +1,27 @@
-<div id = "addOwnerModel" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
+<div id="addOwnerModel" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+     aria-hidden="true">
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-body">
                 <h3 class="m-t-none m-b ">添加{{addOwnerInfo.componentTitle}}</h3>
                 <div class="ibox-content">
-                    <div>
-                        <div>
+                    <div class="row">
+                        <div class="col-sm-5">
+                            <video id="ownerPhoto" style="width: 100%;height: 90%;"></video>
+                            <canvas id="canvas" style="display:none;"></canvas>
+                            <button class="btn btn-primary" type="button" v-on:click="_takePhoto()">拍照</button>
+                        </div>
+                        <div class="col-sm-7">
                             <div class="form-group row">
                                 <label class="col-sm-2 col-form-label">名称</label>
-                                <div class="col-sm-10"><input v-model="addOwnerInfo.name" type="text" placeholder="必填，请填写名称" class="form-control"></div>
+                                <div class="col-sm-10"><input v-model="addOwnerInfo.name" type="text"
+                                                              placeholder="必填，请填写名称" class="form-control"></div>
                             </div>
                             <div class="form-group row">
                                 <label class="col-sm-2 col-form-label">性别</label>
                                 <div class="col-sm-10">
                                     <select class="custom-select" v-model="addOwnerInfo.sex">
-                                        <option selected  disabled value="">必填，请选择性别</option>
+                                        <option selected disabled value="">必填，请选择性别</option>
                                         <option value="0">男</option>
                                         <option value="1">女</option>
                                     </select>
@@ -22,19 +29,30 @@
                             </div>
                             <div class="form-group row">
                                 <label class="col-sm-2 col-form-label">年龄</label>
-                                <div class="col-sm-10"><input v-model="addOwnerInfo.age" type="number" placeholder="必填，请填写年龄" class="form-control"></div>
+                                <div class="col-sm-10"><input v-model="addOwnerInfo.age" type="number"
+                                                              placeholder="必填，请填写年龄" class="form-control"></div>
                             </div>
                             <div class="form-group row">
                                 <label class="col-sm-2 col-form-label">手机</label>
-                                <div class="col-sm-10"><input v-model="addOwnerInfo.link" type="number" placeholder="必填，请填写联系方式" class="form-control"></div>
+                                <div class="col-sm-10"><input v-model="addOwnerInfo.link" type="number"
+                                                              placeholder="必填，请填写联系方式" class="form-control"></div>
                             </div>
                             <div class="form-group row">
                                 <label class="col-sm-2 col-form-label">备注</label>
-                                <div class="col-sm-10"><input v-model="addOwnerInfo.remark" type="tel" placeholder="可填，请填写备注" class="form-control"></div>
+                                <div class="col-sm-10"><input v-model="addOwnerInfo.remark" type="tel"
+                                                              placeholder="可填，请填写备注" class="form-control"></div>
+                            </div>
+                            <div class="form-group row">
+                                <label class="col-sm-2 col-form-label">业主照片</label>
+                                <div class="col-sm-10"><img v-bind:src="addOwnerInfo.ownerPhoto" alt="业主照片"></div>
                             </div>
                             <div class="ibox-content">
-                                <button class="btn btn-primary float-right" type="button" v-on:click="saveOwnerInfo()" ><i class="fa fa-check"></i>&nbsp;保存</button>
-                                <button type="button" class="btn btn-warning float-right" style="margin-right:20px;" data-dismiss="modal">取消</button>
+                                <button class="btn btn-primary float-right" type="button" v-on:click="saveOwnerInfo()">
+                                    <i class="fa fa-check"></i>&nbsp;保存
+                                </button>
+                                <button type="button" class="btn btn-warning float-right" style="margin-right:20px;"
+                                        data-dismiss="modal">取消
+                                </button>
                             </div>
                         </div>
                     </div>

WebService/src/main/resources/components/ownerPackage/add-owner/addOwner.js

@@ -13,7 +13,8 @@
                 link:'',
                 sex:'',
                 remark:'',
-                ownerId:''
+                ownerId:'',
+                ownerPhoto:''
             }
         },
          _initMethod:function(){
@@ -25,10 +26,11 @@
                     vc.component.addOwnerInfo.ownerId = _ownerId;
                 }
                 $('#addOwnerModel').modal('show');
+                vc.component._initAddOwnerMedia();
             });
         },
         methods:{
-            addOwnerValidate(){
+            addOwnerValidate:function(){
                 return vc.validate.validate({
                     addOwnerInfo:vc.component.addOwnerInfo
                 },{
@@ -129,6 +131,49 @@
                                             sex:'',
                                             remark:''
                                         };
+            },
+            _addUserMedia:function() {
+                return navigator.getUserMedia = navigator.getUserMedia ||
+                    navigator.webkitGetUserMedia ||
+                    navigator.mozGetUserMedia ||
+                    navigator.msGetUserMedia || null;
+            },
+            _initAddOwnerMedia:function () {
+                if(vc.component._addUserMedia()){
+                    var videoPlaying = false;
+                    var constraints = {
+                        video: true,
+                        audio: false
+                    };
+                    var video = document.getElementById('ownerPhoto');
+                    var media = navigator.getUserMedia(constraints, function (stream) {
+                        var url = window.URL || window.webkitURL;
+                        //video.src = url ? url.createObjectURL(stream) : stream;
+                        try {
+                            video.src = url ? url.createObjectURL(stream) : stream;
+                        } catch (error) {
+                            video.srcObject = stream;
+                        }
+                        video.play();
+                        videoPlaying = true;
+                    }, function (error) {
+                        console.log("ERROR");
+                        console.log(error);
+                    });
+                }else{
+                    console.log("初始化视频失败");
+                }
+            },
+            _takePhoto:function () {
+                if (videoPlaying) {
+                    var canvas = document.getElementById('canvas');
+                    canvas.width = video.videoWidth;
+                    canvas.height = video.videoHeight;
+                    canvas.getContext('2d').drawImage(video, 0, 0);
+                    var data = canvas.toDataURL('image/webp');
+                    vc.component.addOwnerInfo.ownerPhoto = data;
+                    //document.getElementById('photo').setAttribute('src', data);
+                }
             }
         }
     });