-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
63 lines (63 loc) · 4.27 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Alpha M@STER</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-109141488-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());gtag('config', 'UA-109141488-2');
</script>
</head>
<body>
<h1>Alpha M@STER (非公式)</h1>
<p id="top_info">
<a href="#howtouse">つかいかた</a>
<a href="http://www.nicovideo.jp/watch/sm32209148">つかいかた(ニコニコ動画)</a>
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="デレステのフォトスタジオの背景をスマホでも簡単に切り抜けるサイト「Alpha M@STER」" data-via="428rinsuki" data-lang="ja" data-dnt="true" data-show-count="false">Tweet</a>
</p>
<div id="selectFile">
<p>タップで画像を選択
</div>
<input type="file" id="selectFileInput" accept="image/*">
<h2>クロマキー選択</h2>
<select id="chromaKey">
<!-- r,g,b -->
<option value="239,3,102">キュート</option>
<option value="0,97,255">クール</option>
<option value="255,168,2">パッション</option>
<option value="255,0,0">クロマキー・R (ミリシタ)</option>
<option value="0,255,0">クロマキー・G (ミリシタ)</option>
<option value="0,0,255">クロマキー・B (ミリシタ)</option>
</select>
<p>しきい値(背景色の跡が残っている場合には数値を20ぐらいずつ増やしてみてください): <input type="number" id="sikii" min="1" max="255" value="20">
<button id="start">ST@RT!!</button>
<canvas id="canvas"></canvas>
<h2>結果</h2>
↓長押しとかで保存してください
<img id="result">
<p>Created by <a href="https://rinsuki.github.io">rinsuki</a>(Twitter: <a href="https://twitter.com/428rinsuki">@428rinsuki</a>).
<p>Source Code: <a href="https://github.com/cinderella-project/alpha-master">cinderella-project/alpha-master - GitHub</a>
<hr>
<h2 id="howtouse">つかいかた</h2>
<p>ニコニコ動画に使い方の動画を上げたのでそちらもよければ
<p><a href="http://www.nicovideo.jp/watch/sm32209148">デレステのフォトスタジオの背景を簡単に切り抜けるサイトを作った - ニコニコ動画</a>(sm32209148)
<ol>
<li>デレステの「メニュー」→「プロデュースノート」→好きなアイドルを選ぶ→「フォトスタジオ」を選択
<li>撮影スポットを「スクリーン キュート」「スクリーン クール」「スクリーン パッション」のどれかにする(できるだけアイドルの衣装等と似ていない色がおすすめ)
<li>好きなポーズや視点でバシャバシャスクショを撮る(スクショの撮り方は端末によって違うのでここでは省略、Googleとかで検索してね)
<li>このページを開いて「タップで画像を選択」のところをタップしてさきほど撮ったスクショを選択
<li>クロマキー選択のところの下の「キュート」と書かれているところをタップ、さきほど選んだ撮影スポットの「スクリーン」のあとにあわせる
<li>「ST@RT!!」を押す
<li>結果の下あたりに白背景の画像が表示されているはずなので画像長押しなどで保存(端末やブラウザによって違うかも)
<li>おわり
</ol>
<p>株式会社バンダイナムコエンターテイメントや株式会社Cygames等とは関係ありません。
</body>
</html>