Răsfoiți Sursa

AI实验室
1、相机加入镜像效果,拍照后反转

liyanbo 5 luni în urmă
părinte
comite
27ec9cdb31
1 a modificat fișierele cu 9 adăugiri și 0 ștergeri
  1. 9 0
      src/components/ImageUpload/index.vue

+ 9 - 0
src/components/ImageUpload/index.vue

@@ -257,7 +257,14 @@ const takePhoto = () => {
   canvas.width = video.videoWidth;
   canvas.height = video.videoHeight;
   const context = canvas.getContext('2d');
+  
+  // 应用镜像效果
+  context.save();
+  context.translate(canvas.width, 0); // 平移到右侧
+  context.scale(-1, 1); // 水平翻转
   context.drawImage(video, 0, 0, canvas.width, canvas.height);
+  context.restore();
+  
   capturedImage.value = canvas.toDataURL('image/jpeg');
   isCapturing.value = true;
 };
@@ -443,6 +450,7 @@ const confirmAndUpload = async () => {
   height: auto;
   border: 1px solid #ddd;
   border-radius: 5px;
+  transform: scaleX(-1);
 }
 
 .captured-image-view img {
@@ -450,5 +458,6 @@ const confirmAndUpload = async () => {
   height: auto;
   border: 1px solid #ddd;
   border-radius: 5px;
+  transform: scaleX(-1);
 }
 </style>