新增"人生回放"按钮保存图片功能，目前支持微信浏览器和普通浏览器

package.json

@@ -13,6 +13,7 @@
         "@babel/preset-env": "^7.15.4",
         "babel-loader": "^8.2.2",
         "core-js": "^3.17.2",
+        "dom-to-image": "^2.6.0",
         "webpack": "^5.51.2",
         "webpack-dev-server": "^4.1.0",
         "xlsx": "^0.17.0"

src/app.js

@@ -1,7 +1,7 @@
 import { max, sum } from './functions/util.js';
 import { summary } from './functions/summary.js'
 import Life from './life.js'
-
+import domtoimage from 'dom-to-image';
 class App{
     constructor(){
         this.#life = new Life();
@@ -285,7 +285,11 @@ class App{
         <div id="main">
             <ul id="lifeProperty" class="lifeProperty"></ul>
             <ul id="lifeTrajectory" class="lifeTrajectory"></ul>
-            <button id="summary" class="mainbtn" style="top:auto; bottom:0.1rem">人生总结</button>
+            <button id="summary" class="mainbtn" style="top:auto; bottom:0.1rem; left: 25%;">人生总结</button>
+            <button id="domToImage" class="mainbtn" style="top:auto; bottom:0.1rem; left: 75%; display: none">人生回放</button>
+            <div class="domToImage2wx">
+                <img src="" id="endImage" />
+            </div>
         </div>
         `);
 
@@ -295,7 +299,6 @@ class App{
                 if(this.#isEnd) return;
                 const trajectory = this.#life.next();
                 const { age, content, isEnd } = trajectory;
-
                 const li = $(`<li><span>${age}岁：</span>${
                     content.map(
                         ({type, description, grade, name, postEvent}) => {
@@ -314,6 +317,7 @@ class App{
                     $(document).unbind("keydown");
                     this.#isEnd = true;
                     trajectoryPage.find('#summary').show();
+                    trajectoryPage.find('#domToImage').show();
                 } else {
                     // 如未死亡，更新数值
                     // Update properties if not die yet
@@ -326,7 +330,26 @@ class App{
                     <li>快乐：${property.SPR} </li>`);
                 }
             });
+        // html2canvas
+        trajectoryPage
+            .find('#domToImage')
+            .click(()=>{
+                $("#lifeTrajectory").addClass("deleteFixed");
+                const ua = navigator.userAgent.toLowerCase();
+                domtoimage.toJpeg(document.getElementById('lifeTrajectory'))
+                    .then(function (dataUrl) {
+                        let link = document.createElement('a');
+                        link.download = '我的人生回放.jpeg';
+                        link.href = dataUrl;
+                        link.click();
+                        $("#lifeTrajectory").removeClass("deleteFixed");
+                        // 微信内置浏览器，显示图片，需要用户单独保存
+                        if(ua.match(/MicroMessenger/i)=="micromessenger") {
+                            $('#endImage').attr('src', dataUrl);
+                        }
                         
+                    });
+            })
         trajectoryPage
             .find('#summary')
             .click(()=>{
@@ -370,6 +393,7 @@ class App{
                 page: loadingPage,
                 clear: ()=>{},
             },
+
             index: {
                 page: indexPage,
                 btnRank: indexPage.find('#rank'),

view/dark.css

@@ -570,3 +570,40 @@ i {
 ::-webkit-scrollbar {
     width: 0 !important
 }
+
+.deleteFixed {
+  position: relative;
+  transform: translateX(0);
+  left: 0;
+  top: 0;
+  text-align: left;
+}
+
+.operateBtn {
+  padding: 0.5rem 1.5rem;
+  border: 1px #EEEEEE solid;
+  border-radius: 0.2rem;
+  background-color:#393E46;
+  font-size: 1.6rem;
+  white-space: nowrap;
+  transform: translate(-50%,-50%);
+  cursor: pointer;
+  z-index:2;
+  color: #EEEEEE;
+}
+
+.operateBtn:hover {
+  background: #ff7878;
+  color: #fff;
+  transition: all .4s ease 0s;
+}
+
+.domToImage2wx {
+  position: fixed;
+  z-index: 1111;
+  width: 100%;
+}
+
+.domToImage2wx img {
+  width: 100%;
+}

view/light.css

@@ -563,3 +563,40 @@ i {
 ::-webkit-scrollbar {
 	width: 0 !important
 }
+
+.deleteFixed {
+  position: relative;
+  transform: translateX(0);
+  left: 0;
+  top: 0;
+  text-align: left;
+}
+
+.operateBtn {
+  padding: 0.5rem 1.5rem;
+  border: 1px #EEEEEE solid;
+  border-radius: 0.2rem;
+  background-color:#393E46;
+  font-size: 1.6rem;
+  white-space: nowrap;
+  transform: translate(-50%,-50%);
+  cursor: pointer;
+  z-index:2;
+  color: #EEEEEE;
+}
+
+.operateBtn:hover {
+  background: #ff7878;
+  color: #fff;
+  transition: all .4s ease 0s;
+}
+
+.domToImage2wx {
+  position: fixed;
+  z-index: 1111;
+  width: 100%;
+}
+
+.domToImage2wx img {
+  width: 100%;
+}

yarn.lock

@@ -1633,6 +1633,11 @@ dns-txt@^2.0.2:
   dependencies:
     buffer-indexof "^1.0.0"
 
+dom-to-image@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/dom-to-image/-/dom-to-image-2.6.0.tgz#8a503608088c87b1c22f9034ae032e1898955867"
+  integrity sha1-ilA2CAiMh7HCL5A0rgMuGJiVWGc=
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"