DrawImage в холсте из видеофрагмента изменяет оттенок

Я написал простой script, которые берут кадр из видео и рисуют его на холст. Моя проблема заключается в том, что цвета изменяются между видео и рисунком.

Я поставил здесь результат рядом с оригиналом, чтобы было легче видеть. Исходный слева. Кажется, что это более заметно в браузере Chrome. Все те тесты, которые я сделал в OSX.

Здесь фрагмент, холст слева, видео справа:

 // Get our mask image
var canvas = document.querySelector(".canvas");
var video = document.querySelector(".video");

var ctx = canvas.getContext('2d');
function drawMaskedVideo() {
  ctx.drawImage(video, 0, 0, video.videoWidth/2, video.videoHeight, 0,0, video.videoWidth/2,  video.videoHeight);
}

requestAnimationFrame(function loop() {
  drawMaskedVideo();
  requestAnimationFrame(loop.bind(this));
});
html, body {
  margin: 0 auto;
}
.video, .canvas {
  width: 100%;
}

.canvas {
  position: absolute;
  top: 0;
  left: 0;
}
<video class="video" autoplay="autoplay" muted="muted" preload="auto" loop="loop">
    <source src="http://mazwai.com/system/posts/videos/000/000/214/original/finn-karstens_winter-wonderland-kiel.mp4" type="video/mp4">
</video>
<canvas class='canvas' width='1280' height='720'></canvas>

Ответы

Ответ 1

Решение может быть таким же простым, как установка css filter для видеоэлемента:

.video {
    -webkit-filter: contrast(100%);
}

Я не могу рассуждать об этом, так как был обнаружен несчастный случай (играя с вашими демонстрационными примерами и ответами на чтение), поэтому я оставляю техническое объяснение кому-то еще и оставляю вас с некоторой магией на данный момент.

Любая достаточно развитая технология неотличима от магии.

- Артур Кларк

 // Get our mask image
var canvas = document.querySelector(".canvas");
var video = document.querySelector(".video");

var ctx = canvas.getContext('2d');
function drawMaskedVideo() {
  ctx.drawImage(video, 0, 0, video.videoWidth/2, video.videoHeight, 0,0, video.videoWidth/2,  video.videoHeight);
}

requestAnimationFrame(function loop() {
  drawMaskedVideo();
  requestAnimationFrame(loop.bind(this));
});
html, body {
  margin: 0 auto;
}
.video, .canvas {
  width: 100%;
}
.video {
  -webkit-filter: contrast(100%);
}

.canvas {
  position: absolute;
  top: 0;
  left: 0;
}
<video class="video" autoplay="autoplay" muted="muted" preload="auto" loop="loop">
    <source src="http://mazwai.com/system/posts/videos/000/000/214/original/finn-karstens_winter-wonderland-kiel.mp4" type="video/mp4">
</video>
<canvas class='canvas' width='1280' height='720'></canvas>