前端实现视频重叠，抠图效果
2024-05-07 22:00:36
方法有两种
一、 使用透明背景的webm格式视频
具体方式可自行百度，跟代码关系不大，直接用就行，但是支持程度可能不太行
二、使用canvas进行抠图
mdn链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Manipulating_video_using_canvas
html部分
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><style>body {color: #CCCCCC;}#c2 {/* background-image: url("/assets/images/blue.png"); */background-size: cover;background-repeat: no-repeat;}div {float: left;border: 1px solid #444444;padding: 10px;margin: 10px;}.d-flex {display: flex;}.main {width: 500px;}video {width: 100%;}canvas {margin-top: 20px;width: 450px;}.right {width: 450px;position: relative;overflow-x: hidden;}.center {width: 100%;position: absolute;left: 50%;transform: translateX(-50%);object-fit: cover;top: 0;pointer-events: none;z-index: -1;}.text-white {color: #fff;}</style><script type="text/javascript;" src="main.js"></script>
</head><body class="d-flex"><div class="main"><!--需要抠图的视频--><video preload="auto" id="video" loop src="./assets/video/out.webm" controls="true" /></div><canvas id="c1" width="1080" height="1920"></canvas><div class="right"><!--背景视频--><video preload="auto" class="center" id="personVideo" muted autoplay src="./assets/video/bg.WebM"></video><!--输出视频--><canvas id="c2" width="1080" height="1920" /></div>
</body>
注意素材自己找一下
JS部分
/** @Description: * @Date: 2021-08-19 14:49:56* @LastEditTime: 2021-08-20 10:53:02* @FilePath: \virtualGuide(6)\src\util\videoHandler.js*/
export class VideoHandler {// 源视频video = nullwidth = 1080height = 1920// canvas1, 用于复制视频c1 = nullctx1 = null// canvas2, 输出去除背景之后的视频c2 = nullctx2 = null/*** @description: 构造方法* @param {HTMLVideoElement} source 原视频* @param {HTMLCanvasElement} canvas 输出canvas* @param {?HTMLCanvasElement} c1 绘制源视频的canvas,不穿默认创建* @return {*}*/constructor(source, canvas, c1, width = 1080, height = 1920) {try {this.video = sourceif (c1) {this.c1 = c1} else {this.c1 = document.createElement("canvas")this.c1.width = this.widththis.c1.height = this.height}this.ctx1 = this.c1.getContext('2d')this.c2 = canvasthis.ctx2 = canvas.getContext('2d')this.width = width;this.height = height;} catch (error) {console.warn(error)}}/*** @description: 初始化dom，添加监听视频的事件* @param {*}* @return {*}*/doLoad() {this.video?.addEventListener('play', () => {this.timerCallback();}, false);}/*** @description: 当视频播放时，递归绘制视频，这里的延时可根据需求自行设置，16为每秒绘制60多次，基本满足视觉要求* @param {*}* @return {*}*/timerCallback() {if (this.video.paused || this.video.ended) {return;}this.computeFrame();let self = this;setTimeout(function () {self.timerCallback();}, 16);}/*** @description: 绘制每一帧视频* @param {*}* @return {*}*/computeFrame() {this.ctx1.clearRect(0, 0, this.width, this.height)this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);let frame = this.ctx1.getImageData(0, 0, this.width, this.height);// 每四个为一个像素点，分别为rgbalet step = 4// 像素点个数let l = frame.data.length / step;for (let i = 0; i < l; i++) {let r = frame.data[i * step + 0];let g = frame.data[i * step + 1];let b = frame.data[i * step + 2];// rgba通道，当颜色为黑色时，a通道设置为0if (g < 10 && r < 10 && b < 10)frame.data[i * step + 3] = 0;}this.ctx2?.putImageData(frame, 0, 0);return;}/*** @description: 绘制第一帧，需要源视频设置preload:auto* @param {*}* @return {*}*/printFirstFrame() {this.video.currentTime = 0console.log(this.video.currentTime, "first");setTimeout(() => {this.ctx1.clearRect(0, 0, this.width, this.height)this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);let frame = this.ctx1.getImageData(0, 0, this.width, this.height);// 每四个为一个像素点，分别为rgbalet step = 4// 像素点个数let l = frame.data.length / step;for (let i = 0; i < l; i++) {let r = frame.data[i * step + 0];let g = frame.data[i * step + 1];let b = frame.data[i * step + 2];// rgba通道，当颜色为黑色时，a通道设置为0if (g < 10 && r < 10 && b < 10)frame.data[i * step + 3] = 0;}// console.log(this, this.ctx2);this.ctx2?.putImageData(frame, 0, 0);}, 20);}
}
使用
let video = document.querySelector("#personVideo");let canvas = document.querySelector("#c2");const videoHandler = new VideoHandler(video, canvas);const videoHandler.doLoad();
视频不方便发布，可以看下mdn的效果图
总结
第一种方法方便快捷，就是webm格式的透明背景视频不好弄，可以让ui大哥帮忙。但是适配性可能也不太好
第二种方法基本上只要支持canvas的浏览器都能用，但是会把背景里所有目标颜色都设为透明，比如我背景色是黑色，我要扣的图里面如果有黑色也会被扣掉，例如头发眼睛。当然这种可以通过改背景色来解决；也可以优化处理像素的算法来解决
前端实现视频重叠，抠图效果相关推荐
- 视频人像抠图论文阅读
视频人像抠图论文阅读 1.Prime Sample Attention in Object Detection 2.Mask RCNN 3.Background Matting: The World ...
- 4K60帧视频实时抠图，连头发丝都根根分明
看这一头蓬松的秀发,加上帅气的动作,你以为是在绿幕前拍大片? No.No.No 这其实是AI拿来视频实时抠图后的效果. 没想到吧,实时视频抠图,现在能精细到每一根发丝. 换到alpha通道再看一眼,不 ...
- 前端HTML5视频_HTML5核心-张晓飞-专题视频课程
前端HTML5视频_HTML5核心-275人已学习 课程介绍 HTML5是定义 HTML 标准的新的版本. 广义上我们应该认为HTML5是一套技术集合,允许更多样化和强大的网站和应用程 ...
- 完美抠图王冰冰！字节实习生开发的AI，实现4K60帧视频实时抠图，连头发丝都根根分明...
鱼羊 明敏 发自 凹非寺 量子位 报道 | 公众号 QbitAI 看这一头蓬松的秀发,加上帅气的动作,你以为是在绿幕前拍大片? No.No.No 这其实是AI拿来视频实时抠图后的效果. 没想到吧,实时 ...
- html两个视频可以重叠吗,两视频叠加融合的方法步骤详解 如何将两个视频重叠播放...
在网上看视频的时候,小编看过有些视频画面很特别,是将两个视频的画面重叠融合在一起播放,就是在同一个画面中播放着两个视频,其中一个看上去像是半透明的状态.这种视频制作方法用来制作MV或者舞蹈视频等,会让 ...
- Android前端音视频数据接入GB28181平台意义
技术背景 在我们研发Android平台GB28181前端音视频接入模块之前,业内听到最多的是,如何用Android或者Windows端,在没有国标IPC设备的前提下,模拟GB28181的信令和媒体流交 ...
- 直播运营-直播抠图效果完整展示
阿酷TONY [直播运营]人才的待遇水涨船高.有公司开出6万月薪,可一年16薪的高价也难觅良将,还有公司直接开出两倍工资从对手公司挖直播运营.3月3日,我们启动首场To B营销直播,为三月份的&quo ...
- 前端播放视频有声音没有画面
前端播放视频有声音没有画面 MP4编码格式主要有三种,分别是mpg4(xdiv),mpg4(xvid),avc(h264),只有h264才是公认的MP4标准编码,所以视频有声音没画面需要将视频转码成h ...
- Web前端学习6个有效果软件，你值得拥有!
想要让程序猿可以快速有效的工作,辅助工具是非常有必要的,不管是刚学习web前端技术的同学还是已经进入工作的学员,都需要学习和掌握一些Web前端开发工具和软件,Web前端学习6个有效果软件,你值得拥有! ...
最新文章
- PriorityBlockingQueue详解
- 突发！ASML断供中芯国际
- html a标签去掉下划线_让HTML元素动起来
- 如何利用C/C++逐行读取txt文件中的字符串(可以顺便实现文本文件的复制)
- php 递归实现无限极分类和排序_Laravel框架实现无限极分类
- matlab多元函数_函数的计算机处理8(1)_1MATLAB
- vss2005管理vs2010项目
- ExtJS Panel主要配置列表
- Linux中，Tomcat安装
- 剑桥教授项目 | 机器学习在推荐系统中的应用
- redis cluster 分布式锁_Redis的分布式锁的实现原理
- java泛型方法的使用
- matconvnet 在 win7 64 位下的安装
- 成年人の内部 福利 不敢高调分享……
- [软件应用]深入验证Nero是否注册成功
- RK987A键盘蓝牙连接电脑
- macOS Monterey 12.3 (21E230) 正式版 ISO、IPSW、PKG 下载
- 汉字GB2312编码
- 淘淘商城第30讲——实现商品添加功能
- 分层结构的生活例子_分层处理，各个击破（案例分析）