PHP、JS、HTMLを使用しスマホブラウザ上で帽子の試着

PHP、JS、HTMLを使用しスマホブラウザ上で帽子の試着ができるようにしたいです。
現在は以下のサイトを参考にライブラリからサイトにアップはできるようになっています。
この先の段階として、帽子の画像をアップした自撮り画像に合わせて表示をしたいです。
その際に、ただ帽子の画像を重ねるのではなく、自撮り画像を帽子の表示位置に合わせる必要があると考えています。
そこで質問したいことですが、
①そもそもPHP、JS、HTMLで実現できるのかどうか
②実装までの簡単な処理の流れ
を教えていただけると助かります。

参考サイト

自分で製作してみてその後状況を追記します。

m.ts10806

2020/09/30 09:41

>②実装までの簡単な処理の流れご自身が作りたいのであれば「設計」としてご自身で考えるものではないでしょうか。奇跡的に「そういう機能を作った人」が見ればまだ教えてもらえる可能性がゼロではないですが現在の質問の投げ方だと回答者が考えなければならない比重が大きすぎます（作業依頼に近い）まず自身が思うように調べてみてやってみて、そこで問題が起きてから質問されたほうが良いです。（質問は編集できますのでやってみたことがあれば追記してください）ちなみに「可能か」というとたいていは「可能です」となります。その難易度やプロセスは別ですが、1つのゴールに向かうためのルートは1つではありません。

行動規範の内容に同意します

回答2件

①そもそもPHP、JS、HTMLで実現できるのかどうか

できます。

②実装までの簡単な処理の流れ

設計にもよりますが、

データベースを用意する
バックエンド処理を用意し、フロントエンドからAPIにて実行できるようにする。
サイトのUIを決める、作る。
まずは静的にHTML、CSSを組む
写真の画像をアップロードできる仕組み（API）などを駆使し、合わせれるようにJSで表示をコントロールできるようにする

でしょうかね。
あと細かいやり方とかは、一、回答で済む話ではないので。
わからない、作れないと思うなら、外注さん雇うとかなんだりされるといいかと。
（自分で作るなら、ひたすら勉強と実践あるのみです）

投稿2020/09/30 10:03

miyabi_pudding

総合スコア9555

サイトに画像をアップロードしてもらうシステムが作れているのなら
あとはJavascriptだけで行けそうだと思い作成してみました。

自撮り画像を帽子の表示位置に合わせる

これをやろうとするとユーザーの自撮り画像をAIなどで自動判定し
さらに帽子をその画像に合わせるという、かなり難易度が高そうな
ことをしないと駄目だろうと思います。

なのでユーザーに帽子を自撮り画像に合わせてもらう方式で
適当なデザイン、適当なコードで作成してますので参考になるかは
分かりませんがどうぞ。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Wear Hat</title>
8    <style>
9        body {
10            width: 300px;
11            margin: 10px auto;
12        }
13
14        span {
15            width: 100%;
16            display: block;
17            text-align: center;
18            margin-bottom: 10px;
19            font-size: 20px;
20            font-weight: bold;
21        }
22
23        .hatBtnWrap {
24            width: 80%;
25            margin: 0 auto;
26        }
27
28        input[type="image"] {
29            width: 35%;
30            display: inline-block;
31            margin-bottom: 10px;
32        }
33
34        input[type="image"]:first-of-type {
35            margin-right: 25%;
36        }
37
38        .wearHatWrap {
39            width: 250px;
40            height: 250px;
41            margin: 0 auto 10px;
42            position: relative;
43        }
44
45        .userPic {
46            width: 100%;
47            height: 100%;
48            background-image: url("https://f.easyuploader.app/eu-prd/upload/20201001151030_72555770524c61333973.png");
49        }
50
51        .hatsImg {
52            width: 100px;
53            height: 60px;
54            position: absolute;
55            transform: translateX(-50%);
56            background-repeat: no-repeat;
57            background-size: contain;
58        }
59
60        .hat00 {
61            background-image: url("https://f.easyuploader.app/eu-prd/upload/20201001150002_76417637434477516a4f.png");
62            top: 8%;
63            left: 51%;
64        }
65
66        .hat01 {
67            background-image: url("https://f.easyuploader.app/eu-prd/upload/20201001150001_4d59784947756946696e.png");
68            top: 10%;
69            left: 50.5%;
70            width: 80px;
71        }
72
73        .hatAdjustBtnWrap {
74            width: 300px;
75            text-align: center;
76        }
77    </style>
78</head>
79
80<body>
81
82    <span>帽子を選択してください</span>
83    <div class="hatBtnWrap">
84        <input type="image" src="https://f.easyuploader.app/eu-prd/upload/20201001150002_76417637434477516a4f.png"
85            alt="麦わら">
86        <input type="image" src="img03Hat2.png" alt="自衛隊っぽいの">
87    </div>
88
89    <div class="wearHatWrap">
90        <div class="userPic"></div>
91        <div class="hatsImg"></div>
92    </div>
93
94    <div class="hatAdjustBtnWrap">
95        <span>帽子調整ボタン</span>
96        <button type="button">↑</button>
97        <button type="button">→</button>
98        <button type="button">↓</button>
99        <button type="button">←</button>
100        <button type="button">拡大</button>
101        <button type="button">縮小</button>
102        <button type="button">リセット</button>
103    </div>
104
105    <script>
106
107        const hatBtn = document.getElementsByTagName("input");
108        const hatBtnLen = hatBtn.length;
109        const hatsImg = document.getElementsByClassName("hatsImg")[0];
110
111        for (let i = 0; i < hatBtnLen; i++) {
112            hatBtn[i].addEventListener("click", () => {
113                hatsImgClassReset();
114                hatsImg.classList.add("hat0" + i);
115            });
116        }
117
118        const hatsImgClassReset = () => {
119            for (let i = 0; i < hatBtnLen; i++) {
120                hatsImg.classList.remove("hat0" + i);
121            }
122        }
123
124        const hatAdjustBtn = document.getElementsByTagName("button");
125        const hatAdjustBtnLen = hatAdjustBtn.length;
126
127        for (let i = 0; i < hatAdjustBtnLen; i++) {
128            hatAdjustBtn[i].addEventListener("click", () => {
129                if (hatsImg.classList.length > 1) {
130                    const cssStyleDeclaration = getComputedStyle(hatsImg, null);
131                    const topVal = cssStyleDeclaration.getPropertyValue("top");
132                    const topNum = Number(topVal.replace("px", ""));
133                    const leftVal = cssStyleDeclaration.getPropertyValue("left");
134                    const leftNum = Number(leftVal.replace("px", ""));
135                    const hatsImgWidth = hatsImg.clientWidth;
136                    const hatsImgHeight = hatsImg.clientHeight;
137
138                    switch (i) {
139                        case 0:
140                            hatsImg.style.top = topNum - 1 + "px";
141                            break;
142                        case 1:
143                            hatsImg.style.left = leftNum + 1 + "px";
144                            break;
145                        case 2:
146                            hatsImg.style.top = topNum + 1 + "px";
147                            break;
148                        case 3:
149                            hatsImg.style.left = leftNum - 1 + "px";
150                            break;
151                        case 4:
152                            hatsImg.style.width = hatsImgWidth * 1.1 + "px";
153                            hatsImg.style.height = hatsImgHeight * 1.1 + "px";
154                            break;
155                        case 5:
156                            hatsImg.style.width = hatsImgWidth * 0.9 + "px";
157                            hatsImg.style.height = hatsImgHeight * 0.9 + "px";
158                            break;
159                        case 6:
160                            hatsImg.style.top = "";
161                            hatsImg.style.left = "";
162                            hatsImg.style.width = "";
163                            hatsImg.style.height = "";
164                            break;
165                    }
166                }
167            });
168        }
169
170    </script>
171
172</body>
173
174</html>