ปรับการอัปโหลรูป Profile

src/modules/04_registryPerson/views/detailView.vue

@@ -105,8 +105,7 @@ const itemsMenu = computed(() => {
   if (
     leaveReason.value ===
       "(พ้นจากราชการด้วยสาเหตุ: ได้รับโทษทางวินัย ให้ออกจากราชการไว้ก่อน)" ||
-    leaveReason.value ===
-      "(พ้นจากราชการด้วยสาเหตุ: ลาออกจากราชการ)"
+    leaveReason.value === "(พ้นจากราชการด้วยสาเหตุ: ลาออกจากราชการ)"
   ) {
     return (
       baseItemsMenu.value?.filter(
@@ -140,7 +139,7 @@ const activeImage = ref<any | null>(null);
 const images = ref<any[]>([]);
 const imagesAlldata = ref<any[]>([]);
 input.type = "file";
-input.accept = ".jpg,.png,.tif,.pic";
+input.accept = ".jpg,.png,.tif,.pic,.jfif";
 
 input.addEventListener("change", (e) => {
   profileFile.value = (e.currentTarget as HTMLInputElement).files?.[0];
@@ -156,31 +155,96 @@ function imageActive(n: any) {
   activeImage.value = n;
 }
 
+// ฟังก์ชันสำหรับปรับขนาดภาพ
+function resizeImage(file: File): Promise<File> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    const reader = new FileReader();
+
+    reader.onload = (e) => {
+      img.src = e.target!.result as string; // แปลงเป็น string
+      img.onload = () => {
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        const width = 150;
+        const height = 200;
+
+        // ปรับขนาดภาพ
+        canvas.width = width;
+        canvas.height = height;
+
+        if (ctx) {
+          // ตั้งค่าสีพื้นหลังเป็นสีขาว
+          ctx.fillStyle = "white";
+          ctx.fillRect(0, 0, width, height); // วาดสี่เหลี่ยมสีขาวที่เต็ม canvas
+
+          // ตรวจสอบว่า ctx ไม่เป็น null
+          const imgAspectRatio = img.width / img.height;
+          const targetAspectRatio = width / height;
+
+          let drawWidth: number, drawHeight: number;
+
+          if (imgAspectRatio > targetAspectRatio) {
+            drawWidth = width;
+            drawHeight = width / imgAspectRatio;
+          } else {
+            drawHeight = height;
+            drawWidth = height * imgAspectRatio;
+          }
+
+          const xOffset = (width - drawWidth) / 2;
+          const yOffset = (height - drawHeight) / 2;
+
+          ctx.drawImage(img, xOffset, yOffset, drawWidth, drawHeight);
+
+          // แปลง canvas เป็น Blob
+          canvas.toBlob((blob) => {
+            if (blob) {
+              resolve(new File([blob], file.name, { type: file.type })); // สร้าง File ใหม่จาก Blob
+            } else {
+              reject(new Error("Failed to convert canvas to blob."));
+            }
+          }, "image/jpeg");
+        } else {
+          reject(new Error("Failed to get canvas context."));
+        }
+      };
+      img.onerror = (err) => reject(err);
+    };
+    reader.readAsDataURL(file);
+  });
+}
+
+const newProfileFile = ref<any>(null);
+
 /**
  * ฟังก์ชันอัปโหลด
  */
-function uploadImg() {
+async function uploadImg() {
+  showLoader();
+  newProfileFile.value = await resizeImage(profileFile.value);
+  closeImage();
   http
     .post(config.API.orgProfileAvatarbyType(empType.value), {
       profileId: empType.value == "" ? profileId.value : undefined,
       profileEmployeeId: empType.value !== "" ? profileId.value : undefined,
     })
-    .then((res) => {
+    .then(async (res) => {
       fileName.value = res.data.result.avatarName;
-      uploadProfile(res.data.result.avatar);
+      await uploadProfile(res.data.result.avatar);
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {});
+      hideLoader();
+    });
 }
 
 /**
  * ฟังก์ชันสร้าง path อัปโหลไฟล์
  * @param path
  */
-function uploadProfile(path: string) {
-  http
+async function uploadProfile(path: string) {
+  await http
     .post(config.API.fileByPath(path), {
       replace: true,
       fileList: [
@@ -189,15 +253,12 @@ function uploadProfile(path: string) {
         },
       ],
     })
-    .then((res) => {
+    .then(async (res) => {
       uploadUrl.value = res.data[fileName.value].uploadUrl;
-      uploadFileURL(uploadUrl.value, profileFile.value);
-      closeImage();
+      await uploadFileURL(uploadUrl.value, newProfileFile.value);
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
       hideLoader();
     });
 }
@@ -207,7 +268,7 @@ function uploadProfile(path: string) {
  * @param uploadUrl  path อัปโหลไฟล์
  * @param file ไฟล์
  */
-function uploadFileURL(uploadUrl: string, file: any) {
+async function uploadFileURL(uploadUrl: string, file: any) {
   showLoader();
   axios
     .put(uploadUrl, file, {
@@ -215,8 +276,8 @@ function uploadFileURL(uploadUrl: string, file: any) {
         "Content-Type": file.type,
       },
     })
-    .then(() => {
-      fetchProfile(profileId.value);
+    .then(async () => {
+      await fetchProfile(profileId.value);
       success($q, "อัปโหลดไฟล์สำเร็จ");
     })
     .catch((err) => {
@@ -231,8 +292,8 @@ function uploadFileURL(uploadUrl: string, file: any) {
  * ฟังก์ชันดึงข้อมูลรูปโปรไฟล์
  * @param id โปรไฟล์
  */
-function fetchProfile(id: string) {
-  http
+async function fetchProfile(id: string) {
+  await http
     .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, fileName.value))
     .then(async (res) => {
       profilePicture.value = res.data.downloadUrl;
@@ -1028,7 +1089,7 @@ onMounted(async () => {
   <!-- Dialog เลือก Image -->
   <q-dialog v-model="dialogImage" persistent>
     <q-card style="width: 100vw; max-width: 60vw">
-      <DialogHeader :tittle="'เลือกรูปภาพ'" :close="closeImage" />
+      <DialogHeader :tittle="'เลือกรูปภาพ (150 x 200 px)'" :close="closeImage" />
 
       <q-separator />
       <q-card-section class="col-12 row">