将视频进行黑白影像转换

最新推荐文章于 2020-03-09 09:59:51 发布

原创最新推荐文章于 2020-03-09 09:59:51 发布 · 913 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

html5 专栏收录该内容

120 篇文章

订阅专栏

这个示例展示了如何在Opera和Safari浏览器中，通过JavaScript获取视频帧，并利用HTML5 Canvas进行实时的黑白影像转换。通过监听页面加载事件，获取视频对象和画布元素，设置定时器每秒30帧抽取视频图像，应用灰度转换函数，然后将处理后的图像数据重新绘制到画布上，实现视频的黑白效果。

将视频进行黑白影像转换

仅限于opera浏览器，和Safari

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>视频的黑白变换</title>

<style>

#myvideo{

width: 400px;

height: 300px;

}

</style>

<script>

window.addEventListener("load",function(){

//获得视频对象

var myvideo=document.getElementByIdx_x("myvideo");

//获得画布对象

var mycanvas=document.getElementByIdx_x("mycanvas");

var fps=1000/30;

//获取画布的宽度和高度

var w=mycanvas.width;

var h=mycanvas.height;

setInterval(function(){

var ctx=mycanvas.getContext("2d");

ctx.drawImage(myvideo,0,0,w,h);

//获取我们的此时的视频图像

var imageData=ctx.getImageData(0,0,w,h);

//下边是我们的灰色变换的函数

convertToGray(imageData.data);

//重新输出到画布上

ctx.putImageData(imageData,0,0);

},fps);

},true);

//我们的灰色变换的函数

function convertToGray(data){

var len=data.length;

var pixels=len/4;

for(var i=0;i<pixels;i++){

var r=data[i*4];

var g=data[i*4+1];

var b=data[i*4+2];

var gray=parseInt((11*r+16*g+5*b)/32);

data[i*4]=gray;

data[i*4+1]=gray;

data[i*4+2]=gray;

}

}

</script>

</head>

<body>

<video id="myvideo" controls>

<source src="video/first.mp4">

<source src="video/first.ogv">

<p>请选择支持html5 video标签的浏览器</p>

</video>

<canvas id="mycanvas" width="400" height="300" style="border: 1px solid red"></canvas>

</body>

</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。