ปรับ ขนาดรูป

src/modules/04_checkin/views/Checkin.vue

@@ -72,7 +72,7 @@
                   <q-img
                     src="@/assets/map1.png"
                     :style="
-                      $q.screen.gt.xs ? 'height: 300px;' : 'height: 168px;'
+                      $q.screen.gt.xs ? 'height: 350px;' : 'height: 168px;'
                     "
                   ></q-img>
                   <div class="q-pa-md text-weight-medium text-grey-8">
@@ -98,45 +98,38 @@
                         color="blue-grey-3"
                       />
                     </div>
-                    <!-- <div class="text-center q-pt-md text-grey-7">
-                        ไม่มีรูปภาพ
-                      </div> -->
                   </div>
                   <div v-else>
                     <div v-if="hasPhoto">
                       <video
                         ref="video"
                         autoplay
-                        :style="{
+                        :style="
-                          width: videoWidth + 'px',
+                          $q.screen.gt.xs
-                          height: videoHeight + 'px',
+                            ? 'width: 375px; height: 350px;'
-                        }"
+                            : 'width: 245px; height: 220px;'
+                        "
                       ></video>
                       <canvas
                         ref="canvas"
-                        :width="videoWidth"
+                        :style="
-                        :height="videoHeight"
+                          $q.screen.gt.xs
+                            ? 'width: 375px; height: 350px;'
+                            : 'width: 252px; height: 190px;'
+                        "
                       ></canvas>
                     </div>
 
-                    <div v-else class="q-mt-sm">
+                    <div v-else>
                       <q-img
                         :src="img"
-                        :style="{
+                        :style="
-                          width: videoWidth + 'px',
+                          $q.screen.gt.xs
-                          height: videoHeight + 'px',
+                            ? 'width: 375px; height: 350px; border-radius: 5px;'
-                        }"
+                            : 'width: 245px; height: 218px; border-radius: 5px;'
-                        class="q-mt-lg"
+                        "
                       ></q-img>
-                      <canvas
+                      <canvas ref="canvas"></canvas>
-                        ref="canvas"
-                        :width="canvasWidth"
-                        :height="canvasHeight"
-                        :style="{
-                          width: videoWidth + 'px',
-                          height: videoHeight + 'px',
-                        }"
-                      ></canvas>
                     </div>
 
                     <div class="absolute-bottom-right q-ma-md">
@@ -306,11 +299,6 @@ const canvas = ref<HTMLCanvasElement | null>(null);
 const hasPhoto = ref<boolean>(true);
 const img = ref<any>();
 
-const videoWidth = ref<number>(335);
-const videoHeight = ref<number>(350);
-const canvasWidth = ref<number>(335);
-const canvasHeight = ref<number>(350);
-
 function capturePhoto() {
   const videoElement = video.value;
   const canvasElement = canvas.value;
@@ -323,7 +311,49 @@ function capturePhoto() {
     console.error("Canvas context not available");
     return;
   }
-  context.drawImage(videoElement, 0, 0, 335, 270);
+  const desiredWidth = 189;
+  const desiredHeight = 190;
+  const zoomFactor = 10;
+
+  const videoAspectRatio = videoElement.videoWidth / videoElement.videoHeight;
+  const canvasAspectRatio = desiredWidth / desiredHeight;
+
+  let drawWidth, drawHeight;
+
+  if (videoAspectRatio > canvasAspectRatio) {
+    drawWidth = desiredWidth * zoomFactor;
+    drawHeight = (desiredWidth * zoomFactor) / videoAspectRatio;
+  } else {
+    drawWidth = desiredHeight * zoomFactor * videoAspectRatio;
+    drawHeight = desiredHeight * zoomFactor;
+  }
+
+  canvasElement.width = drawWidth;
+  canvasElement.height = drawHeight;
+  if (context) {
+    context.imageSmoothingEnabled = true;
+    context.imageSmoothingQuality = "high";
+  }
+
+  // context.drawImage(
+  //   videoElement,
+  //   0,
+  //   0,
+  //   canvasElement.width,
+  //   canvasElement.height
+  // );
+  context.drawImage(
+    videoElement,
+    0,
+    0,
+    videoElement.videoWidth,
+    videoElement.videoHeight,
+    0,
+    0,
+    drawWidth,
+    drawHeight
+  );
+
   //ไฟล์รูป
   const dataURL = canvasElement.toDataURL(".image/.png");
   img.value = dataURL;