feat: save

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite --host 0.0.0.0",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview --host 0.0.0.0"
   },
   "dependencies": {
     "@vueuse/core": "^10.7.2",

src/assets/style/index.scss

@@ -700,7 +700,7 @@ body {
   top: 0;
   width: 100vw;
   height: 100vh;
-  background: url(/img/canvas/hua-1/0000.webp) no-repeat center/cover;
+  background: url(/img/canvas/hua-2/0000.webp) no-repeat center/cover;
   // background: url(/img/webp/ewm-bg.webp) no-repeat center/cover;
   z-index: 999;
   display: -webkit-box;

src/pages/section1.vue

@@ -120,7 +120,7 @@ const onPlayerScroll = (event, type) => {
   line-height: 2;
   color: #997946;
   justify-content: center;
-  background: url(/img/canvas/hua-1/0000.webp) no-repeat center/cover;
+  background: url(/img/canvas/hua-2/0000.webp) no-repeat center/cover;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-box-align: center;

src/utils/canvasPlayer.js

@@ -1,5 +1,5 @@
 import { isMobile } from "./isMoblie";
-import { throttle, debounce, clamp, aspectFit } from "./fn";
+import { throttle, debounce, clamp, cover, contain } from "./fn";
 import gsap from "gsap";
 import mitt from "mitt";
 class Mitt {
@@ -57,8 +57,10 @@ export class CanvasPlayer extends Mitt {
     });
     this.vw = this.canvas.width = window.innerWidth;
     this.vh = this.canvas.height = window.innerHeight;
-    this.imageW = isMobile() ? 1170 : 1920;
-    this.imageH = isMobile() ? 2532 : 1080;
+    // this.imageW = isMobile() ? 1170 : 1920;
+    // this.imageH = isMobile() ? 2532 : 1080;
+    this.imageW = isMobile() ? 750 : 1920;
+    this.imageH = isMobile() ? 1623 : 1080;
     this.loadEvent();
   }
   loadImage(url) {
@@ -442,11 +444,11 @@ export class CanvasPlayer extends Mitt {
     if (frameItem && frameItem.index <= frameItem.total) {
       this.context.clearRect(0, 0, this.vw, this.vh);
       if (isMobile()) {
-        var hRatio = this.vw / this.imageW;
-        var vRatio = this.vh / this.imageH;
-        var ratio = Math.min(hRatio, vRatio);
-        var centerShift_x = (this.vw - this.imageW * ratio) / 2;
-        var centerShift_y = (this.vh - this.imageH * ratio) / 2;
+        // var hRatio = this.vw / this.imageW;
+        // var vRatio = this.vh / this.imageH;
+        // var ratio = Math.min(hRatio, vRatio);
+        // var centerShift_x = (this.vw - this.imageW * ratio) / 2;
+        // var centerShift_y = (this.vh - this.imageH * ratio) / 2;
         // this.context.drawImage(
         //   frameItem.image,
         //   0,
@@ -458,11 +460,26 @@ export class CanvasPlayer extends Mitt {
         //   this.imageW * ratio,
         //   this.imageH * ratio
         // );
-        var ratio =
-          frameItem.image.naturalWidth / frameItem.image.naturalHeight;
-        var width = this.vw;
-        var height = width / ratio;
-        this.context.drawImage(frameItem.image, 0, 0, width, height);
+
+        // var ratio =
+        //   frameItem.image.naturalWidth / frameItem.image.naturalHeight;
+        // var width = this.vw;
+        // var height = width / ratio;
+
+        const { offsetX, offsetY, width, height } = cover(
+          this.vw,
+          this.vh,
+          this.imageW,
+          this.imageH
+        );
+
+        this.context.drawImage(
+          frameItem.image,
+          offsetX,
+          offsetY,
+          width,
+          height
+        );
       } else {
         this.context.drawImage(frameItem.image, 0, 0, this.vw, this.vh);
       }

src/utils/fn.js

@@ -81,3 +81,36 @@ export const aspectFit = (
   dy = (canvasHeight - dh) / 2;
   return [dx, dy, dw, dh];
 };
+
+function fit(contains) {
+  return (
+    parentWidth,
+    parentHeight,
+    childWidth,
+    childHeight,
+    scale = 1,
+    offsetX = 0.5,
+    offsetY = 0.5
+  ) => {
+    const childRatio = childWidth / childHeight;
+    const parentRatio = parentWidth / parentHeight;
+    let width = parentWidth * scale;
+    let height = parentHeight * scale;
+
+    if (contains ? childRatio > parentRatio : childRatio < parentRatio) {
+      height = width / childRatio;
+    } else {
+      width = height * childRatio;
+    }
+
+    return {
+      width,
+      height,
+      offsetX: (parentWidth - width) * offsetX,
+      offsetY: (parentHeight - height) * offsetY,
+    };
+  };
+}
+
+export const contain = fit(true);
+export const cover = fit(false);

src/view/index.vue

@@ -82,7 +82,7 @@ const setting = [
     name: "人鸟兽",
     sectionType: 1,
     canvasId: "canvas-section-1",
-    imageUrl: isMobile() ? "./img/canvas/hua-1" : "./img/canvas/hua-1",
+    imageUrl: isMobile() ? "./img/canvas/hua-2" : "./img/canvas/hua-2",
     // total: isMobile() ? 900 : 300,
     total: isMobile() ? 403 : 403,
   },