Question

功能用户站在相机前面拍照。

已完成的工作：

利用a来捕捉动态影像并创建了一个＆＃34; Take Picture＆＃34;按钮捕获图像以施加静止图像。还包含了缩放功能。

问题：

最初，图像在功能上很好。因此，当用户向左移动时，相机馈送中的图像也将向左移动，反之亦然。但是，当用户点击放大按钮时，相机输入中的图像将翻转，这意味着，当用户向左移动时，相机输入中的图像将向右移动。

因此，做错了什么？以及如何确保当用户缩放或缩小时，图像不会翻转？感谢和GT;

＆＃13;

var zoom = 1;
v = document.getElementsByTagName('video')[0];
v.style.left = 0;
v.style.top = 0;
/* Array of possible browser specific settings for transformation */
var properties = ['transform', 'WebkitTransform', 'MozTransform',
    'msTransform', 'OTransform'
  ],
  prop = properties[0];

function plus() {
  zoom = zoom + 0.1;
  v.style[prop] = 'scale(' + zoom + ')';
}

function minus() {
  zoom = zoom - 0.1;
  v.style[prop] = 'scale(' + zoom + ')';
}

＆＃13;

.camera_feed_flip {
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  /* Safari and Chrome */
  -moz-transform: rotateY(0deg);
  /* Firefox */
  transform: scale(1.0);
}

＆＃13;

<div id="CameraFeed" align="center" style="position:absolute; widths:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=7; top:600px; left:0px; ">


  <video id="video" width="1300px" height="1350" style="position:absolute; z-index:16; top: 600px; left:-110px; transform: rotateY(180deg); transform: scale(1.0); -webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);" autoplay></video>
</div>


<div id="Active_Camera" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=6; top:0px; left:0px; ">


  <table cellspacing="0" cellpadding="0" width="1080" id="photo_stream">
    <tr>
      <td width="1080">
        <button id="CameraActiveButton" onclick="TakePicture()">
          <img style="width: 250px; height:250px" src="lib/Take.png">
        </button>
        <button id="ZoomInButton" onclick="plus()">
          <img style="width: 260px; height:260px" src="lib/plus.png">
        </button>
        <button id="ZoomOutButton" onclick="minus()">
          <img style="width: 260px; height:260px" src="lib/minus.png">
        </button>


      </td>
    </tr>
  </table>

</div>

＆＃13;

当视频放大时，<video>图像翻转

0 个答案: