先做了显示部分

images/qrcode-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="qrcode" class="svg-inline--fa fa-qrcode fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="14" height="14"><path fill="currentColor" d="M0 224h192V32H0v192zM64 96h64v64H64V96zm192-64v192h192V32H256zm128 128h-64V96h64v64zM0 480h192V288H0v192zm64-128h64v64H64v-64zm352-64h32v128h-96v-32h-32v96h-64V288h96v32h64v-32zm0 160h32v32h-32v-32zm-64 0h32v32h-32v-32z"></path></svg>

languages/zh.css

@@ -234,6 +234,12 @@
 .control-box .btn-capture::before{
 	content: "📷截图";
 }
+
+.control-box .btn-qrcode::before{
+	content: "\f029二维码";
+	font-family: 'Font Awesome 5 Free';
+	font-weight: normal;
+}
 .control-box .btn-swap-AB-team::before{
 	content: "🔄交换AB队";
 }

script.js

@@ -12,6 +12,8 @@ let statusLine; //储存状态栏
 let formationBox; //储存整个formationBox
 let editBox; //储存整个editBox
 let showSearch; //整个程序都可以用的显示搜索函数
+let qrcodeReader; //二维码读取
+let qrcodeWriter; //二维码输出
 
 const dataStructure = 3; //阵型输出数据的结构版本
 const className_displayNone = "display-none";
@@ -569,6 +571,9 @@ window.onload = function(event) {
 		alert("请更新您的浏览器。\nPlease update your browser.");
 	}
 
+	qrcodeReader = new ZXing.BrowserQRCodeSvgWriter(); //二维码读取
+	qrcodeWriter = new ZXing.BrowserQRCodeSvgWriter(); //二维码生成
+
 	controlBox = document.body.querySelector(".control-box");
 	statusLine = controlBox.querySelector(".status"); //显示当前状态的
 	formationBox = document.body.querySelector(".formation-box");
@@ -991,6 +996,74 @@ function initialize() {
 			line.setAttribute("y2", p2.y);
 	};
 
+	const qrCodeFrame = document.body.querySelector("#qr-code-frame");
+	const btnQrCode = controlBox.querySelector(`.btn-qrcode`);
+	btnQrCode.onclick = function(){
+		qrCodeFrame.show();
+	};
+	qrCodeFrame.content = qrCodeFrame.querySelector(".mask-content");
+	qrCodeFrame.show = function(){
+		this.classList.remove(className_displayNone);
+		this.refreshQrCode();
+	};
+	qrCodeFrame.refreshQrCode = function()
+	{
+		const qrBox = this.content.querySelector(".qr-box");
+
+		let outStr = JSON.stringify({
+			d:formation.outObj(),
+			s:currentDataSource.code,
+		});
+		const EncodeHintType = ZXing.EncodeHintType;
+		let svgElement;
+		const hints = new Map();
+		hints.set(EncodeHintType.MARGIN, 0);
+		//hints.set(EncodeHintType.CHARACTER_SET, "UTF8");
+		const qrWidth = 500,qrHeight = 500;
+		svgElement = qrcodeWriter.write(outStr, qrWidth, qrHeight, hints);
+		const svgData = (new XMLSerializer()).serializeToString(svgElement);
+		const blob = new Blob([svgData], {type : 'image/svg+xml'});
+		const svgUrl = URL.createObjectURL(blob);
+		loadImage(svgUrl).then(function(img) {
+
+			ctx = qrBox.getContext('2d');
+	
+			qrBox.width = qrWidth;
+			qrBox.height = qrHeight;
+
+			ctx.fillStyle="white";
+			ctx.fillRect(0, 0, qrWidth, qrHeight,)
+			ctx.drawImage(img, 0, 0, qrWidth, qrHeight);
+			svgElement = null;
+			img = null;
+		}, function(err) {
+			console.log(err);
+		});
+
+		// 加载 image
+		function loadImage(url) {
+			return new Promise(function(resolve, reject) {
+				var image = new Image();
+
+				image.src = url;
+				image.type = "svg"
+				image.crossOrigin = 'Anonymous';
+				image.onload = function() {
+					resolve(this);
+				};
+
+				image.onerror = function(err) {
+					reject(err);
+				};
+			});
+		}
+	}
+	qrCodeFrame.hide = function(){
+		this.classList.add(className_displayNone);
+	};
+	qrCodeFrame.close = qrCodeFrame.querySelector(".mask-close");
+	qrCodeFrame.close.onclick = function(){qrCodeFrame.hide()};
+
 	//标题和介绍文本框
 	const titleBox = formationBox.querySelector(".title-box");
 	const detailBox = formationBox.querySelector(".detail-box");
@@ -1590,12 +1663,12 @@ function initialize() {
 		maskContent.appendChild(fragment);
 		this.classList.remove(className_displayNone);
 	}
-	evolutionaryTreeMask.close = function()
+	evolutionaryTreeMask.hide = function()
 	{
 		this.classList.add(className_displayNone);
 	}
 	const evolutionaryTreeMask_Close = evolutionaryTreeMask.querySelector(".mask-close");
-	evolutionaryTreeMask_Close.onclick = function(){evolutionaryTreeMask.close();};
+	evolutionaryTreeMask_Close.onclick = function(){evolutionaryTreeMask.hide();};
 	const openEvolutionaryTree = settingBox.querySelector(".row-mon-id .open-evolutionary-tree");
 	openEvolutionaryTree.onclick = function() {evolutionaryTreeMask.show(editBox.mid)};
 

solo.html

@@ -17,6 +17,7 @@ const teamsCount = 1;
 <script type="text/javascript" src="script-universal_function.js"></script>
 <script type="text/javascript" src="script.js"></script>
 <script type="text/javascript" src="library/html2canvas.min.js"></script>
+<script type="text/javascript" src="library/zxing.umd.min.js"></script>
 <!--▼ADPCM播放相关-->
 <script type="text/javascript" src="library/jy4340132-aaa/std.js"></script>
 <script type="text/javascript" src="library/jy4340132-aaa/pcm_player.js"></script>
@@ -37,6 +38,7 @@ var formation = new Formation(teamsCount,6);
 		<div>
 			<button class="btn-clear-data" onclick="clearData();"></button>
 			<button class="btn-capture" onclick="capture();"></button>
+			<button class="btn-qrcode"></button>
 			<a class="down-capture display-none" target="_blank"></a>
 			<button class="btn-multi-link" onclick="turnPage(2,arguments[0]);"></button>
 			<button class="btn-triple-link" onclick="turnPage(3,arguments[0]);"></button>
@@ -963,5 +965,12 @@ var formation = new Formation(teamsCount,6);
 			<line />
 		</g>
 	</svg>
+	<div id="qr-code-frame" class="mask display-none">
+		<button class="mask-close brown-button"></button>
+		<div class="mask-content">
+			<button class="read-qr brown-button">读</button>
+			<canvas class="qr-box"></canvas>
+		</div>
+	</div>
 </body>
 </html>

style.css

@@ -3,23 +3,37 @@
 	font-family: 'FOT-KurokaneStd-EB';
 	font-style: normal;
 	/*font-weight: 400;*/
-	src: url("fonts/FOT-KurokaneStd-EB.woff2") format('woff2'),
-		 url("fonts/FOT-KurokaneStd-EB.woff") format('woff'),
-		 url("fonts/FOT-KurokaneStd-EB.ttf") format('truetype'),
-		 url("fonts/FOT-KurokaneStd-EB.eot") format('embedded-opentype'),
-		 url("fonts/FOT-KurokaneStd-EB.svg") format('svg');
+	src:
+		url("fonts/FOT-KurokaneStd-EB.woff2") format('woff2'),
+		url("fonts/FOT-KurokaneStd-EB.woff") format('woff'),
+		url("fonts/FOT-KurokaneStd-EB.ttf") format('truetype'),
+		url("fonts/FOT-KurokaneStd-EB.eot") format('embedded-opentype'),
+		url("fonts/FOT-KurokaneStd-EB.svg") format('svg');
 }
 @font-face {
 	font-family: 'zpix';
 	src:
-	  url("fonts/zpix.woff2") format('woff2'),
-	  url("fonts/zpix.woff") format('woff'),
-	  url("fonts/zpix.ttf") format('truetype'),
-	  url("fonts/zpix.eot?#font-spider") format('embedded-opentype'),
-	  url("fonts/zpix.svg") format('svg');
+		url("fonts/zpix.woff2") format('woff2'),
+		url("fonts/zpix.woff") format('woff'),
+		url("fonts/zpix.ttf") format('truetype'),
+		url("fonts/zpix.eot?#font-spider") format('embedded-opentype'),
+		url("fonts/zpix.svg") format('svg');
 	font-weight: normal;
 	font-style: normal;
-  }
+}
+@font-face {
+	font-family: 'Font Awesome 5 Free';
+	font-style: normal;
+	font-weight: 900;
+	font-display: block;
+	src: url("fonts/fa-solid-900.eot");
+	src:
+		url("fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),
+		url("fonts/fa-solid-900.woff2") format("woff2"),
+		url("fonts/fa-solid-900.woff") format("woff"),
+		url("fonts/fa-solid-900.ttf") format("truetype"),
+		url("fonts/fa-solid-900.svg#fontawesome") format("svg");
+}
 @keyframes loading-animate{
 	from {
 		transform: rotate(0deg);
@@ -2653,7 +2667,7 @@ table .orb-icon
 	content: "⛓️进化链";
 }*/
 
-.mask-evolutionary-tree
+.mask
 {
 	position: absolute;
 	width: 100%;
@@ -2836,7 +2850,10 @@ table .orb-icon
 	-webkit-text-stroke: 3px black;
 	text-stroke: 3px black;
 }
-
+.qr-box
+{
+	display: inline-block;
+}
 /*.base .evo-type::before,
 .base .evo-type::after
 {