Vue3实现视频绿幕去除与背景替换
创作时间:
作者:
@小白创作中心
Vue3实现视频绿幕去除与背景替换
引用
CSDN
1.
https://m.blog.csdn.net/2301_81807150/article/details/145165206
本文将详细介绍如何使用Vue3和Canvas实现视频的绿幕去除和背景替换功能。通过逐帧处理视频帧，检测特定颜色的背景并将其设置为透明，同时应用羽化效果使边缘过渡更加自然。
实现思路
1. 准备工作
在HTML模板中定义了一个<video>标签用于播放视频，以及一个<canvas>标签用来绘制处理后的视频帧。在组件挂载时，获取视频和画布元素，并初始化绘图上下文。
<template>
<div class="videoBgRemove">
<!-- 视频元素 -->
<video ref="video" loop autoplay muted style="width: 240px;">
<source src="/8_1736396574.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- 画布元素 -->
<canvas ref="canvas" width="200" height="450"></canvas>
</div>
</template>
<script>
export default {
data() {
return {
featherStrength: 0.4, // 羽化强度控制
};
},
mounted() {
// 初始化视频和画布引用
this.video = this.$refs.video;
this.canvas = this.$refs.canvas;
this.ctx = this.canvas.getContext('2d');
this.canvas_tmp = document.createElement('canvas');
this.canvas_tmp.width = this.canvas.width;
this.canvas_tmp.height = this.canvas.height;
this.ctx_tmp = this.canvas_tmp.getContext('2d');
// 初始化其他变量
this.init();
},
methods: {
init() {
// 当视频开始播放时，调用computeFrame进行逐帧处理
this.video.addEventListener('play', this.computeFrame);
}
}
};
</script>
2. 视频帧处理逻辑
当视频开始播放时，computeFrame函数会不断被调用，每次调用都会处理一帧视频数据。所有图像处理都在一个临时创建的画布上进行。
methods: {
computeFrame() {
if (!this.video || this.video.paused || this.video.ended) return;
// 绘制当前帧到临时画布上
this.ctx_tmp.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);
// 获取当前帧的图像数据
let frame = this.ctx_tmp.getImageData(0, 0, this.canvas.width, this.canvas.height);
// 后续处理...
}
}
3. 背景移除
假设背景为特定的颜色（例如绿色），对于每个像素点，如果其RGB值符合预设的背景颜色范围，则将其alpha通道设置为0，即变为透明。
methods: {
computeFrame() {
// ... (前面的代码)
const pointLens = frame.data.length / 4;
// 遍历每一个像素点
for (let i = 0; i < pointLens; i++) {
let r = frame.data[i * 4];
let g = frame.data[i * 4 + 1];
let b = frame.data[i * 4 + 2];
// 假设背景是绿色，将符合条件的像素设置为透明
if (r < 100 && g > 120 && b < 200) {
frame.data[i * 4 + 3] = 0; // 设置alpha通道为0，使背景透明
}
}
// 后续处理...
}
}
4. 羽化效果
对于非透明的像素，计算它周围的像素，取周围像素颜色的平均值作为新颜色，并根据周围的透明度调整当前像素的透明度，以此来实现羽化效果。通过featherStrength参数可以控制羽化的程度。
methods: {
computeFrame() {
// ... (前面的代码)
// 创建一个临时的数据副本，避免修改原始数据
const tempData = [...frame.data];
// 对非透明像素应用羽化效果
for (let i = 0; i < pointLens; i++) {
if (frame.data[i * 4 + 3] === 0) continue; // 忽略已经透明的像素
// 计算当前像素的位置
let [row, col] = this.numToPoint(i + 1, frame.width);
// 获取周围的像素点
let aroundPoints = this.getAroundPoint([row, col], frame.width, frame.height, 3);
// 计算周围非透明像素的颜色平均值
let opNum = 0;
let rSum = 0;
let gSum = 0;
let bSum = 0;
aroundPoints.forEach(([pRow, pCol]) => {
let index = this.pointToNum([pRow, pCol], frame.width);
rSum += tempData[(index - 1) * 4];
gSum += tempData[(index - 1) * 4 + 1];
bSum += tempData[(index - 1) * 4 + 2];
if (tempData[(index - 1) * 4 + 3] !== 255) opNum++;
});
// 计算新的alpha值
let alpha = (255 / aroundPoints.length) * (aroundPoints.length - opNum);
// 根据羽化强度调整alpha
if (alpha !== 255) {
frame.data[i * 4] = parseInt(rSum / aroundPoints.length);
frame.data[i * 4 + 1] = parseInt(gSum / aroundPoints.length);
frame.data[i * 4 + 2] = parseInt(bSum / aroundPoints.length);
frame.data[i * 4 + 3] = parseInt(alpha * this.featherStrength);
}
}
// 将处理后的图像数据绘制到实际显示的画布上
this.ctx.putImageData(frame, 0, 0);
// 持续循环
requestAnimationFrame(this.computeFrame);
},
numToPoint(num, width) {
let col = num % width;
let row = Math.floor(num / width);
return [row + 1, col === 0 ? width : col];
},
pointToNum(point, width) {
let [row, col] = point;
return (row - 1) * width + col;
},
getAroundPoint(point, width, height, area) {
let [row, col] = point;
let allAround = [];
for (let i = -Math.floor(area / 2); i <= Math.floor(area / 2); i++) {
for (let j = -Math.floor(area / 2); j <= Math.floor(area / 2); j++) {
if (i === 0 && j === 0) continue; // 跳过中心点
let pRow = row + i;
let pCol = col + j;
if (pRow > 0 && pCol > 0 && pRow <= height && pCol <= width) {
allAround.push([pRow, pCol]);
}
}
}
return allAround;
}
}
5. 显示处理结果
将处理后的图像数据应用到实际显示的画布上，这样用户就能看到带有透明背景和羽化效果的视频了。
// 将处理后的图像数据绘制到实际显示的画布上
this.ctx.putImageData(frame, 0, 0);
6. 持续循环
computeFrame函数会在每一帧处理完毕后立即再次调用自己，形成一个持续的循环，直到视频停止播放。
methods: {
computeFrame() {
// ... (前面的代码)
// 持续循环
requestAnimationFrame(this.computeFrame);
}
}
完整的demo
1.App.vue
<template>
<div id="app">
<h1>背景人像处理</h1>
<VideoRemoval />
</div>
</template>
<script>
import VideoRemoval from './components/VideoRemoval.vue';
export default {
name: 'App',
components: {
VideoRemoval
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
background-image: url("../src/assets/web_bg.jpg"); /* 使用正确的路径 */
background-size: cover; /* 背景图片覆盖整个容器 */
background-position: center center; /* 背景图片居中显示 */
background-repeat: no-repeat; /* 防止背景图片重复 */
background-attachment: fixed; /* 背景固定在视口 */
}
</style>
2.VideoRemoval.vue
<template>
<div class="videoBgRemove">
<video id="video"
src="/8_1736396574.mp4"
loop
autoplay
muted
ref="video"
style="width: 240px;"></video>
<canvas id="output-canvas"
width="200"
height="450"
willReadFrequently="true"
ref="canvas"></canvas>
</div>
</template>
<script>
export default {
data () {
return {
video: null,
canvas: null,
ctx: null,
canvas_tmp: null,
ctx_tmp: null,
featherStrength: 0.4, // 羽化强度控制
};
},
methods: {
init () {
this.ctx = this.canvas.getContext('2d');
this.canvas_tmp = document.createElement('canvas');
this.canvas_tmp.setAttribute('width', 200);
this.canvas_tmp.setAttribute('height', 450);
this.ctx_tmp = this.canvas_tmp.getContext('2d');
this.video.addEventListener('play', this.computeFrame);
},
numToPoint (num, width) {
let col = num % width;
let row = Math.floor(num / width);
row = col === 0 ? row : row + 1;
col = col === 0 ? width : col;
return [row, col];
},
pointToNum (point, width) {
let [row, col] = point;
return (row - 1) * width + col;
},
getAroundPoint (point, width, height, area) {
let [row, col] = point;
let allAround = [];
if (row > height || col > width || row < 0 || col < 0) return allAround;
for (let i = 0; i < area; i++) {
let pRow = row - 1 + i;
for (let j = 0; j < area; j++) {
let pCol = col - 1 + j;
if (i === area % 2 && j === area % 2) continue;
allAround.push([pRow, pCol]);
}
}
return allAround.filter(([iRow, iCol]) => {
return iRow > 0 && iCol > 0 && iRow <= height && iCol <= width;
});
},
computeFrame () {
if (this.video) {
if (this.video.paused || this.video.ended) return;
}
this.ctx_tmp.drawImage(this.video, 0, 0, this.video.clientWidth, this.video.clientHeight);
let frame = this.ctx_tmp.getImageData(0, 0, this.video.clientWidth, this.video.clientHeight);
const height = frame.height;
const width = frame.width;
const pointLens = frame.data.length / 4;
// 背景透明化（假设背景为特定颜色，这里选择绿色）
for (let i = 0; i < pointLens; i++) {
let r = frame.data[i * 4];
let g = frame.data[i * 4 + 1];
let b = frame.data[i * 4 + 2];
if (r < 100 && g > 120 && b < 200) {
frame.data[i * 4 + 3] = 0;
}
}
const tempData = [...frame.data];
for (let i = 0; i < pointLens; i++) {
if (frame.data[i * 4 + 3] === 0) continue;
const currentPoint = this.numToPoint(i + 1, width);
const arroundPoint = this.getAroundPoint(currentPoint, width, height, 3);
let opNum = 0;
let rSum = 0;
let gSum = 0;
let bSum = 0;
arroundPoint.forEach((position) => {
const index = this.pointToNum(position, width);
rSum += tempData[(index - 1) * 4];
gSum += tempData[(index - 1) * 4 + 1];
bSum += tempData[(index - 1) * 4 + 2];
if (tempData[(index - 1) * 4 + 3] !== 255) opNum++;
});
let alpha = (255 / arroundPoint.length) * (arroundPoint.length - opNum);
// 调整羽化效果
if (alpha !== 255) {
frame.data[i * 4] = parseInt(rSum / arroundPoint.length);
frame.data[i * 4 + 1] = parseInt(gSum / arroundPoint.length);
frame.data[i * 4 + 2] = parseInt(bSum / arroundPoint.length);
// 根据羽化强度调整 alpha
frame.data[i * 4 + 3] = parseInt(alpha * this.featherStrength);
}
}
this.ctx.putImageData(frame, 0, 0);
setTimeout(this.computeFrame, 0);
}
},
mounted () {
this.video = this.$refs.video;
this.canvas = this.$refs.canvas;
this.init();
}
};
</script>
热门推荐
研究揭示：果糖和葡萄糖对人体代谢的影响大不同
果糖是什么糖？对人体健康有啥影响？
乳源县文物古迹：千年瑶乡的历史印记
抑郁症：症状、成因与治疗方法
改善抑郁症的第一步通常是寻求专业帮助
手汗症怎么办？四种治疗方法助你告别尴尬
酱肉如何保存不坏（酱肉怎样保存时间长）
如何进行体质辨识
心理学科普：死刑执行前的犯人，都在想些什么？
南京大学科研团队在全球首次观察到引力子的"投影"
如何正确清洗腈纶毛衣以保持其质地？清洗过程中应注意哪些细节？
痛风患者一日三餐这样吃，远离痛风困扰
苔藓的生长环境（探究苔藓的喜好和适应条件）
梦见一个特别熟悉的人
叶黄素眼药水对眼睛真的有效吗
随身WiFi会被人蹭网吗？随身WiFi安全使用指南！
如何查看蓄电池电量？这种电量对车辆启动有什么影响？
装修合同关键点解析，保障您的权益
个税被其他企业冒用怎么办？律师教你正确处理方法
广西加强水情监测，保障平陆运河建设项目安全度汛
心源性猝死怎么办
发膜和护发素的使用顺序
内务府总管和九门提督的法律职责与历史地位
公路车套件的选择指南：从车架到刹车系统的全方位解析
丽水向个人推小宗土地，“私人定制庄园”将出现？
名中医的两款养生药膳，常吃养胃安神、降压止痛
为什么医生劝你每天喝一杯茶？从心脏到肠道，6个器官的惊人变化藏不住了！
酸奶也有鄙视链？一场常温酸奶与低温酸奶的深度较量
乐西高速穿越生态敏感区，如何实现路景共生？答案在此
装修必读：新风系统到底要不要装？真实优缺点深度剖析