feat: 保存

src/pages/section3.vue

@@ -2,11 +2,7 @@
   <div class="section section3" data-anchor="section3">
     <canvas id="canvas"></canvas>
 
-    <div
-      class="can-scroll"
-      style=""
-      @scroll.stop="onPlayerScroll($event, 3)"
-    >
+    <div class="can-scroll" style="" @scroll.stop="onPlayerScroll($event, 3)">
       <div style="width: 100%; height: 14000px" class="scroll-bar-3"></div>
       <!-- <div class="wwmap hide active" id="videocont-map">
         <img src="/img/map/map-rnsys.webp" alt="" />
@@ -161,6 +157,10 @@ onMounted(() => {
   player.on("loaded", () => {
     console.log("所有图片完成");
   });
+  player.on("updatePress", (p) => {
+    console.log("updatePress", p);
+    emitter.emit("updatePress", p);
+  });
   window.player = player;
 });
 onUnmounted(() => {

src/utils/canvasPlayer.js

@@ -58,8 +58,14 @@ export class CanvasPlayer extends Mitt {
   proload() {
     if (this.setting) {
       const list = [];
-      Array.from(this.setting).forEach((item) => {
-        console.log("item", item);
+      const total = Array.from(this.setting).reduce(
+        (pre, current) => pre + current["total"],
+        0
+      );
+      console.log("total", total);
+      Array.from(this.setting).forEach((item, framekey) => {
+        console.log("item", item, framekey);
+        const base = [];
         const clip = {
           id: item.sectionType,
           total: item.total,
@@ -81,6 +87,9 @@ export class CanvasPlayer extends Mitt {
               };
               this.context.drawImage(image, 0, 0, this.vw, this.vh);
               this.frames.push(frame);
+              const cu = key + framekey * item.total;
+              const process = Math.floor(Number(cu / total) * 100);
+              this.emit("updatePress", process);
             }
           });
           list.push(res);
@@ -88,6 +97,7 @@ export class CanvasPlayer extends Mitt {
       });
       Promise.all(list).then(() => {
         console.warn("all load");
+        this.emit("updatePress", 100);
         this.emit("loaded");
       });
     }
@@ -119,7 +129,6 @@ export class CanvasPlayer extends Mitt {
     this.enableScroll(type);
     deltaY = scrollY - lastKnownScrollPosition;
 
-    
     // this.watchScroll(event);
   }
   watchScroll(event) {