1

李宁
Commit fd91ce25 authored Aug 26, 2025 by 李宁
Showing 5 changed files with 49 additions and 8 deletions
huaian/css/demo.css
huaian/demo.html
huaian/demo2.html
huaian/js/demo.js
huaian/js/demo2.js
--- a/huaian/css/demo.css
+++ b/huaian/css/demo.css
@@ -745,7 +745,7 @@ html,body{
 }
 .paiZhaoCon img{
    width: 3.76rem;
-    height: 6.68rem;
+    /* height: 6.68rem; */
    display: block;
    margin: auto;
 }

--- a/huaian/demo.html
+++ b/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?11111">
 </head>

 <body>

--- a/huaian/demo2.html
+++ b/huaian/demo2.html
--- a/huaian/js/demo.js
+++ b/huaian/js/demo.js
@@ -1026,18 +1026,60 @@ $(window).on('load', function() {

 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尺寸为取景框大小
+  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, 0, 0, canvas.width, canvas.height);
+  context.drawImage(
+    videoTest,
+    captureX, captureY, captureWidth, captureHeight);
+  //context.drawImage(videoTest, 0, 200, canvas.width, canvas.height);
+  // 源图像参数0, 0, canvas.width, canvas.height
+

  canvas.toBlob((blob) => {
    let sizeKB = (blob.size / 1024).toFixed(2);
@@ -1053,7 +1095,6 @@ function paiZhao(){
  $('#phone').css('height','100%')
  $('#phone').css('top','0')
 }
-window.paiZhao = paiZhao


 const script = document.createElement('script');

--- a/huaian/js/demo2.js
+++ b/huaian/js/demo2.js