update

src/fe/index.html

@@ -494,12 +494,15 @@
     </div>
   </div>
 
+  <!-- <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> -->
   <script src="lib/jquery-3.5.1.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"
     integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
     crossorigin="anonymous"></script>
   <script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
   <script src="./lib/gsap.min.js"></script>
+  <script src="./lib/exif.js"></script>
+  <script src="./lib/photoHelper.js"></script>
   <script src="js/utlis.js"></script>
   <script src="./js/services/userModel.js"></script>
   <script src="./js/services/index.js"></script>

src/fe/js/base.js

@@ -20,8 +20,6 @@ base = function () {
 			userProfile = profile;
 			getProfile();
 
-			register.LinePicHandler(profile.pictureUrl)
-
 			// 正式用 記得開
 			GameService.getInstanse().userLogin()
 				.then(_res => {
@@ -39,6 +37,7 @@ base = function () {
 					console.log("userData: ",userData)
 					
 					if(userData === null) {
+						register.LinePicHandler(profile.pictureUrl)
 						sectionFadeIn(".register");
 					}else {
 						sectionFadeIn(".passport");

src/fe/js/register.js

@@ -114,6 +114,7 @@ register = function () {
 		const imagePreview = $('.photo__img');
 		// console.log(fileInput.id)
 
+		var templeteHelper = new photoHelper();
 
 		fileInputs.forEach((fileInput)=> {
 			// 當選擇圖片後，顯示圖片的預覽
@@ -123,25 +124,44 @@ register = function () {
 				const selectedFile = fileInput.files[0];
 
 				if(selectedFile) {
-					const reader = new FileReader();
-					reader.onload = function(e) {
-						// 移除 data:image/jpeg;base64,
-						// customBase64Data = e.target.result.split(",")[1];
-
-						customBase64Data = e.target.result;
-						finalase64Data = customBase64Data;
-						// console.log(e.target)
-						const img = new Image();
-						img.src = e.target.result;
-						imagePreview.html("");
-						imagePreview.append(img);
-
-						// console.log(finalase64Data)
+
+					if(fileInput.id == 'fileInput1') {
+						templeteHelper.loadFile('#fileInput1',function (_photoData) {
+							console.log('fileInput1 has loaded.');
+							templateData = _photoData;
+							
+							finalase64Data = templateData;
+							console.log(finalase64Data)
+							
+							const img = new Image();
+							img.src = templateData;
+							imagePreview.html("");
+							imagePreview.append(img);
+							// $('.templete_output').attr('src', templateData);
+						});
 					}
-					reader.readAsDataURL(selectedFile);
+
+					if(fileInput.id == 'fileInput2') {
+						templeteHelper.loadFile('#fileInput2',function (_photoData) {
+							console.log('fileInput2 has loaded.');
+							templateData = _photoData;
+							
+							finalase64Data = templateData;
+							console.log(finalase64Data)
+	
+							const img = new Image();
+							img.src = templateData;
+							imagePreview.html("");
+							imagePreview.append(img);
+							// $('.templete_output').attr('src', templateData);
+						});
+					}
+					
+
 				}else {
 					LinePicHandler(linePicUrl);
 				}
+
 				if(fileInput.id == 'fileInput2') {
 					setTimeout(()=>{
 						console.log(finalase64Data)
@@ -151,6 +171,43 @@ register = function () {
 				}
 			});
 		});
+
+		// fileInputs.forEach((fileInput)=> {
+		// 	// 當選擇圖片後，顯示圖片的預覽
+		// 	fileInput.addEventListener("change", function(e){
+		// 		console.log(fileInput.id)
+
+		// 		const selectedFile = fileInput.files[0];
+
+		// 		if(selectedFile) {
+		// 			const reader = new FileReader();
+		// 			reader.onload = function(e) {
+		// 				// 移除 data:image/jpeg;base64,
+		// 				// customBase64Data = e.target.result.split(",")[1];
+
+		// 				customBase64Data = e.target.result;
+		// 				finalase64Data = customBase64Data;
+		// 				// console.log(e.target)
+		// 				const img = new Image();
+		// 				img.src = e.target.result;
+		// 				imagePreview.html("");
+		// 				imagePreview.append(img);
+
+		// 				// console.log(finalase64Data)
+		// 			}
+		// 			reader.readAsDataURL(selectedFile);
+		// 		}else {
+		// 			LinePicHandler(linePicUrl);
+		// 		}
+		// 		if(fileInput.id == 'fileInput2') {
+		// 			setTimeout(()=>{
+		// 				console.log(finalase64Data)
+		// 				sendBase64DataToApi(finalase64Data);
+		// 			}, 200);
+					
+		// 		}
+		// 	});
+		// });
 	}
 
 	// 送出圖片

src/fe/js/services/index.js

@@ -16,7 +16,7 @@ function Service() {
       
       // // 測試用資料
       // const profile = {
-      //   userId: "Ua89aacd560a328ece0fec5584435046d",
+      //   userId: "Ua89aacd560a328ece0fec5584435046f",
       //   displayName: "Tim",
       //   pictureUrl: "https://sprofile.line-scdn.net/0hAvrrYLRRHllfCwoU_RtgJi9bHTN8ekdLdWRZPmJYQGxnPFwLdG5Za29YSTkyb1AGID9XbzoLEmlTGGk_QV3ibVg7QG5mOVANdm5Uug",
       // }

src/fe/lib/photoHelper.js

@@ -0,0 +1,126 @@
+/**
+ *
+ * @authors Eric Hsiao
+ *
+ */
+
+var photoHelper = function () {
+
+  //private menbers
+  var photoData;
+  var maxHeight = 1200;
+
+  //private methods
+  function init() {
+    console.log('photoHelper is loaded.');
+  }
+
+  function loadFile(_input,_callback) {
+    // 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);
+    });
+  }
+
+  var ImageHelper = {
+    resizeAndRotateImage: function (inImageSource, inMaxLength, inSuccessCallback) {
+      var reader = new FileReader();
+      reader.readAsDataURL(inImageSource);
+      reader.onload = function (e) {
+        var canvas = document.createElement('canvas');
+        var ctx = canvas.getContext("2d");
+        var img = new Image();
+        img.onload = function () {
+          //設定長邊上限值
+          var max_Length = inMaxLength;
+
+          var imgWidth = img.width;
+          var imgHeight = img.height;
+
+          if (imgWidth > imgHeight) {
+            if (imgHeight > max_Length) {
+              imgWidth = Math.round(imgWidth *= max_Length / imgHeight);
+              imgHeight = max_Length;
+            }
+          } else {
+            if (imgWidth > max_Length) {
+              imgHeight = Math.round(imgHeight *= max_Length / imgWidth);
+              imgWidth = max_Length;
+            }
+          }
+
+          canvas.width = imgWidth;
+          canvas.height = imgHeight;
+
+          var that = this;
+          EXIF.getData(img, function () {
+            var orientation = EXIF.getTag(that, 'Orientation');
+            // alert(orientation);
+
+            if (orientation == 6 || orientation == 8 || orientation == 3) {
+              var rotateAngle = 0;
+
+              switch (orientation) {
+                case 3:
+                  rotateAngle = 180;
+                  break;
+                case 6:
+                  rotateAngle = 90;
+                  canvas.width = imgHeight;
+                  canvas.height = imgWidth;
+                  break;
+                case 8:
+                  rotateAngle = -90;
+                  canvas.width = imgHeight;
+                  canvas.height = imgWidth;
+                  break;
+              }
+
+              var x = canvas.width / 2;
+              var y = canvas.height / 2;
+
+              ctx.translate(x, y);
+              ctx.rotate(rotateAngle * Math.PI / 180);
+
+              ctx.drawImage(img, (-imgWidth / 2), (-imgHeight / 2), imgWidth, imgHeight);
+              console.log(imgWidth + ', ' + imgHeight);
+            }
+            else {
+              ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
+              console.log(imgWidth + ', ' + imgHeight);
+            }
+          });
+
+
+          var res = canvas.toDataURL("image/jpeg", 0.9);
+
+          inSuccessCallback(res);
+        };
+
+        img.src = e.target.result;
+      };
+    }
+  };
+
+  //constructor
+
+  {
+    $(document).ready(function () {
+      init();
+    });
+  }
+
+  //public
+
+  return {
+    loadFile: function (_input,_callback) {
+      loadFile(_input,_callback);
+    }
+  };
+};
+
+