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{
outline: none
}
.alertDiv .inner .errorTs{
color: #F00;
color: #666;
font-size: .26rem;
margin-top: .16rem;
}
.alertDiv .inner .tsRed{
color: #F00;
}
.alertDiv .inner .bot{
display: flex;
justify-content: space-between;
......@@ -744,8 +747,9 @@ html,body{
margin-bottom: .2rem;
}
.paiZhaoCon img{
width: 3.76rem;
height: 6.68rem;
/* width: 3.76rem;
height: 6.68rem; */
width: 100%;
display: block;
margin: auto;
}
......
huaian/demo.html
......@@ -7,7 +7,7 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>江苏移动</title>
<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>
<body>
......@@ -313,10 +313,10 @@
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/axios.min.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/vant.min.js"></script>
<script src="js/demo.js?3333"></script>
<script src="js/demo.js?126466499"></script>
</script>
</body>
......
huaian/js/demo.js
......@@ -135,8 +135,8 @@ var noShootClick = false
var jdhEaxmpleShow = false
var cgmExampleShow = false
var zgmExampleShow = false
var snInputNum = window.snInputNum||5
var noShootNum = window.noShootNum||5
var snInputNum
var noShootNum
function getProcess(){
if(!window.location.href.includes('demo.html')){
......@@ -162,6 +162,10 @@ function getProcess(){
$('#waitting').show()
$("#mp3Source")[0].pause()
//处理下图片提交的等待框
submitPictureSucc()
$('#pictureShowAlert').hide()
return
}else{
$('#waitting').hide()
......@@ -174,6 +178,7 @@ function getProcess(){
$('#snAlertTile').text('请确认设备串号')
$('#snErrorTs').text('如识别错误你可重新进行拍摄'+(res.tryNum>=snInputNum?'或直接修改':''))
$('#snErrorTs').removeClass('tsRed')
$('#snErrorTs').css('opacity','1')
if(res.tryNum < snInputNum){
$('#snValue').prop('readonly', true);
......@@ -243,6 +248,7 @@ function getProcess(){
if(!snConfirmFlag && !ifClickHide){
$('#snAlertTile').text('请输入设备串号')
$('#snErrorTs').text('串号多次未通过,你可手动输入设备串号')
$('#snErrorTs').addClass('tsRed')
$('#snErrorTs').css('opacity','1')
$("#snValue").val('')
$("#snValue").removeClass('red')
......@@ -655,6 +661,7 @@ $('#submitPicture').click(()=>{
util.httpRequest({
url: '/takePhoto ',
time: 5000,
data: {
applyId: applyId,
callId: callId,
......@@ -663,22 +670,29 @@ $('#submitPicture').click(()=>{
picData: picCode
}
}).then(res=>{
$('#loading').hide()
ifSnSubmitPicture = true
setTimeout(() => {
jdhAndCgmClickHide = false
zgmExampleShow = false
}, 1000);
submitPictureSucc()
if(res.code == 200){
$('#pictureShowAlert').hide()
}else{
toast(res.msg)
}
}).catch(e=>{
$('#loading').hide()
toast('网络有点拥挤，请重新提交')
})
})
function submitPictureSucc(){
$('#loading').hide()
ifSnSubmitPicture = true
setTimeout(() => {
jdhAndCgmClickHide = false
zgmExampleShow = false
}, 1000);
}
//账号和设备串号的弹窗逻辑
$("#accountAlertShow").click(()=>{
$("#accountValue").val('')
......@@ -732,6 +746,7 @@ function snInputSubmit(){
}else if(res.code == 5001){
$('#snErrorTs').css('opacity','1')
$("#snErrorTs").text(res.msg)
$('#snErrorTs').addClass('tsRed')
$("#snValue").addClass('red')
}else {
toast('网络异常，请重新提交')
......@@ -824,6 +839,9 @@ async function setEnabled(type, state) {
}
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")[0].autoplay = true
$("#mp3Source")[0].play()
......@@ -1018,26 +1036,89 @@ $(window).on('load', function() {
$('#beginAlert').css('display','block')
});
const canvas = document.getElementById('canvas');
const photo = document.getElementById('photoImg');
const viewfinder = document.getElementById('cameraArea');
var picCode = ''
function paiZhao(){
let videoTest = $('#local-player video')[0]
// 设置canvas尺寸与视频相同
canvas.width = videoTest.videoWidth;
canvas.height = videoTest.videoHeight;
canvas.height = (videoTest.videoHeight*1.2)/3;
// 在canvas上绘制视频帧
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) => {
let sizeKB = (blob.size / 1024).toFixed(2);
......@@ -1053,8 +1134,6 @@ function paiZhao(){
$('#phone').css('height','100%')
$('#phone').css('top','0')
}
window.paiZhao = paiZhao
const script = document.createElement('script');
script.src = 'js/lang.js?' + Date.now();
......
huaian/js/util.js
......@@ -78,7 +78,7 @@
axios ({
method: 'post',
url:origin + middle + param.url,
timeout:15000,
timeout: param.time||15000,
data:param.data,
headers: {
'Content-Type': 'application/json'
......@@ -86,7 +86,7 @@
}).then((res) => {
resolve(res.data)
}).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!