canvas怎么抠图,
介绍画布像素操作的视频绿屏抠图，分享给大家，如下：
用法：
context.putImageData(imgData，x，y，dX，dY，dWidth，d height)；描述参数imgData指定要放回画布中的ImageData对象。imagedata对象左上角的x坐标，以像素为单位。图像数据对象左上角的y坐标，以像素为单位。DX是可选的。画布上放置图像的水平值(x ),以像素为单位。DY可选。图像放置在画布上的水平值(y ),以像素为单位。DWidth是可选的。用于在画布上绘制图像的宽度。DHeight是可选的。用于在画布上绘制图像的高度。
下面这个栗子简单实现几个简单的滤镜效果。具体算法请参考这里。学过《数字图像处理》的同学应该对此有更深的体会。
演示
栗子纯粹是为了演示功能而做的。如果只强调效果，忽略数据，使用CSS3的filter属性可以高效轻松地做到。
部分代码
从导入imgUrl。/component/sample . jpg ；export default { data(){ return { imgUrl:imgUrl } }，方法：{ on operate 1(){ this . CTX . putimagedata(this . on compute 1()，0，0)；}，on opera 2(){ this . CTX . putimagedata(this . on compute 2()，0，0)；},on cancel(){ this . reload()；}，on compute 1(){ let data=this . frame data . data；for(设I=0；i this.imgDataLengthi=4) {设r=data[i 0]，g=data[i 1]，b=data[I 2]；data[I 0]=255-r；data[I 1]=255-g；数据[I ^ 2]=255-b；}返回this.frameData}，on compute 2(){ let data=this . frame data . data；for(设I=0；i this.imgDataLengthI=4){ data[I]=math . ABS(data[I 1]-data[I 2]data[I 1]data[I])* data[I]/256；data[I 1]=math . ABS(data[I 2]-data[I 1]data[I 2]data[I])* data[I]/256；data[I 2]=math . ABS(data[I 2]-data[I 1]data[I 2]data[I])* data[I 1]/256；}返回this.frameData},}，挂载(){ this.canvas=this。$ refs[ canvas ]；this . CTX=this . canvas . get context( 2d )；this . reload()；}}上周和同学去溧阳天目湖南山竹海，被忽悠到景区拍了张照片，就是这张——。
然后就被朋友圈吐槽了。其实是站在绿屏前拍的：joy:
PS魔棒工具可以在一定的容差范围内，选择并清除一张图片中所有相邻的像素，一键轻松“抠图”。前提是主体必须与背景有较大差异，即像素值差异越大，抠图效果越好。
Canvas也可以做到这一点，它可以处理视频帧。原理是一样的：——。只需将每个视频帧中绿屏的像素块的透明度设置为0即可。像这样，3354
演示
部分代码
从导入视频网址./组件/视频。ogv ；从导入imgUrl ./组件/样本。jpg ；常数容差=5;导出默认{ data(){ return { video URL:video URL，imgUrl: imgUrl}}，方法：{ draw(){ if(this。视频。愣了一下 这个。视频。已结束){ return}this.ctx.drawImage(this.video，0，0，this.width，this。身高)；这个。CTX。putimagedata(这个。cutout()，0，0)；}，cutOut(){让帧数据=this。CTX。getimagedata(0，0，this.width，this.height)，len=帧数据。数据。长度/4；对于(设I=0；我leni ) {设r=frameData.data[i * 4 0]，g=frameData.data[i * 4 1]，b=帧数据。数据[I * 4 2]；如果(r - 100=公差g - 100=公差b - 43=公差){帧数据。data[I * 4 3]=0；} }返回frameData}}，挂载(){this.video=this .$ refs[ video ]；这个. canvas=这个.$ refs[ canvas ]；这个。CTX=这个。画布。获取上下文(“2d”)；this.timer=nullthis。视频。addevent侦听器( play ，()={ this。宽度=这个。视频。视频宽度；这个。身高=这个。视频。视频高度；这个。定时器清零间隔(this。定时器)；这个。timer=setInterval(()={ this。draw()；}, 50);},假);}}参考资料
使用画布操纵视频
用画布进行像素操作
画布、图像和像素
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。