html - getusermedia - 镜像而不是翻转

Question

我正在使用 getusermedia 从视频流中抓取图像并像这样镜像它...

canvas.width = video.videoWidth;
canvas.height = video.videoHeight;

var ctx = canvas.getContext('2d');
ctx.setTransform(1,0,0,-1,0,canvas.height)

ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

dataUrl = canvas.toDataURL('image/jpeg');

但它不是镜像它，而是颠倒过来。我哪里错了？

Answer 1

CanvasContext2d.setTransform 的参数是

setTransform(scaleX, skewX, skewY, scaleY, translateX, translateY)

您正在将 scaleY 设置为 -1 并在 Y 轴上按高度进行平移。所以确实，你垂直翻转了。

要水平翻转，你会这样做

ctx.setTransform(-1,0,0,1,canvas.width,0);

const vid = document.createElement('video');
const ctx = canvas.getContext('2d');
// gUM has problems with StackSnippet's overprotected iframes
// so we'll use a normal video instead
vid.src = 'https://upload.wikimedia.org/wikipedia/commons/transcoded/a/a4/BBH_gravitational_lensing_of_gw150914.webm/BBH_gravitational_lensing_of_gw150914.webm.480p.webm';
vid.play()
  .then(() => {
    canvas.width = vid.videoWidth;
    canvas.height = vid.videoHeight;
    drawloop();
  });

function drawloop() {
  if (inp.checked) {
    ctx.setTransform(-1, 0, 0, 1, canvas.width, 0);
  } else {
    ctx.setTransform(1, 0, 0, 1, 0, 0);
  }
  ctx.drawImage(vid, 0, 0);
  requestAnimationFrame(drawloop);
}

canvas {
  width: 100%;
}

<label>flip horizontally<input type="checkbox" id="inp"></label><br>
<canvas id="canvas"></canvas>