换脸

weilun0510 · Aug 1, 2024 · 0487257 · 0487257
1 parent 648858c
commit 0487257
Show file tree

Hide file tree

Showing 10 changed files with 322 additions and 77 deletions.
diff --git a/assets/images/face1_part1.png b/assets/images/face1_part1.png
diff --git a/assets/images/face1_part2.png b/assets/images/face1_part2.png
diff --git a/assets/images/face1_part3.png b/assets/images/face1_part3.png
diff --git a/assets/images/face1_part4.png b/assets/images/face1_part4.png
diff --git a/assets/images/face2_part1.png b/assets/images/face2_part1.png
diff --git a/assets/images/face2_part2.png b/assets/images/face2_part2.png
diff --git a/assets/images/face2_part3.png b/assets/images/face2_part3.png
diff --git a/assets/images/face2_part4.png b/assets/images/face2_part4.png
diff --git a/test/12.html b/test/12.html
@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>换脸效果</title>
+    <style>
+      body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 100vh;
+        background-color: #e2e8f0;
+        margin: 0;
+      }
+
+      .wrapper_w {
+        /* width: 800px; */
+        width: 1096px;
+        background-color: pink;
+      }
+
+      .wrapper_h {
+        position: relative;
+      }
+
+      .facepart {
+        position: absolute;
+        width: 100%;
+        overflow: hidden;
+      }
+
+      .pos_rel {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+
+      .facepart img {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: transform 0.5s ease-in-out;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="wrapper_w">
+      <div class="wrapper_h">
+        <div class="facepart" data-part="1">
+          <div class="pos_rel">
+            <img src="https://placehold.co/1096x301?text=Image+1" alt="face1" data-width="1096" data-height="301" />
+          </div>
+        </div>
+        <div class="facepart" data-part="2">
+          <div class="pos_rel">
+            <img src="https://placehold.co/1096x180?text=Image+2" alt="face2" data-width="1096" data-height="180" />
+          </div>
+        </div>
+        <div class="facepart" data-part="3">
+          <div class="pos_rel">
+            <img src="https://placehold.co/1096x180?text=Image+3" alt="face3" data-width="1096" data-height="180" />
+          </div>
+        </div>
+        <div class="facepart" data-part="4" id="faces_c">
+          <div class="pos_rel">
+            <img src="https://placehold.co/1096x216?text=Image+4" alt="face4" data-width="1096" data-height="216" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      const images = [
+        [
+          'https://placehold.co/1096x301?text=Image+1-1',
+          'https://placehold.co/1096x301?text=Image+1-2',
+          'https://placehold.co/1096x301?text=Image+1-3',
+        ],
+        [
+          'https://placehold.co/1096x180?text=Image+2-1',
+          'https://placehold.co/1096x180?text=Image+2-2',
+          'https://placehold.co/1096x180?text=Image+2-3',
+        ],
+        [
+          'https://placehold.co/1096x180?text=Image+3-1',
+          'https://placehold.co/1096x180?text=Image+3-2',
+          'https://placehold.co/1096x180?text=Image+3-3',
+        ],
+        [
+          'https://placehold.co/1096x216?text=Image+4-1',
+          'https://placehold.co/1096x216?text=Image+4-2',
+          'https://placehold.co/1096x216?text=Image+4-3',
+        ],
+      ];
+
+      const imageIndices = [0, 0, 0, 0];
+      let autoSwitch = true;
+
+      function createImages(partIndex) {
+        const part = document.querySelector(`.facepart[data-part="${partIndex + 1}"] .pos_rel`);
+        const baseImage = document.querySelector(`.facepart[data-part="${partIndex + 1}"] img`);
+        const width = baseImage.dataset.width;
+        const height = baseImage.dataset.height;
+        part.parentElement.style.paddingBottom = `${(height / width) * 100}%`;
+        part.parentElement.style.height = `${height}px`;
+
+        images[partIndex].forEach((src, index) => {
+          if (index > 0) {
+            const img = document.createElement('img');
+            img.src = src;
+            img.style.top = '100%';
+            img.style.width = width;
+            img.style.height = height;
+            // img.dataset.width = width;
+            // img.dataset.height = height;
+            part.appendChild(img);
+          }
+        });
+      }
+
+      function changeImage(element, index) {
+        if (!autoSwitch) {
+          const imgs = element.querySelectorAll('img');
+          imageIndices[index] = (imageIndices[index] + 1) % images[index].length;
+          const nextImage = images[index][imageIndices[index]];
+
+          const newImg = document.createElement('img');
+          newImg.src = nextImage;
+          newImg.style.top = '100%';
+          newImg.dataset.width = imgs[0].dataset.width;
+          newImg.dataset.height = imgs[0].dataset.height;
+          element.querySelector('.pos_rel').appendChild(newImg);
+          setTimeout(() => {
+            newImg.style.transform = 'translateY(-100%)';
+            setTimeout(() => {
+              element.querySelector('.pos_rel').removeChild(imgs[0]);
+              imgs[0].style.transform = '';
+            }, 500);
+          }, 10);
+        }
+      }
+
+      function autoChangeImage(index) {
+        if (index < 0) {
+          autoSwitch = false;
+          return;
+        }
+        const imgs = document.querySelectorAll(`.facepart[data-part="${index + 1}"] img`);
+        imageIndices[index] = (imageIndices[index] + 1) % images[index].length;
+        const nextImage = images[index][imageIndices[index]];
+        const newImg = document.createElement('img');
+        newImg.src = nextImage;
+        newImg.style.top = '100%';
+        newImg.dataset.width = imgs[0].dataset.width;
+        newImg.dataset.height = imgs[0].dataset.height;
+        document.querySelector(`.facepart[data-part="${index + 1}"] .pos_rel`).appendChild(newImg);
+        setTimeout(() => {
+          newImg.style.transform = 'translateY(-100%)';
+          setTimeout(() => {
+            imgs[0].parentElement.removeChild(imgs[0]);
+            autoChangeImage(index - 1);
+          }, 500);
+        }, 10);
+      }
+
+      document.querySelectorAll('.facepart').forEach((part, index) => {
+        createImages(index);
+        part.addEventListener('click', () => changeImage(part, index));
+      });
+
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setTimeout(() => autoChangeImage(3), 1000);
+            observer.unobserve(entry.target);
+          }
+        });
+      });
+
+      observer.observe(document.getElementById('faces_c'));
+    </script>
+  </body>
+</html>