如何使用Javascript tranfrom 3D效果圖片數據？捕獲 CSS 對原始圖像的 rotateX、rotateY、透視效果

Question

我用rotateX、rotateY、perspective來實現翻轉（x軸和y軸）圖片和透視的效果

我怎樣才能對實際圖像執行此操作？

因為我需要保存轉換后的圖像

我需要在原始圖像中剪切紅色蒙版 scope（使用 canvas？還是三部分庫 api？）

而不是僅僅在 css 上應用視覺效果

我研究了一些解決方法，canvas api 似乎無法做到這一點？ three.js 似乎是更簡單的方法，但我不知道從哪里開始

我的示例代碼

視頻演示： https://imgur.com/SegKmTL

抱歉我的英語不好

  <style>
    .container {
      perspective: 300px;
      background-color: green;
      width: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 100px auto;
    }
    .mask {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 2px solid red;
      z-index: 100;
    }
    .image {
      border: 1px solid blue;
    }
  </style>
  <body>
    <input
      id="roateXSlider"
      type="range"
      min="0"
      max="50"
      step="1"
      value="25"
    />
    RotateX
    <input
      id="roateYSlider"
      type="range"
      min="0"
      max="50"
      step="1"
      value="25"
    />
    RoateY
    <div class="container">
      <!-- mask is cut image scope in origin image  -->
      <div class="mask"></div>
      <img
        id="source"
        class="image"
        src="https://i.imgur.com/3Qnbg4J.jpeg"
        style="width: 100%;"
      />
    </div>
  </body>ource"
        class="image"
        src="https://i.imgur.com/3Qnbg4J.jpeg"
        style="width: 100%;"
      />
    </div>
  </body>

const source = document.getElementById("source");

const roateXSlider = document.getElementById("roateXSlider");
const roateYSlider = document.getElementById("roateYSlider");

const image3dInfo = {
  keystoneH: 0,
  keystoneV: 0,
  rotateX: 0,
  rotateY: 0,
};

// Rotate X or Y range => 335deg <= 360(0)deg => 25deg
// on X axis (origin top or bottom)
// on Y axis (origin left or right)
// Image element lement perspective => 300px

roateXSlider.oninput = function () {
  let value = parseInt(this.value, 10);
  if (value <= 25) {
    image3dInfo.keystoneV = 0;
    image3dInfo.rotateX = 25 - value;
  } else {
    image3dInfo.keystoneV = 100;
    image3dInfo.rotateX = 360 - value + 25;
  }
  update3dTransform();
};

roateYSlider.oninput = function () {
  let value = parseInt(this.value, 10);
  if (value <= 25) {
    image3dInfo.keystoneH = 100;
    image3dInfo.rotateY = 25 - value;
  } else {
    image3dInfo.keystoneH = 0;
    image3dInfo.rotateY = 360 - value + 25;
  }
  update3dTransform();
};

function update3dTransform() {
  source.style.transformOrigin = `${image3dInfo.keystoneH}% ${image3dInfo.keystoneV}% 0px`;
  source.style.transform =` rotateX(${image3dInfo.rotateX}deg) rotateY(${image3dInfo.rotateY}deg)`;
  
  captureImage();
}

function captureImage() {
  // capture red mask scope on origin image draw to canvas
}

Answer 1

這是一個如何使用THREE.js在 canvas 中執行轉換的示例，它具有可以檢索最后渲染幀的toDataURL方法。 在下面的示例中，這會在按下下載按鈕時寫入控制台。

您需要調整轉換以正確匹配您的原始轉換，但這應該足以讓您入門，請在此處查看Object3D文檔以了解轉換屬性。

 const source = document.getElementById("source"); const roateXSlider = document.getElementById("roateXSlider"); const roateYSlider = document.getElementById("roateYSlider"); document.getElementById("dl").addEventListener("click", captureImage); const image3dInfo = { keystoneH: 0, keystoneV: 0, rotateX: 0, rotateY: 0, }; // Rotate X or Y range => 335deg <= 360(0)deg => 25deg // on X axis (origin top or bottom) // on Y axis (origin left or right) // Image element lement perspective => 300px roateXSlider.oninput = function () { let value = parseInt(this.value, 10); if (value <= 25) { image3dInfo.keystoneV = 0; image3dInfo.rotateX = 25 - value; } else { image3dInfo.keystoneV = 100; image3dInfo.rotateX = 360 - value + 25; } update3dTransform(); }; roateYSlider.oninput = function () { let value = parseInt(this.value, 10); if (value <= 25) { image3dInfo.keystoneH = 100; image3dInfo.rotateY = 25 - value; } else { image3dInfo.keystoneH = 0; image3dInfo.rotateY = 360 - value + 25; } update3dTransform(); }; let cvs; function setupGl() { const wid = 300; const hgt = 230; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, 1.0, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true }); renderer.setSize(wid, hgt); document.body.appendChild(renderer.domElement); (cvs = renderer.domElement).className = "container"; const plane = new THREE.Mesh( new THREE.PlaneGeometry(8, 8), new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, map: new THREE.TextureLoader().load("https://i.imgur.com/3Qnbg4J.jpeg") })); scene.add(plane); camera.position.z = 5; const drawFrame = () => { plane.rotation.x = THREE.Math.degToRad(-image3dInfo.rotateX); plane.rotation.y = THREE.Math.degToRad(image3dInfo.rotateY); renderer.render(scene, camera); requestAnimationFrame(drawFrame); }; drawFrame(); } setupGl(); function update3dTransform() { source.style.transformOrigin = `${image3dInfo.keystoneH}% ${image3dInfo.keystoneV}% 0px`; source.style.transform =` rotateX(${image3dInfo.rotateX}deg) rotateY(${image3dInfo.rotateY}deg)`; } function captureImage() { let capture = cvs.toDataURL("image/jpeg"); console.log("Frame data:", capture); }

 .container { perspective: 300px; background-color: green; width: 300px; display: flex; align-items: center; justify-content: center; margin: 25px auto; overflow: hidden; }.mask { position: absolute; width: 100%; height: 100%; border: 2px solid red; z-index: 100; }.image { border: 1px solid blue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <input id="roateXSlider" type="range" min="0" max="50" step="1" value="25" /> RotateX <input id="roateYSlider" type="range" min="0" max="50" step="1" value="25" /> RoateY <button id="dl">Download</button> <div class="container"> <:-- mask is cut image scope in origin image --> <div class="mask"></div> <img id="source" class="image" src="https.//i.imgur.com/3Qnbg4J:jpeg" style="width; 100%;" /> </div>

如何使用Javascript tranfrom 3D效果圖片數據？捕獲 CSS 對原始圖像的 rotateX、rotateY、透視效果

問題描述

1 個解決方案

解決方案1
0 2022-03-04 18:58:34

如何使用Javascript tranfrom 3D效果圖片數據？ 捕獲 CSS 對原始圖像的 rotateX、rotateY、透視效果

問題描述

1 個解決方案

解決方案1 0 2022-03-04 18:58:34

如何使用Javascript tranfrom 3D效果圖片數據？捕獲 CSS 對原始圖像的 rotateX、rotateY、透視效果

解決方案1
0 2022-03-04 18:58:34