parent
48aa0beea3
commit
e00528e446
@ -0,0 +1,177 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||||
|
<head th:replace="common/head :: head(link)"/>
|
||||||
|
<style>
|
||||||
|
.demo-split{
|
||||||
|
height: 350px;
|
||||||
|
border: 1px solid #dcdee2;
|
||||||
|
}
|
||||||
|
.demo-split-pane{
|
||||||
|
padding: 10px;
|
||||||
|
height: 350px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<div id="app" class="ok-body" v-cloak>
|
||||||
|
<!--模糊搜索区域-->
|
||||||
|
<template>
|
||||||
|
<div style="margin-bottom: 20px;margin-top: 8px;">
|
||||||
|
<i-select placeholder="请选择停车场" v-model="entity.parkManageId" style="width:350px">
|
||||||
|
<i-option v-for="item in parkManageList" :value="item.id" :key="item.id">{{ item.name }}</i-option>
|
||||||
|
</i-select>
|
||||||
|
</div>
|
||||||
|
<div class="demo-split">
|
||||||
|
<split v-model="split1">
|
||||||
|
<div slot="left" class="demo-split-pane">
|
||||||
|
<video style="height:320px" id="video"></video>
|
||||||
|
<canvas id="qr-canvas"></canvas>
|
||||||
|
</div>
|
||||||
|
<div slot="right" class="demo-split-pane">
|
||||||
|
<img :src="licensePlate">
|
||||||
|
</div>
|
||||||
|
</split>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 18px;text-align:center">
|
||||||
|
<!-- <upload action="/car/distinguish/upload">-->
|
||||||
|
<!-- <i-button icon="ios-cloud-upload-outline">上传车牌</i-button>-->
|
||||||
|
<!-- </upload>-->
|
||||||
|
<Upload
|
||||||
|
multiple
|
||||||
|
type="drag"
|
||||||
|
action="/car/distinguish/upload"
|
||||||
|
:data="uploadData"
|
||||||
|
:before-upload="handleUpload"
|
||||||
|
:on-success="handleSuccess"
|
||||||
|
:format="['png','jpg','jpeg']"
|
||||||
|
:max-size="2048">
|
||||||
|
<div style="padding: 20px 0">
|
||||||
|
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
|
||||||
|
<p>点击或将车牌拖拽到这里上传</p>
|
||||||
|
</div>
|
||||||
|
</Upload>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div th:replace="common/foot :: foot(script)"></div>
|
||||||
|
<script th:inline="none">
|
||||||
|
layui.use(["okUtils", "okLayer"], function () {
|
||||||
|
var okUtils = layui.okUtils;
|
||||||
|
var okLayer = layui.okLayer;
|
||||||
|
var vm = new Vue({
|
||||||
|
el: '#app',
|
||||||
|
data: function(){
|
||||||
|
var that = this;
|
||||||
|
return {
|
||||||
|
entity:{},
|
||||||
|
parkManageList:[],
|
||||||
|
split1: 0.5,
|
||||||
|
licensePlate:'',
|
||||||
|
uploadData:{}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
listParkManage : function() {
|
||||||
|
var that = this;
|
||||||
|
okUtils.ajaxCloud({
|
||||||
|
url:"/car/parkManage/select",
|
||||||
|
success : function(result) {
|
||||||
|
that.parkManageList = result.msg;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleSuccess:function(response, file, fileList){
|
||||||
|
if(response.code==0){
|
||||||
|
vm.licensePlate = "/"+response.imagePath;
|
||||||
|
okLayer.msg.greenTick(response.msg);
|
||||||
|
}else{
|
||||||
|
okLayer.msg.redCross(response.msg);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleUpload (file) {
|
||||||
|
if(vm.entity.parkManageId==undefined){
|
||||||
|
okLayer.msg.redCross("请选择停车场");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
vm.uploadData.id = vm.entity.parkManageId;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted: function() {
|
||||||
|
this.listParkManage();
|
||||||
|
init();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var canvas,context;
|
||||||
|
function init(){
|
||||||
|
var video = document.querySelector('video');
|
||||||
|
canvas = document.getElementById('qr-canvas');
|
||||||
|
context = canvas.getContext('2d');
|
||||||
|
var mediaStreamTrack;
|
||||||
|
|
||||||
|
// 一堆兼容代码
|
||||||
|
window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);
|
||||||
|
if (navigator.mediaDevices === undefined) {
|
||||||
|
navigator.mediaDevices = {};
|
||||||
|
}
|
||||||
|
if (navigator.mediaDevices.getUserMedia === undefined) {
|
||||||
|
navigator.mediaDevices.getUserMedia = function(constraints) {
|
||||||
|
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
|
||||||
|
if (!getUserMedia) {
|
||||||
|
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
|
||||||
|
}
|
||||||
|
return new Promise(function(resolve, reject) {
|
||||||
|
getUserMedia.call(navigator, constraints, resolve, reject);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
openMedia();
|
||||||
|
}
|
||||||
|
|
||||||
|
//摄像头调用配置
|
||||||
|
var mediaOpts = {
|
||||||
|
audio: false,
|
||||||
|
video: true,
|
||||||
|
video: { facingMode: "environment"} // 或者 "user"
|
||||||
|
//video: { width: 50%, height: 350 }
|
||||||
|
// video: { facingMode: { exact: "environment" } }// 或者 "user"
|
||||||
|
}
|
||||||
|
|
||||||
|
// 回调
|
||||||
|
function successFunc(stream) {
|
||||||
|
mediaStreamTrack = stream;
|
||||||
|
video = document.querySelector('video');
|
||||||
|
if ("srcObject" in video) {
|
||||||
|
video.srcObject = stream
|
||||||
|
} else {
|
||||||
|
video.src = window.URL && window.URL.createObjectURL(stream) || stream
|
||||||
|
}
|
||||||
|
video.play();
|
||||||
|
}
|
||||||
|
function errorFunc(err) {
|
||||||
|
alert(err.name);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 正式启动摄像头
|
||||||
|
function openMedia(){
|
||||||
|
navigator.mediaDevices.getUserMedia(mediaOpts).then(successFunc).catch(errorFunc);
|
||||||
|
}
|
||||||
|
|
||||||
|
//关闭摄像头
|
||||||
|
function closeMedia(){
|
||||||
|
mediaStreamTrack.getVideoTracks().forEach(function (track) {
|
||||||
|
track.stop();
|
||||||
|
context.clearRect(0, 0,context.width, context.height);//清除画布
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//截取视频
|
||||||
|
function drawMedia(){
|
||||||
|
canvas.setAttribute("width", video.videoWidth);
|
||||||
|
canvas.setAttribute("height", video.videoHeight);
|
||||||
|
context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in new issue