-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
54 lines (54 loc) · 3.72 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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FGO鯖ステータス画面合成</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
<h1>FGOのサーバントステータス画面のスクリーンショットを合成する</h1>
<div class="main">
<div id="canvas-container">
<canvas id="canvas"></canvas>
</div>
<div class="toolbox">
<table id="image-info">
</table>
<div id="wrapp-download"></div>
<h2>使い方</h2>
<blockquote class="twitter-tweet" data-media-max-width="560">
<p lang="zxx" dir="ltr"><a href="https://t.co/gXEYKvoeYL">pic.twitter.com/gXEYKvoeYL</a></p>
— 4KaNE (@4KaNE_X) <a href="https://twitter.com/4KaNE_X/status/1834214719689031874?ref_src=twsrc%5Etfw">September 12, 2024</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<p>
<ol>
<li>左の合成エリアにスクリーンショットをドラッグ&ドロップしてください。</li>
<li>その上に合成したいスクリーンショットを再度ドラッグ&ドロップしてください。<br>常に後から挿入した画像が上のレイヤーになります。</li>
<li>画像の上部/下部をドラッグするとトリミング、画像の中心部分をドラッグすると移動できます。</li>
<li>位置を決定したら「画像を固定する」ボタンをクリックするか、新しい画像を追加することで透過が解除され画像が統合されます。</li>
<li>2,3,4を繰り返し画像の作成が終了したら、すべての画像が固定されていることを確認して「画像をダウンロード」ボタンをクリックしてください。</li>
<li>合成された画像が別タブで開くので、右クリックで画像を保存します。</li>
</ol>
</p>
<h2>注意等</h2>
<p>
<ul>
<li>このツールを使用したことによる損害に対して、一切の責任を負いかねます。</li>
<li>当ツールはVanilla JSのみで作成されています。</li>
<li>ブラウザ上のみで動作し、サーバーへの通信等は発生しません。</li>
<li>動作はWindows/Google Chrome/画面サイズ1920x1080以外では検証していません。</li>
<li>問題や改善等は<a href="https://github.com/4KaNE/FGO-Status-Synthesizer/issues" target="_blank" rel="noopener noreferrer">issue</a>または<a href="https://github.com/4KaNE/FGO-Status-Synthesizer/pulls" target="_blank" rel="noopener noreferrer">Pull request</a>までどうぞ。対応するかは未定です。</li>
</ul>
</p>
<p>
Author: <a href="https://x.com/4KaNE_X" target="_blank" rel="noopener noreferrer">4KaNE</a><br>
Github repository: <a href="https://github.com/4KaNE/FGO-Status-Synthesizer" target="_blank" rel="noopener noreferrer">https://github.com/4KaNE/FGO-Status-Synthesizer</a><br>
Powerd By <a href="https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-pages" target="_blank" rel="noopener noreferrer">GitHub Pages</a>
</p>
</div>
</div>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>