getusermedia - зеркальное отображение вместо флип - PullRequest
Новая
       55

getusermedia - зеркальное отображение вместо флип

0 голосов
/ 04 июня 2018

Я использую 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');

Но вместо того, чтобы отразить его, оно переворачивает его вверх ногами.Куда я иду не так?

1 Ответ

0 голосов
/ 04 июня 2018

Аргументами 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>
...