Skip to content

李宁 / Activity

Go to a project
Commit 9a637732 by 李宁
Options

1Merge branch 'takePicture'

2 parents a0658e1f 94f30c22
Expand all
Inline Side-by-side
Showing 6 changed files with 111 additions and 28 deletions
huaian/css/demo.css
...@@ -329,10 +329,13 @@ html,body{ ...@@ -329,10 +329,13 @@ html,body{
outline: none outline: none
} }
.alertDiv .inner .errorTs{ .alertDiv .inner .errorTs{
color: #F00; color: #666;
font-size: .26rem; font-size: .26rem;
margin-top: .16rem; margin-top: .16rem;
} }
.alertDiv .inner .tsRed{
color: #F00;
}
.alertDiv .inner .bot{ .alertDiv .inner .bot{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -744,8 +747,9 @@ html,body{ ...@@ -744,8 +747,9 @@ html,body{
margin-bottom: .2rem; margin-bottom: .2rem;
} }
.paiZhaoCon img{ .paiZhaoCon img{
width: 3.76rem; /* width: 3.76rem;
height: 6.68rem; height: 6.68rem; */
width: 100%;
display: block; display: block;
margin: auto; margin: auto;
} }
......
huaian/demo.html
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>江苏移动</title> <title>江苏移动</title>
<link rel="stylesheet" href="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/css/vant.css"/> <link rel="stylesheet" href="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/css/vant.css"/>
<link rel="stylesheet" href="css/demo.css?22223000333"> <link rel="stylesheet" href="css/demo.css?3333">
</head> </head>
<body> <body>
...@@ -313,10 +313,10 @@ ...@@ -313,10 +313,10 @@
<script src="js/jquery-3.4.1.min.js"></script> <script src="js/jquery-3.4.1.min.js"></script>
<script src="js/axios.min.js"></script> <script src="js/axios.min.js"></script>
<script src="js/AgoraRTC_N.js"></script> <script src="js/AgoraRTC_N.js"></script>
<script src="js/util.js?12312313"></script> <script src="js/util.js?999999"></script>
<script src="js/vue.min.js"></script> <script src="js/vue.min.js"></script>
<script src="js/vant.min.js"></script> <script src="js/vant.min.js"></script>
<script src="js/demo.js?3333"></script> <script src="js/demo.js?126466499"></script>
</script> </script>
</body> </body>
......
huaian/js/demo.js
...@@ -135,8 +135,8 @@ var noShootClick = false ...@@ -135,8 +135,8 @@ var noShootClick = false
var jdhEaxmpleShow = false var jdhEaxmpleShow = false
var cgmExampleShow = false var cgmExampleShow = false
var zgmExampleShow = false var zgmExampleShow = false
var snInputNum = window.snInputNum||5 var snInputNum
var noShootNum = window.noShootNum||5 var noShootNum
function getProcess(){ function getProcess(){
if(!window.location.href.includes('demo.html')){ if(!window.location.href.includes('demo.html')){
...@@ -162,6 +162,10 @@ function getProcess(){ ...@@ -162,6 +162,10 @@ function getProcess(){
$('#waitting').show() $('#waitting').show()
$("#mp3Source")[0].pause() $("#mp3Source")[0].pause()
//处理下图片提交的等待框
submitPictureSucc()
$('#pictureShowAlert').hide()
return return
}else{ }else{
$('#waitting').hide() $('#waitting').hide()
...@@ -174,6 +178,7 @@ function getProcess(){ ...@@ -174,6 +178,7 @@ function getProcess(){
$('#snAlertTile').text('请确认设备串号') $('#snAlertTile').text('请确认设备串号')
$('#snErrorTs').text('如识别错误你可重新进行拍摄'+(res.tryNum>=snInputNum?'或直接修改':'')) $('#snErrorTs').text('如识别错误你可重新进行拍摄'+(res.tryNum>=snInputNum?'或直接修改':''))
$('#snErrorTs').removeClass('tsRed')
$('#snErrorTs').css('opacity','1') $('#snErrorTs').css('opacity','1')
if(res.tryNum < snInputNum){ if(res.tryNum < snInputNum){
$('#snValue').prop('readonly', true); $('#snValue').prop('readonly', true);
...@@ -243,6 +248,7 @@ function getProcess(){ ...@@ -243,6 +248,7 @@ function getProcess(){
if(!snConfirmFlag && !ifClickHide){ if(!snConfirmFlag && !ifClickHide){
$('#snAlertTile').text('请输入设备串号') $('#snAlertTile').text('请输入设备串号')
$('#snErrorTs').text('串号多次未通过,你可手动输入设备串号') $('#snErrorTs').text('串号多次未通过,你可手动输入设备串号')
$('#snErrorTs').addClass('tsRed')
$('#snErrorTs').css('opacity','1') $('#snErrorTs').css('opacity','1')
$("#snValue").val('') $("#snValue").val('')
$("#snValue").removeClass('red') $("#snValue").removeClass('red')
...@@ -655,6 +661,7 @@ $('#submitPicture').click(()=>{ ...@@ -655,6 +661,7 @@ $('#submitPicture').click(()=>{
util.httpRequest({ util.httpRequest({
url: '/takePhoto ', url: '/takePhoto ',
time: 5000,
data: { data: {
applyId: applyId, applyId: applyId,
callId: callId, callId: callId,
...@@ -663,22 +670,29 @@ $('#submitPicture').click(()=>{ ...@@ -663,22 +670,29 @@ $('#submitPicture').click(()=>{
picData: picCode picData: picCode
} }
}).then(res=>{ }).then(res=>{
$('#loading').hide() submitPictureSucc()
ifSnSubmitPicture = true
setTimeout(() => {
jdhAndCgmClickHide = false
zgmExampleShow = false
}, 1000);
if(res.code == 200){ if(res.code == 200){
$('#pictureShowAlert').hide() $('#pictureShowAlert').hide()
}else{ }else{
toast(res.msg) toast(res.msg)
} }
}).catch(e=>{
$('#loading').hide()
toast('网络有点拥挤，请重新提交')
}) })
}) })
function submitPictureSucc(){
$('#loading').hide()
ifSnSubmitPicture = true
setTimeout(() => {
jdhAndCgmClickHide = false
zgmExampleShow = false
}, 1000);
}
//账号和设备串号的弹窗逻辑 //账号和设备串号的弹窗逻辑
$("#accountAlertShow").click(()=>{ $("#accountAlertShow").click(()=>{
$("#accountValue").val('') $("#accountValue").val('')
...@@ -732,6 +746,7 @@ function snInputSubmit(){ ...@@ -732,6 +746,7 @@ function snInputSubmit(){
}else if(res.code == 5001){ }else if(res.code == 5001){
$('#snErrorTs').css('opacity','1') $('#snErrorTs').css('opacity','1')
$("#snErrorTs").text(res.msg) $("#snErrorTs").text(res.msg)
$('#snErrorTs').addClass('tsRed')
$("#snValue").addClass('red') $("#snValue").addClass('red')
}else { }else {
toast('网络异常，请重新提交') toast('网络异常，请重新提交')
...@@ -824,6 +839,9 @@ async function setEnabled(type, state) { ...@@ -824,6 +839,9 @@ async function setEnabled(type, state) {
} }
async function init(){ async function init(){
snInputNum = window.snInputNum||5
noShootNum = window.noShootNum||5
$("#mp3Source").attr('src', 'https://lgyztest.obs.cidc-rp-12.joint.cmecloud.cn/file/temp/2025-01-08/hhT2XXAj.mp3') $("#mp3Source").attr('src', 'https://lgyztest.obs.cidc-rp-12.joint.cmecloud.cn/file/temp/2025-01-08/hhT2XXAj.mp3')
$("#mp3Source")[0].autoplay = true $("#mp3Source")[0].autoplay = true
$("#mp3Source")[0].play() $("#mp3Source")[0].play()
...@@ -1018,26 +1036,89 @@ $(window).on('load', function() { ...@@ -1018,26 +1036,89 @@ $(window).on('load', function() {
$('#beginAlert').css('display','block') $('#beginAlert').css('display','block')
}); });
const canvas = document.getElementById('canvas'); const canvas = document.getElementById('canvas');
const photo = document.getElementById('photoImg'); const photo = document.getElementById('photoImg');
const viewfinder = document.getElementById('cameraArea');
var picCode = '' var picCode = ''
function paiZhao(){ function paiZhao(){
let videoTest = $('#local-player video')[0] let videoTest = $('#local-player video')[0]
// 设置canvas尺寸与视频相同 // 设置canvas尺寸与视频相同
canvas.width = videoTest.videoWidth; canvas.width = videoTest.videoWidth;
canvas.height = videoTest.videoHeight; canvas.height = (videoTest.videoHeight*1.2)/3;
// 在canvas上绘制视频帧 // 在canvas上绘制视频帧
const context = canvas.getContext('2d'); const context = canvas.getContext('2d');
context.drawImage(videoTest, 0, 0, canvas.width, canvas.height); context.drawImage(videoTest, 0, videoTest.getBoundingClientRect().height*2.2/3, canvas.width, canvas.height,0,0,canvas.width,canvas.height);
// canvas.toBlob((blob) => {
// let sizeKB = (blob.size / 1024).toFixed(2);
// console.log(sizeKB)
// }, 'image/png', 0.92);
// 将照片转换为数据URL并显示
const data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
picCode = data
$('#phone').css('height','100%')
$('#phone').css('top','0')
}
function paiZhao2(){
let videoTest = $('#local-player video')[0]
// 设置canvas尺寸为取景框大小
canvas.width = viewfinder.offsetWidth
canvas.height = viewfinder.offsetHeight
// 计算取景框在视频中的位置
const videoWidth = videoTest.videoWidth;
const videoHeight = videoTest.videoHeight;
const videoAspectRatio = videoWidth / videoHeight;
const containerWidth = videoTest.offsetWidth;
const containerHeight = videoTest.offsetHeight;
// 计算视频在容器中的实际显示尺寸
let drawWidth, drawHeight, offsetX, offsetY;
if (containerWidth / containerHeight > videoAspectRatio) {
// 视频高度占满容器
drawHeight = containerHeight;
drawWidth = drawHeight * videoAspectRatio;
offsetX = (containerWidth - drawWidth) / 2;
offsetY = 0;
} else {
// 视频宽度占满容器
drawWidth = containerWidth;
drawHeight = drawWidth / videoAspectRatio;
offsetX = 0;
offsetY = (containerHeight - drawHeight) / 2;
}
// 计算取景框在视频中的位置和尺寸（以视频实际像素为单位）
const viewfinderRect = viewfinder.getBoundingClientRect();
const videoRect = videoTest.getBoundingClientRect();
const scaleX = videoWidth / drawWidth;
const scaleY = videoHeight / drawHeight;
const captureX = (viewfinderRect.left - videoRect.left - offsetX) * scaleX;
const captureY = (viewfinderRect.top - videoRect.top - offsetY) * scaleY;
const captureWidth = viewfinderRect.width * scaleX;
const captureHeight = viewfinderRect.height * scaleY;
// 在canvas上绘制视频帧
const context = canvas.getContext('2d');
// context.drawImage(
// videoTest,
// captureX, captureY, captureWidth, captureHeight,0, 0, canvas.width, canvas.height);
context.drawImage(
videoTest,
0, captureY, videoWidth, captureHeight,0, 0, canvas.width, canvas.height);
canvas.toBlob((blob) => { canvas.toBlob((blob) => {
let sizeKB = (blob.size / 1024).toFixed(2); let sizeKB = (blob.size / 1024).toFixed(2);
...@@ -1053,8 +1134,6 @@ function paiZhao(){ ...@@ -1053,8 +1134,6 @@ function paiZhao(){
$('#phone').css('height','100%') $('#phone').css('height','100%')
$('#phone').css('top','0') $('#phone').css('top','0')
} }
window.paiZhao = paiZhao
const script = document.createElement('script'); const script = document.createElement('script');
script.src = 'js/lang.js?' + Date.now(); script.src = 'js/lang.js?' + Date.now();
......
huaian/js/util.js
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
axios ({ axios ({
method: 'post', method: 'post',
url:origin + middle + param.url, url:origin + middle + param.url,
timeout:15000, timeout: param.time||15000,
data:param.data, data:param.data,
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
}).then((res) => { }).then((res) => {
resolve(res.data) resolve(res.data)
}).catch(res => { }).catch(res => {
reject(res.data) reject(res)
}) })
}) })
}, },
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!