小编All*_*uin的帖子
画布中的drawImage来自视频帧,改变了色调
我写了一个简单的脚本,从视频中取出一个帧并将其绘制到画布上.我的问题是视频和绘制图像之间的颜色正在变化.
我把结果放在原件旁边,以便更容易看到.原来的是在左边.它似乎在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') …10
推荐指数
推荐指数
1
解决办法
解决办法
696
查看次数
查看次数
在 Vue 中使用 v-for 处理 v-if 的正确方法
在这个例子中我们应该如何处理 av-for与 a的组合v-if：
这是我的data.json：
[
{
image: 'foo.jpg'
},
{
image: 'foobar.jpg',
video: 'bar.mp4'
},
{
image: 'barfoo.jpg'
}
]
在我的 vue 模板中，我想呈现如下内容：
<div v-for="(item, key, index) in data" : key="index">
<img :src="item.image">
<video v-if="!!item.video" :src="item.video"></video>
</div >
但作为文档说，我们应该避免v-if使用v-for，而使用一个计算值。但是即使 json 条目没有视频，我也需要渲染图像。
这没什么大不了的，我已经找到了解决方案，但我想知道处理这个问题的最佳方法。
3
推荐指数
推荐指数
1
解决办法
解决办法
4116
查看次数
查看次数