From d849afac8b20ebd6c69d89dbcdf7d34cc8c2df08 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: Thu, 3 Aug 2023 19:17:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=80=8F=E6=98=8E=E6=88=AA?=
 =?UTF-8?q?=E5=9B=BE=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 multi.html  |  2 +-
 script.js   | 16 ++++++++++++----
 solo.html   |  2 +-
 triple.html |  2 +-
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/multi.html b/multi.html
index a2d05bfd..2f483ddc 100644
--- a/multi.html
+++ b/multi.html
@@ -64,7 +64,7 @@ const teamsCount = 2;
 		<div>
 			<a class="down-capture display-none" target="_blank"></a>
 			<button class="btn-qrcode fa"></button>
-			<button class="btn-capture" onclick="captureScreenshot(formationBox);"></button>
+			<button id="draw-screenshot"><input type="checkbox" id="screenshot-transparent"><label for="screenshot-transparent">透明</label></button>
 			<label for="default-level"></label><input id="default-level" type="number" min="1" max="120" placeholder="110"/>
 			<input type="checkbox" name="change-swap-to-copy" id="change-swap-to-copy"><label class="switch-lbl" for="change-swap-to-copy"></label>
 		</div>
diff --git a/script.js b/script.js
index 17417233..72dfb9fc 100644
--- a/script.js
+++ b/script.js
@@ -1787,13 +1787,13 @@ function paddbFotmationToPdfFotmation(obj)
 	return f;
 }
 //截图
-function captureScreenshot(target) {
+function captureScreenshot(target, transparent) {
 	statusLine?.writeText(localTranslating.status_message.prepare_capture);
 	//去掉可能的空白文字的编辑状态
 	formationBox.classList.remove("edit-code");
 	const downLink = controlBox.querySelector(".down-capture");
 	setTimeout(()=>{
-		html2canvas(target, {backgroundColor: null}).then(canvas => {
+		html2canvas(target, transparent ? {backgroundColor: null} : undefined).then(canvas => {
 			canvas.toBlob(function(blob) {
 				window.URL.revokeObjectURL(downLink.href);
 				downLink.href = URL.createObjectURL(blob);
@@ -1810,6 +1810,14 @@ window.onload = initialize; //界面初始化
 
 //初始化
 function initialize() {
+	const drawScreenshot = document.querySelector("#draw-screenshot");
+	const screenshotTransparent = document.querySelector("#screenshot-transparent");
+	drawScreenshot.onclick = function(event) {
+		if (event.target == this) {
+			captureScreenshot(formationBox, screenshotTransparent.checked);
+		}
+	}
+
 	document.body.lang = currentLanguage.i18n;
 
 	qrcodeReader = new ZXing.BrowserQRCodeReader(); //二维码读取
@@ -2004,8 +2012,8 @@ function initialize() {
 	qrCodeFrame.ondrop = function(e)
 	{
 		imagesSelected(e.dataTransfer.files); 
-		e.stopPropagation();  
-		e.preventDefault();   
+		e.stopPropagation();
+		e.preventDefault();
 	}
 
 	qrCodeFrame.refreshQrCode = function(string)
diff --git a/solo.html b/solo.html
index 6da7c8c1..ce6f945b 100644
--- a/solo.html
+++ b/solo.html
@@ -46,7 +46,7 @@ const teamsCount = 1;
 		<div>
 			<a class="down-capture display-none" target="_blank"></a>
 			<button class="btn-qrcode fa"></button>
-			<button class="btn-capture" onclick="captureScreenshot(formationBox);"></button>
+			<button id="draw-screenshot"><input type="checkbox" id="screenshot-transparent"><label for="screenshot-transparent"></label></button>
 			<label for="default-level"></label><input id="default-level" type="number" min="1" max="120" placeholder="110"/>
 			<input type="checkbox" name="change-swap-to-copy" id="change-swap-to-copy"><label class="switch-lbl" for="change-swap-to-copy"></label>
 		</div>
diff --git a/triple.html b/triple.html
index 1ef05e88..c00156a3 100644
--- a/triple.html
+++ b/triple.html
@@ -57,7 +57,7 @@ const teamsCount = 3;
 		<div>
 			<a class="down-capture display-none" target="_blank"></a>
 			<button class="btn-qrcode fa"></button>
-			<button class="btn-capture" onclick="captureScreenshot(formationBox);"></button>
+			<button id="draw-screenshot"><input type="checkbox" id="screenshot-transparent"><label for="screenshot-transparent">透明</label></button>
 			<label for="default-level"></label><input id="default-level" type="number" min="1" max="120" placeholder="110"/>
 			<input type="checkbox" name="change-swap-to-copy" id="change-swap-to-copy"><label class="switch-lbl" for="change-swap-to-copy"></label>
 		</div>