fix photo

src/fe/healthpassport/css/all.css

@@ -10991,6 +10991,7 @@ button.swiper-pagination-bullet {
   position: relative;
 }
 .photo__img {
+  position: relative;
   width: 16em;
   height: 16em;
   border-radius: 50%;
@@ -11017,6 +11018,61 @@ button.swiper-pagination-bullet {
 .photo .fileInput {
   display: none;
 }
+.photo .load-wrapp {
+  display: none;
+  position: absolute;
+  width: 16em;
+  height: 16em;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.2);
+  pointer-events: none;
+}
+.photo .load {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 40%;
+  height: 40%;
+}
+.photo .spinner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  animation: loadingI 2s linear infinite;
+}
+.photo .bubble-1,
+.photo .bubble-2 {
+  position: absolute;
+  top: 0;
+  width: 3em;
+  height: 3em;
+  border-radius: 100%;
+  background-color: #EAF2F8;
+  animation: bounce 2s ease-in-out infinite;
+}
+.photo .bubble-2 {
+  top: auto;
+  bottom: 0;
+  animation-delay: -1s;
+}
+@keyframes loadingI {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes bounce {
+  0%, 100% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
+  }
+}
 
 .modal .close {
   font-size: 1rem;

src/fe/healthpassport/css/component/_userPhoto.scss

@@ -2,6 +2,7 @@
 .photo {
   position: relative;
   &__img {
+    position: relative;
     width: 16em;
     height: 16em;
     // border: 1px solid red;
@@ -29,4 +30,61 @@
   .fileInput {
     display: none;
   }
+  .load-wrapp {
+    display: none;
+    position: absolute;
+    width: 16em;
+    height: 16em;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background-color: rgba($c-white, 0.2);
+    pointer-events: none;
+  }
+  .load {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 40%;
+      height: 40%;
+  }
+  .spinner {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      margin: 0 auto;
+      animation: loadingI 2s linear infinite;
+  }
+  .bubble-1,
+  .bubble-2 {
+      position: absolute;
+      top: 0;
+      width: 3em;
+      height: 3em;
+      border-radius: 100%;
+      background-color: $c-blue-active;
+      animation: bounce 2s ease-in-out infinite;
+  }
+  .bubble-2 {
+      top: auto;
+      bottom: 0;
+      animation-delay: -1s;
+  }
+  @keyframes loadingI {
+      100% {
+          transform: rotate(360deg);
+      }
+  }
+
+  @keyframes bounce {
+      0%,
+      100% {
+          transform: scale(0);
+      }
+      50% {
+          transform: scale(1);
+      }
+  }
 }

src/fe/healthpassport/index.html

@@ -43,6 +43,14 @@
             <div class="form">
               <div class="form__item form__item-photo photo">
                 <div class="photo__img"></div>
+                <div class="load-wrapp">
+                  <div class="load">
+                    <div class="spinner">
+                      <div class="bubble-1"></div>
+                      <div class="bubble-2"></div>
+                    </div>
+                  </div>
+                </div>
                 <input type="file" id="fileInput1" class="fileInput" accept="image/*">
                 <div class="photo__icon photo__icon-1">
                   <img src="./images/solar_camera-linear.png" alt="">

src/fe/healthpassport/js/register.js

@@ -121,6 +121,8 @@ register = function () {
 			fileInput.addEventListener("change", function(e){
 				console.log(fileInput.id)
 
+				$(".photo .load-wrapp ").show();
+
 				const selectedFile = fileInput.files[0];
 
 				if(selectedFile) {
@@ -138,6 +140,8 @@ register = function () {
 							imagePreview.html("");
 							imagePreview.append(img);
 							// $('.templete_output').attr('src', templateData);
+
+							$(".photo .load-wrapp ").hide();
 						});
 					}
 
@@ -154,14 +158,18 @@ register = function () {
 							imagePreview.html("");
 							imagePreview.append(img);
 							// $('.templete_output').attr('src', templateData);
+
+							$(".photo .load-wrapp ").hide();
 						});
 					}
 					
 
 				}else {
 					LinePicHandler(linePicUrl);
+					$(".photo .load-wrapp ").hide();
 				}
 
+
 				if(fileInput.id == 'fileInput2') {
 					setTimeout(()=>{
 						console.log(finalase64Data)

src/fe/healthpassport/js/services/index.js

@@ -12,14 +12,14 @@ function Service() {
   function init() {
     console.log('GameService init')
 
-    return liffInit().then((profile) => {
+    // return liffInit().then((profile) => {
       
       // // 測試用資料
-      // const profile = {
-      //   userId: "Ua89aacd560a328ece0fec5584435046f",
-      //   displayName: "Tim",
-      //   pictureUrl: "https://sprofile.line-scdn.net/0hAvrrYLRRHllfCwoU_RtgJi9bHTN8ekdLdWRZPmJYQGxnPFwLdG5Za29YSTkyb1AGID9XbzoLEmlTGGk_QV3ibVg7QG5mOVANdm5Uug",
-      // }
+      const profile = {
+        userId: "Ua89aacd560a328ece0fec5584435046f",
+        displayName: "Tim",
+        pictureUrl: "https://sprofile.line-scdn.net/0hAvrrYLRRHllfCwoU_RtgJi9bHTN8ekdLdWRZPmJYQGxnPFwLdG5Za29YSTkyb1AGID9XbzoLEmlTGGk_QV3ibVg7QG5mOVANdm5Uug",
+      }
 
       m_LineUserId = profile.userId || '';
       m_LineName = profile.displayName || '';
@@ -29,12 +29,12 @@ function Service() {
       console.log('lineUserId:', m_LineUserId)
 
       // 測試用
-      // return Promise.resolve(profile);
+      return Promise.resolve(profile);
 
-      return profile;
-    }).catch((error) => {
-      console.log('[GameService] Liff Init Error \n Name:' + error.name + '\n Message:' + error.message);
-    })
+    //   return profile;
+    // }).catch((error) => {
+    //   console.log('[GameService] Liff Init Error \n Name:' + error.name + '\n Message:' + error.message);
+    // })
 
   }
 

src/fe/healthpassport/lib/photoHelper.js

@@ -19,10 +19,43 @@ var photoHelper = function () {
     // var file = document.querySelector('input[type=file]').files[0];
     var file = $(_input)[0].files[0];
 
-    ImageHelper.resizeAndRotateImage(file,maxHeight,function(resizeImageObj){
-      // var newImage = new Image();
-      // newImage.src = resizeImageObj;
-      _callback(resizeImageObj);
+    removePicExif(file).then(res => {
+      console.log(res)
+      file = res;
+      ImageHelper.resizeAndRotateImage(file,maxHeight,function(resizeImageObj){
+        // var newImage = new Image();
+        // newImage.src = resizeImageObj;
+        _callback(resizeImageObj);
+      });
+    });
+  }
+
+  function removePicExif(file) {
+    return new Promise((reslove) => {
+      if (file) {
+        let reader = new FileReader();
+        let image = new Image();
+        reader.onload = function (ev) {
+          image.src = ev.target.result;
+          image.onload = function () {
+            const ctxWidth = this.width;
+            const ctxHeight = this.height;
+            const canvas = document.createElement("canvas");
+            const ctx = canvas.getContext("2d");
+            canvas.width = ctxWidth;
+            canvas.height = ctxHeight;
+            ctx.drawImage(this, 0, 0, ctxWidth, ctxHeight);
+            canvas.toBlob((blob) => {
+              const newFile = new File([blob], file.name, {
+                type: "image/jpeg",
+                lastModified: Date.now(),
+              });
+              reslove(newFile);
+            });
+          };
+        };
+        reader.readAsDataURL(file);
+      }
     });
   }