如何使用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