From 162ed7d34429be158c091cdcb51c6a1fcd34c654 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=AB=E8=B0=B7=E5=89=91=E4=BB=99?= <mapaler@163.com>
Date: Mon, 27 Jan 2020 15:14:59 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=88=AA=E5=9B=BE=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 languages/zh.css | 10 ++++++++--
 multi.html       |  3 +++
 script.js        | 37 ++++++++++++++++++++++++++-----------
 solo.html        |  3 +++
 style.css        |  7 +++----
 triple.html      |  3 +++
 6 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/languages/zh.css b/languages/zh.css
index 9145ce9e..440bf603 100644
--- a/languages/zh.css
+++ b/languages/zh.css
@@ -1,9 +1,12 @@
 @charset "utf-8";
 .status.loading-mon-info .text::before{
-	content: "正在加载怪物数据，请稍候。";
+	content: "正在加载怪物数据，请稍候……";
 }
 .status.loading-skill-info .text::before{
-	content: "正在加载技能数据，请稍候。";
+	content: "正在加载技能数据，请稍候……";
+}
+.status.prepare-cauture .text::before{
+	content: "正在准备截图，请稍候……";
 }
 .help-link::before{
 	content: "帮助和提示";
@@ -195,6 +198,9 @@
 .control-box .btn-clear-data::before{
 	content: "🗑️清除数据";
 }
+.control-box .btn-capture::before{
+	content: "📷截图";
+}
 .control-box .btn-swap-AB-team::before{
 	content: "🔄交换AB队";
 }
diff --git a/multi.html b/multi.html
index 2582138b..20cff5f0 100644
--- a/multi.html
+++ b/multi.html
@@ -11,6 +11,7 @@
 <script type="text/javascript" src="languages/language-list.js"></script>
 <script type="text/javascript" src="universal_function.js"></script>
 <script type="text/javascript" src="script.js"></script>
+<script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
 <script type="text/javascript">
 const solo = false;
 const teamsCount = 2;
@@ -27,11 +28,13 @@ var formation = new Formation(teamsCount,5);
 		</div>
 		<div>
 			<button class="btn-clear-data" onclick="clearData();"></button>
+			<button class="btn-capture" onclick="capture();"></button>
 			<button class="btn-show-mon-id" onclick="toggleShowMonId();"></button>
 			<button class="btn-show-mon-skill-cd" onclick="toggleShowMonSkillCd();"></button>
 			<button class="btn-solo-link" onclick="turnPage(1);"></button>
 			<button class="btn-triple-link" onclick="turnPage(3);"></button>
 			<button class="btn-swap-AB-team" onclick="swapABteam();"></button>
+			<a class="down-capture display-none" target="_blank"></a>
 		</div>
 		<div class="status"><span class="icon"></span><span class="text"></span></div>
 	</div>
diff --git a/script.js b/script.js
index dce712b7..f5adc93d 100644
--- a/script.js
+++ b/script.js
@@ -20,6 +20,7 @@ var currentDataSource; //当前数据
 var interchangeSvg; //储存划线的SVG
 var interchangePath; //储存划线的线
 var controlBox; //储存整个controlBox
+var statusLine; //储存状态栏
 var formationBox; //储存整个formationBox
 var teamBigBoxs = []; //储存全部teamBigBox
 var allMembers = []; //储存所有成员，包含辅助
@@ -287,11 +288,16 @@ function turnPage(toPage)
 }
 window.onload = function()
 {
-	interchangeSVG = document.querySelector("#interchange-line");
+	controlBox = document.body.querySelector(".control-box");
+	statusLine = controlBox.querySelector(".status"); //显示当前状态的
+	const helpLink = controlBox.querySelector(".help-link");
+
+	formationBox = document.body.querySelector(".formation-box");
+
+	editBox = document.body.querySelector(".edit-box");
+
+	interchangeSVG = document.body.querySelector("#interchange-line");
 	interchangePath = interchangeSVG.querySelector("g line");
-	const controlBox = document.querySelector(".control-box");
-	const helpLink = document.querySelector(".help-link");
-	const statusLine = controlBox.querySelector(".status"); //显示当前状态的
 
 	if (location.hostname.indexOf("gitee")>=0)
 	{
@@ -455,10 +461,25 @@ function creatNewUrl(arg){
 		return newUrl;
 	}
 }
+function capture()
+{
+	statusLine.classList.add("prepare-cauture");
+	const downLink = controlBox.querySelector(".down-capture");
+	html2canvas(formationBox).then(canvas => {
+		canvas.toBlob(function(blob) {
+			window.URL.revokeObjectURL(downLink.href);
+			downLink.href = URL.createObjectURL(blob);
+			downLink.download = `${teamsCount}P formation cauture.png`;
+			downLink.click();
+			statusLine.classList.remove("prepare-cauture");
+		  });
+		//document.body.appendChild(canvas);
+	});
+}
 //初始化
 function initialize()
 {
-	let monstersList = document.body.querySelector("#monsters-name-list");
+	const monstersList = editBox.querySelector("#monsters-name-list");
 	let fragment = document.createDocumentFragment();
 	const linkReg = "link:(\\d+)";
 	Cards.forEach(function(m){ //添加下拉框候选
@@ -475,11 +496,6 @@ function initialize()
 	});
 	monstersList.appendChild(fragment);
 
-	//控制框
-	controlBox = document.body.querySelector(".control-box");
-
-	//队伍框
-	formationBox = document.body.querySelector(".formation-box");
 	//标题和介绍文本框
 	const txtTitle = formationBox.querySelector(".title-box .title");
 	const txtDetail = formationBox.querySelector(".detail-box .detail");
@@ -552,7 +568,6 @@ function initialize()
 	});
 
 	//编辑框
-	editBox = document.body.querySelector(".edit-box");
 	editBox.mid = null; //储存怪物id
 	editBox.awokenCount = 0; //储存怪物潜觉数量
 	editBox.latent = []; //储存潜在觉醒
diff --git a/solo.html b/solo.html
index aba1f005..6d4f11a6 100644
--- a/solo.html
+++ b/solo.html
@@ -11,6 +11,7 @@
 <script type="text/javascript" src="languages/language-list.js"></script>
 <script type="text/javascript" src="universal_function.js"></script>
 <script type="text/javascript" src="script.js"></script>
+<script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
 <script type="text/javascript">
 const solo = true;
 const teamsCount = 1;
@@ -27,10 +28,12 @@ var formation = new Formation(teamsCount,6);
 		</div>
 		<div>
 			<button class="btn-clear-data" onclick="clearData();"></button>
+			<button class="btn-capture" onclick="capture();"></button>
 			<button class="btn-show-mon-id" onclick="toggleShowMonId();"></button>
 			<button class="btn-show-mon-skill-cd" onclick="toggleShowMonSkillCd();"></button>
 			<button class="btn-multi-link" onclick="turnPage(2);"></button>
 			<button class="btn-triple-link" onclick="turnPage(3);"></button>
+			<a class="down-capture display-none" target="_blank"></a>
 		</div>
 		<div class="status"><span class="icon"></span><span class="text"></span></div>
 	</div>
diff --git a/style.css b/style.css
index 93ff258b..578b5541 100644
--- a/style.css
+++ b/style.css
@@ -68,7 +68,9 @@ body{
 	content: "正在加载怪物数据";
 }*/
 .status.loading-mon-info .icon,
-.status.loading-skill-info .icon{
+.status.loading-skill-info .icon,
+.status.prepare-cauture .icon
+{
 	display: inline-block;
 	width: 16px;
 	height: 16px;
@@ -1203,9 +1205,6 @@ ul{
 .control-box .multi-link::before{
 	content: "Jump To 2-Player Version";
 }
-.control-box .btn-show-mon-id{
-	margin-left: 5px;
-}
 /*.control-box .btn-show-mon-id::before{
 	content: "隐藏怪物ID";
 }
diff --git a/triple.html b/triple.html
index 2279ed5a..5a6e6f7c 100644
--- a/triple.html
+++ b/triple.html
@@ -11,6 +11,7 @@
 <script type="text/javascript" src="languages/language-list.js"></script>
 <script type="text/javascript" src="universal_function.js"></script>
 <script type="text/javascript" src="script.js"></script>
+<script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
 <script type="text/javascript">
 const solo = false;
 const teamsCount = 3;
@@ -33,11 +34,13 @@ var formation = new Formation(teamsCount,6);
 		</div>
 		<div>
 			<button class="btn-clear-data" onclick="clearData();"></button>
+			<button class="btn-capture" onclick="capture();"></button>
 			<button class="btn-show-mon-id" onclick="toggleShowMonId();"></button>
 			<button class="btn-show-mon-skill-cd" onclick="toggleShowMonSkillCd();"></button>
 			<button class="btn-solo-link" onclick="turnPage(1);"></button>
 			<button class="btn-multi-link" onclick="turnPage(2);"></button>
 			<button class="btn-swap-AB-team" onclick="swapABteam();"></button>
+			<a class="down-capture display-none" target="_blank"></a>
 		</div>
 		<div class="status"><span class="icon"></span><span class="text"></span></div>
 	</div>