Merge pull request #17 from ongheong/ongheong-main

<feat>: 아바타꾸미기 디렉토리 및 파일 추가
FF-UNI-SPHERE · Jan 27, 2024 · 210cd5e · 210cd5e
2 parents efeb144 + edda201
commit 210cd5e
Show file tree

Hide file tree

Showing 15 changed files with 94 additions and 0 deletions.
diff --git a/test_siwon/AvatarTest.js b/test_siwon/AvatarTest.js
@@ -0,0 +1,48 @@
+function combineImages(imageObjects) {
+    // 이미지 로드를 위한 프로미스 생성
+    var loadPromises = imageObjects.map((imgObj) => {
+      return new Promise((resolve) => {
+        var img = new Image();
+        //이미지 중심 계산
+        var centerX = imgObj.x - img.width/2;
+        var centerY = imgObj.y - img.height/2;
+        img.onload = function () {
+          resolve({ img: img, x: centerX, y: centerY });
+        };
+        img.src = imgObj.src;
+      });
+    });
+
+    // 모든 이미지 로딩 완료 후 그리기
+    Promise.all(loadPromises).then((loadedImages) => {
+      loadedImages.forEach((loadedImg) => {
+        ctx.drawImage(loadedImg.img, loadedImg.x, loadedImg.y);
+        console.log(`loadedImg:${loadedImg}, ImgX:${loadedImg.x}, ImgY:${loadedImg.y}`)
+      });
+    });
+  }
+
+const BASE_X = 50;
+const BASE_Y = 50;
+
+var canvas = document.getElementById("avatarCanvas");
+var ctx = canvas.getContext("2d");
+
+//캔버스 크기의 절반 계산 -> 중앙좌표 획득
+// const BASE_X = canvas.width / 2;
+// const BASE_Y = canvas.height / 2;
+
+
+combineImages([
+
+{ src: "test/LeftArm_4.png", x: BASE_X - 2, y: BASE_Y + 14 },
+{ src: "test/Legs_5.png", x: BASE_X + 2, y: BASE_Y + 21 },
+{ src: "test/Body_3.png", x: BASE_X + 1, y: BASE_Y + 14 },
+{ src: "test/RightArm_2.png", x: BASE_X + 10, y: BASE_Y + 14 },
+// { src: "hair/Hair_1.png", x: BASE_X - 7, y: BASE_Y - 13},
+{ src: "test/Head_1.png", x: BASE_X, y: BASE_Y },
+{ src: "eyes/Eye_Back.png", x: BASE_X+3, y: BASE_Y+6},
+{ src: "eyes/Eye_Back.png", x: BASE_X+9, y: BASE_Y+6},
+{ src: "hair/Hair_9.png", x: BASE_X - 7, y: BASE_Y - 13},
+
+]);
diff --git a/test_siwon/HairColorChange.py b/test_siwon/HairColorChange.py
@@ -0,0 +1,34 @@
+from PIL import Image, ImageOps
+from itertools import product
+
+
+# 파일 경로 배열 (idx, Hair_{idx}.png)
+# file_paths = [f"Hair_{i}.png" for i in range(1, 10)]
+file_paths_map = {i: f"Hair_{i}.png" for i in range(1, 10)}
+
+
+# 적용할 색상 배열
+colors = ["#FFF5C3", "#4E342E", "#FFC0CB", "#0000FF",
+          "#FF0000", "#008000", "#FFFF00", "#800080"]
+
+# 각 파일에 대해 색상 변경 적용
+for file_path_idx, color in product(file_paths_map, colors):
+    print(file_paths_map[file_path_idx], color)
+    # 이미지 열기
+    image = Image.open(file_paths_map[file_path_idx])
+
+    # 이미지 크기 조정
+    scaled_image = image.resize((250, 200))
+
+    # 회색조로 변환
+    gray_image = ImageOps.grayscale(scaled_image)
+
+    # 지정된 색상으로 색조 적용
+    colored_image = ImageOps.colorize(gray_image, black="black", white=color)
+
+    # 색상 변경된 이미지 표시
+    colored_image.show()
+
+    # result/Hair_{i}_{color}.png 형식으로 저장
+    # colored_image.save(f"Hair_{file_path_idx}_{color}.png")
+    colored_image.save(f"result/Hair_{file_path_idx}_{color}.png")
diff --git a/test_siwon/eyes/Eye_Back.png b/test_siwon/eyes/Eye_Back.png
diff --git a/test_siwon/eyes/Eye_Front.png b/test_siwon/eyes/Eye_Front.png
diff --git a/test_siwon/hair/Hair_1.png b/test_siwon/hair/Hair_1.png
diff --git a/test_siwon/hair/Hair_2.png b/test_siwon/hair/Hair_2.png
diff --git a/test_siwon/hair/Hair_7.png b/test_siwon/hair/Hair_7.png
diff --git a/test_siwon/hair/Hair_8.png b/test_siwon/hair/Hair_8.png
diff --git a/test_siwon/hair/Hair_9.png b/test_siwon/hair/Hair_9.png
diff --git a/test_siwon/test.html b/test_siwon/test.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AvatarTest</title>
+</head>
+<body>
+    <canvas id="avatarCanvas"></canvas>
+    <script src="test.js"></script>
+</body>
+</html>
diff --git a/test_siwon/test/Body_3.png b/test_siwon/test/Body_3.png
diff --git a/test_siwon/test/Head_1.png b/test_siwon/test/Head_1.png
diff --git a/test_siwon/test/LeftArm_4.png b/test_siwon/test/LeftArm_4.png
diff --git a/test_siwon/test/Legs_5.png b/test_siwon/test/Legs_5.png
diff --git a/test_siwon/test/RightArm_2.png b/test_siwon/test/RightArm_2.png