画布中的drawImage来自视频帧,改变了色调

Question

我写了一个简单的脚本,从视频中取出一个帧并将其绘制到画布上.我的问题是视频和绘制图像之间的颜色正在变化.

我把结果放在原件旁边,以便更容易看到.原来的是在左边.它似乎在Chrome浏览器btw上更加明显.我在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>

我想知道为什么会发生这种情况,如果有可能以跨浏览器的方式摆脱它？

这里写的简单脚本:

let video = document.querySelector('#my-video') // .mp4 file used
let w = video.videoWidth;
let h = video.videoHeight;
let canvas = document.createElement('canvas');
    canvas.width  = w;
    canvas.height = h;
let ctx = canvas.getContext('2d');

ctx.drawImage(video, 0, 0, w, h)

document.querySelector('.canvas-container').appendChild(canvas);

Answer 1

filter解决方案可能就像为视频元素设置 css 一样简单：

\n\n

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

\n\n

我无法对此进行推理，因为它是意外发现的（玩你的演示并阅读相关答案），所以我将技术解释留给其他人，并暂时留给你一些魔法。

\n\n

\n

任何足够先进的技术都与魔法没有什么区别。

\n

\n\n

\xe2\x80\x94 阿瑟·克拉克

\n\n

\r\n

\r\n

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

\r\n

 // Get our mask image\r\nvar canvas = document.querySelector(".canvas");\r\nvar video = document.querySelector(".video");\r\n\r\nvar ctx = canvas.getContext(\'2d\');\r\nfunction drawMaskedVideo() {\r\n  ctx.drawImage(video, 0, 0, video.videoWidth/2, video.videoHeight, 0,0, video.videoWidth/2,  video.videoHeight);\r\n}\r\n\r\nrequestAnimationFrame(function loop() {\r\n  drawMaskedVideo();\r\n  requestAnimationFrame(loop.bind(this));\r\n});

\r\n

html, body {\r\n  margin: 0 auto;\r\n}\r\n.video, .canvas {\r\n  width: 100%;\r\n}\r\n.video {\r\n  -webkit-filter: contrast(100%);\r\n}\r\n\r\n.canvas {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n}

\r\n

\r\n

\r\n

\n\n

\n\n

注意： \n在 Macbook Pro（2.3 GHz Intel Core i5）上运行此程序时，我看不出性能方面有任何差异。在视频播放期间跟踪 CPU，两个演示的空闲率都在 28% 左右。

\n