增加截图功能

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队";
 }

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>

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 = []; //储存潜在觉醒

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>

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";
 }

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>