feat: 保存

src/pages/section3.vue

@@ -2,7 +2,7 @@
   <div class="section section3" data-anchor="section3">
     <canvas id="canvas"></canvas>
     <div class="can-scroll" style="">
-      <div style="width: 100%; height: 14000px;"></div>
+      <div style="width: 100%; height: 14000px"></div>
       <!-- <div class="wwmap hide active" id="videocont-map">
         <img src="/img/map/map-rnsys.webp" alt="" />
       </div>
@@ -152,6 +152,9 @@ const handler = ({ index: currentIndex, nextIndex }) => {
 onMounted(() => {
   emitter.on("onLeave", handler);
   player.init();
+  player.on("loaded", () => {
+    console.log("所有图片完成");
+  });
   window.player = player;
 });
 onUnmounted(() => {

src/utils/canvasPlayer.js

@@ -20,6 +20,14 @@ export class CanvasPlayer extends Mitt {
     this.currentFrame = 0;
     this.currentType = 0;
     this.frames = [];
+    this.clips = [
+      {
+        id: "clip-3",
+        total: 298,
+        x: 0,
+        animation: null,
+      },
+    ];
     this.canScroll = false;
     this.resize = this.resize.bind(this);
     this.watchScroll = this.watchScroll.bind(this);
@@ -39,30 +47,47 @@ export class CanvasPlayer extends Mitt {
     this.loadEvent();
   }
 
+  loadImage(url) {
+    return new Promise((resolve, reject) => {
+      const img = new Image(this.imageW, this.imageH);
+      img.onload = () => {
+        resolve(img);
+      };
+      img.onerror = (error) => {
+        resolve();
+      };
+      img.src = url;
+    });
+  }
+
   proload() {
     if (this.setting) {
+      const list = [];
       Array.from(this.setting).forEach((item) => {
         console.log("item", item);
         for (let key = 0; key < item.total; key++) {
           const padLength = item.total.toString().length + 1;
           let imgIndex = String(key).padStart(padLength, "0");
-          const image = new Image(this.imageW, this.imageH);
-          image.src = `${item.imageUrl}/${imgIndex}.webp`;
-          const frame = {
-            id: item.sectionType,
-            index: key,
-            image: image,
-            total: item.total,
-          };
-          image.onload = () => {
-            if (isMobile()) {
-            } else {
+          let url = `${item.imageUrl}/${imgIndex}.webp`;
+          const res = this.loadImage(url).then((image) => {
+            if (image) {
+              const frame = {
+                id: item.sectionType,
+                index: key,
+                image: image,
+                total: item.total,
+              };
               this.context.drawImage(image, 0, 0, this.vw, this.vh);
               this.frames.push(frame);
             }
-          };
+          });
+          list.push(res);
         }
       });
+      Promise.all(list).then(() => {
+        console.warn("all load");
+        this.emit("loaded");
+      });
     }
   }
   loadEvent() {
@@ -87,7 +112,7 @@ export class CanvasPlayer extends Mitt {
 
   watchScroll(event) {
     if (this.canScroll) {
-      console.log("TweenLite", TweenLite);
+      // console.log("TweenLite", TweenLite);
       if (event.deltaY > 0) {
         this.currentFrame < 1 ? (this.currentFrame = 1) : this.currentFrame++;
       } else {
@@ -97,7 +122,6 @@ export class CanvasPlayer extends Mitt {
     }
   }
   autoIncrement(na) {
-
     if (this.currentFrame > 0) {
       if (na) {
         this.currentFrame++;
@@ -113,6 +137,30 @@ export class CanvasPlayer extends Mitt {
     // this.currentType = type;
     // this.reDraw(frame, type);
   }
+  initClipAnimate() {
+    Array.from(this.clips).forEach((item) => {
+      const time = "";
+
+      // const anmi = gsap.to(this.clips[0], 1, {
+      //   x: this.clips[0].total - 1,
+      //   repeat: 0,
+      //   duration: (this.clips[0].total / 2) * 1000,
+      //   ease: "none",
+      //   yoyo: true,
+      //   onComplete: () => {
+      //     console.log("done");
+      //   },
+      //   onUpdate: () => {
+      //     const frame = Math.floor(this.clips[0].x);
+      //     console.log("x", frame);
+      //     this.reDraw(frame, this.currentType);
+      //   },
+      // });
+    });
+  }
+  autoPlay() {
+    console.log("this.clips[0]", (this.clips[0].total / 2) * 1000);
+  }
 
   reDraw(frame, type) {
     if (isMobile()) {