From 32fd6897f2141ce2caea58e7fb020cc281cf0fd4 Mon Sep 17 00:00:00 2001
From: ckx6954 <ckx6954@local-host.co.kr>
Date: Tue, 24 Dec 2024 13:32:17 +0900
Subject: [PATCH] =?UTF-8?q?js=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                     |  2 +-
 src/App.vue                      |  1 -
 src/common/convertImageToWebp.js | 61 ++++++----------------
 src/common/resizeImage.js        | 87 ++++++++++++++++++++++++++++++++
 4 files changed, 103 insertions(+), 48 deletions(-)
 create mode 100644 src/common/resizeImage.js

diff --git a/package.json b/package.json
index bba201d..638b6a7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "front",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/src/App.vue b/src/App.vue
index 1d5f928..ea3c699 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,6 @@
     </normal-layout>
 </template>
 <script setup>
-import { onMounted } from 'vue';
 import NormalLayout from './layouts/NormalLayout.vue';
 </script>
 <style>
diff --git a/src/common/convertImageToWebp.js b/src/common/convertImageToWebp.js
index 947c5ba..6d9c633 100644
--- a/src/common/convertImageToWebp.js
+++ b/src/common/convertImageToWebp.js
@@ -4,7 +4,6 @@
     const webpFile = await convertImageToWebp(this.attach);
     attach = webpFile[0];
 */
-import heic2any from 'heic2any';
 import { imageConverter } from 'upload-images-converter';
 
 const calculateAspectRatioSize = (originWidth, originHeight, maxWidthOrHeight) => {
@@ -73,57 +72,27 @@ const convertImageToWebp = async (imageFile) => {
         return dataTransfer.files;
     }
 
-    const fileExtension = imageFile.name.split('.').pop().toLowerCase();
+    try {
+        const { originWidth, originHeight } = await getImageSize(imageFile);
+        const maxWidthOrHeight = 1200;
 
-    if (fileExtension === 'heic') {
-        try {
-            const webpBlob = await heic2any({
-                blob: imageFile,
-                toType: 'image/webp',
-                quality: 0.8,
-            });
+        const { width, height } = calculateAspectRatioSize(originWidth, originHeight, maxWidthOrHeight);
 
-            const { originWidth, originHeight } = await getImageSize(webpBlob);
-            const maxWidthOrHeight = 1200;
+        const compressedBlob = await imageConverter({ files: [imageFile], width, height });
 
-            const { width, height } = calculateAspectRatioSize(originWidth, originHeight, maxWidthOrHeight);
+        const outputWebpFile = new File([compressedBlob[0]], `${Date.now().toString()}.webp`);
 
-            const compressedBlob = await imageConverter({ files: [webpBlob], width, height });
+        const dataTransfer = new DataTransfer();
+        dataTransfer.items.add(outputWebpFile);
 
-            const outputWebpFile = new File([compressedBlob[0]], `${Date.now().toString()}.webp`);
-
-            const dataTransfer = new DataTransfer();
-            dataTransfer.items.add(outputWebpFile);
-
-            return dataTransfer.files;
-        } catch (error) {
-            console.error('HEIC 변환 오류:', error);
-            throw error;
-        } finally {
-            // 로딩있으면 여기서 끝
-        }
-    } else {
-        try {
-            const { originWidth, originHeight } = await getImageSize(imageFile);
-            const maxWidthOrHeight = 1200;
-
-            const { width, height } = calculateAspectRatioSize(originWidth, originHeight, maxWidthOrHeight);
-
-            const compressedBlob = await imageConverter({ files: [imageFile], width, height });
-
-            const outputWebpFile = new File([compressedBlob[0]], `${Date.now().toString()}.webp`);
-
-            const dataTransfer = new DataTransfer();
-            dataTransfer.items.add(outputWebpFile);
-
-            return dataTransfer.files;
-        } catch (error) {
-            console.error('HEIC 변환 오류:', error);
-            throw error;
-        } finally {
-            // 로딩있으면 여기서 끝
-        }
+        return dataTransfer.files;
+    } catch (error) {
+        console.error('HEIC 변환 오류:', error);
+        throw error;
+    } finally {
+        //로딩이 있다면 여기서 끝내자
     }
+
 };
 
 export { convertImageToWebp };
diff --git a/src/common/resizeImage.js b/src/common/resizeImage.js
new file mode 100644
index 0000000..1cf8ec5
--- /dev/null
+++ b/src/common/resizeImage.js
@@ -0,0 +1,87 @@
+import heic2any from 'heic2any';
+
+/*
+const resizedDataURL = await resizeImage(selectedFile);  < 이미지 리사이징
+const resizedBlob = dataURLToBlob(resizedDataURL);  < blob url
+const resizedFile = new File([resizedBlob], selectedFile.name, { type: fileType }); < File로 변경
+*/
+
+const resizeImage = async (file, maxWidth = 800, maxHeight = 600) => {
+    if (file.type === 'image/heic') {
+        // HEIC 파일 처리
+        const convertedFile = await convertHEICToJPG(file);
+        return resizeImageFromFile(convertedFile, maxWidth, maxHeight);
+    } else {
+        // 일반 이미지 파일 처리
+        return resizeImageFromFile(file, maxWidth, maxHeight);
+    }
+}
+
+
+const convertHEICToJPG = (file) => {
+    return new Promise((resolve, reject) => {
+        heic2any({
+            blob: file,
+            toType: 'image/jpeg', // JPG로 변환
+        })
+            .then(convertedBlob => {
+                const convertedFile = new File([convertedBlob], file.name, { type: 'image/jpeg' });
+                resolve(convertedFile);
+            })
+            .catch(error => {
+                reject(new Error('HEIC 변환 실패: ' + error.message));
+            });
+    });
+}
+
+const dataURLToBlob = (dataURL) => {
+    const byteString = atob(dataURL.split(',')[1]);
+    const mimeString = dataURL.split(',')[0].split(':')[1].split(';')[0];
+    const arrayBuffer = new ArrayBuffer(byteString.length);
+    const uintArray = new Uint8Array(arrayBuffer);
+
+    for (let i = 0; i < byteString.length; i++) {
+        uintArray[i] = byteString.charCodeAt(i);
+    }
+
+    return new Blob([arrayBuffer], { type: mimeString });
+}
+
+
+const resizeImageFromFile = (file, maxWidth, maxHeight) => {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = e => {
+            const img = new Image();
+            img.onload = () => {
+                const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d');
+
+                let width = img.width;
+                let height = img.height;
+                const aspectRatio = width / height;
+
+                if (width > height) {
+                    width = Math.min(maxWidth, width);
+                    height = width / aspectRatio;
+                } else {
+                    height = Math.min(maxHeight, height);
+                    width = height * aspectRatio;
+                }
+
+                canvas.width = width;
+                canvas.height = height;
+                ctx.drawImage(img, 0, 0, width, height);
+
+                // Base64 데이터 반환
+                resolve(canvas.toDataURL('image/jpeg'));
+            };
+            img.onerror = () => reject(new Error('이미지 로드 실패'));
+            img.src = e.target.result;
+        };
+        reader.onerror = () => reject(new Error('파일 읽기 실패'));
+        reader.readAsDataURL(file);
+    });
+}
+
+export { resizeImage , dataURLToBlob};