当前位置：首页 > news >正文

原生Js Canvas去除视频绿幕背景

news 文章来源：https://blog.csdn.net/Raccon_/article/details/132732976 2025/1/23 3:23:10

Js去除视频背景

注：这里的去除视频背景并不是对视频文件进行操作去除背景

如果需要对视频扣除背景并导出可以使用ffmpeg等库，这里仅作播放用所以采用这种方法

由于uniapp中的canvas经过封装，且 uniapp 的 drawImage 无法绘制视频帧画面，因此uniapp中不适用

实现过程是将视频使用canvas逐帧截下来对截取的图片进行处理，然后在canvas中显示处理好的图片

最后通过定时器高速处理替换，形成视频播放的效果，效果如下图⬇

在这里插入图片描述

边缘仍然会有些绿幕的像素，可以通过其他的处理进行优化

原理

首先使用canvas的 drawImage 方法将video的当前帧画面绘制到canvas中

然后再通过 getImageData 方法获取当前canvas的所有像素的rgba值组成的数组

获取到的值为[r,g,b,a,r,g,b,a,...]，每一组rgba的值就是一个像素，所以获取到的数组长度是canvas的像素的数量 * 4

通过判断每一组rgb的值是否为绿幕像素，然后设置其透明通道的alpha的值为0实现效果

代码

因为canvas会受到跨域的影响导致画布被污染，因此首先需要将测试视频下载到本地

如果直接本地打开html的话同样会因为本地路径报跨域错误，需要将html，js，测试视频放在文件夹中部署一个本地服务器

可以使用http-server

npm i http-server -g# 切换到存放html，js，测试视频的文件夹 运行命令即可部署本地服务器http-server

或者

vsCode的Live server插件均可

测试视频地址

<!DOCTYPE html>
<html lang="en"><head><style>video{width: 480px;height: 270px;}</style></head><body><video id="video"  src="./63e1dd7ddd2b0.mp4"  loop autoplay muted></video><canvas id="output-canvas" width="480" height="270" willReadFrequently="true"></canvas><script type="text/javascript" src="processor2.js"></script></body>
</html>

// processor2.jslet video, canvas, ctx, canvas_tmp, ctx_tmp;function init () {video = document.getElementById('video');canvas = document.getElementById('output-canvas');ctx = canvas.getContext('2d');// 创建的canvas宽高最好与显示图片的canvas、video宽高一致canvas_tmp = document.createElement('canvas');canvas_tmp.setAttribute('width', 480);canvas_tmp.setAttribute('height', 270);ctx_tmp = canvas_tmp.getContext('2d');video.addEventListener('play', computeFrame);
}function computeFrame () {if (video) {if (video.paused || video.ended) return;}// 如果视频比例和canvas比例不正确可能会出现显示形变， 调整除的值进行比例调整ctx_tmp.drawImage(video, 0, 0, video.clientWidth / 1, video.clientHeight / 1);// 获取到绘制的canvas的所有像素rgba值组成的数组let frame = ctx_tmp.getImageData(0, 0, video.clientWidth, video.clientHeight);// 共有多少像素点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];// 判断如果rgb值在这个范围内则是绿幕背景，设置alpha值为0 // 同理不同颜色的背景调整rgb的判断范围即可if (r < 100 && g > 120 && b < 200) {frame.data[i * 4 + 3] = 0;}}// 重新绘制到canvas中显示ctx.putImageData(frame, 0, 0);// 递归调用setTimeout(computeFrame, 0);
}document.addEventListener("DOMContentLoaded", () => {init();
});

使用本地服务器访问html即可看到效果，可以看到边缘仍有绿色像素闪烁

一般情况这种就可以了，使用算法进行处理的话效果会更好，但相应的资源的消耗也会提升，造成帧率下降

下面展示通过一些算法进行羽化和颜色过渡

羽化

// 返回canvas中第num个像素点所在的坐标  12 -> [1, 12]
function 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];
}// 返回canvas中所在坐标的num(index + 1)值  [1, 12] -> 12
function pointToNum (point, width) {let [row, col] = point;return (row - 1) * width + col
}// 获取输入的坐标周围1像素内的所有像素的坐标组成的数组 [1, 1] -> [[1, 2], [2, 1], [2, 2]]
function 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);})
}

通过上面的函数获取到一个选定的不透明的像素周围的像素后，判断周围的像素的alpha值

如果周围的像素有存在透明的像素，则重新计算选定像素的alpha值

颜色过渡

计算修改alpha值连带计算周围像素中rgb的各项平均值给选定像素

最终处理结果如下
在这里插入图片描述

代码

// 新增羽化和颜色过渡// processor2.js
let video, canvas, ctx, canvas_tmp, ctx_tmp;function init () {video = document.getElementById('video');canvas = document.getElementById('output-canvas');ctx = canvas.getContext('2d');// 创建的canvas宽高最好与显示图片的canvas、video宽高一致canvas_tmp = document.createElement('canvas');canvas_tmp.setAttribute('width', 480);canvas_tmp.setAttribute('height', 270);ctx_tmp = canvas_tmp.getContext('2d');video.addEventListener('play', computeFrame);
}function 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];
}function pointToNum (point, width) {let [row, col] = point;return (row - 1) * width + col
}function 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);})
}function computeFrame () {if (video) {if (video.paused || video.ended) return;}ctx_tmp.drawImage(video, 0, 0, video.clientWidth, video.clientHeight);let frame = ctx_tmp.getImageData(0, 0, video.clientWidth, video.clientHeight);//----- emergence ----------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 < 150 && g > 200 && b < 150) {frame.data[i * 4 + 3] = 0;}}const tempData = [...frame.data]for (let i = 0; i < pointLens; i++) {if (frame.data[i * 4 + 3] === 0) continueconst currentPoint = numToPoint(i + 1, width);const arroundPoint = getAroundPoint(currentPoint, width, height, 3);let opNum = 0;let rSum = 0;let gSum = 0;let bSum = 0;arroundPoint.forEach((position) => {const index = pointToNum(position, width);rSum = rSum + tempData[(index - 1) * 4];gSum = gSum + tempData[(index - 1) * 4 + 1];bSum = 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) {// debuggerframe.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);frame.data[i * 4 + 3] = parseInt(alpha);}}//------------------------ctx.putImageData(frame, 0, 0);setTimeout(computeFrame, 0);
}document.addEventListener("DOMContentLoaded", () => {init();
});

原生Js Canvas去除视频绿幕背景

Js去除视频背景注： 这里的去除视频背景并不是对视频文件进行操作去除背景如果需要对视频扣除背景并导出可以使用ffmpeg等库，这里仅作播放用所以采用这种方法由于uniapp中的canvas经过封装，且 uniapp 的 drawImage 无法绘制视频帧画面&…...

编程日记 2023/9/11 8:33:31

Vue知识系列（1）每天10个小知识点

目录系列文章目录知识点**1. Vue修饰符**的概念、作用、原理、特性、优点、缺点、区别、使用场景**2. 双向数据绑定**的概念、作用、原理、特性、优点、缺点、区别、使用场景**3. MVVM、MVC、MVP** 的概念、作用、原理、特性、优点、缺点、区别、使用场景**4. slot** 的概念、…...

编程日记 2023/9/11 8:32:30

Elasticsearch(三)聚合基本使用

基础概念 bucket 数据分组，一些数据按照某个字段进行bucket划分，这个字段值相同的数据放到一个bucket中。可以理解成Java中的Map<String, List>结构，类似于Mysql中的group by后的查询结果。 metric： 对一个数据分组执行…...

编程日记 2023/9/11 8:31:28

单片机C语言实例：14、音频输出

一、喇叭发声原理程序实例1： #include<reg52.h> //包含头文件，一般情况不需要改动，头文件包含特殊功能寄存器的定义sbit SPK P1^2; //定义喇叭端口 /*------------------------------------------------函数声明 --------------…...

编程日记 2023/9/11 8:30:27

docker 和 podman的区别

Podman 和 Docker 都是用于容器化应用程序的工具，它们在很多方面非常相似，但也有一些关键区别： 1. 架构和权限： - Docker：Docker 使用守护进程（dockerd）来管理容器，它需要在操作…...

编程日记 2023/9/11 8:29:25

苹果手机远程控制安卓手机，为什么不能发起控制？

这位用户想要用iOS设备远程控制安卓设备，在被控端安装好AirDroid之后，就在控制端的苹果手机上也安装了AirDroid，然而打开控制端的软件，却没有在手机界面上看到【远程控制】按钮，于是提出了以上疑问。解答想要让iOS设…...

编程日记 2023/9/11 8:28:24

Gradle 配置国内镜像

我们在使用gradle构建项目的时候，每当需要build或者刷新依赖的时候，由于gradle需要从服务器下载各种依赖包，速度非常慢，根本原因是由于gradle服务器在国外，而国内有些一些大厂和高校(比如阿里，华为&#xf…...

编程日记 2023/9/11 8:27:21

Spring AOP使用指南: 强大的面向切面编程技术

🌷🍁 博主猫头虎（🐅🐾）带您 Go to New World✨🍁 🦄 博客首页——🐅🐾猫头虎的博客🎐 🐳 《面试题大全专栏》 🦕 文章图文…...

编程日记 2023/9/11 8:26:20

Spring Boot集成Elasticsearch实战

文章目录一、简介二、安装与配置Elasticsearch三、集成Spring Boot与Elasticsearch1. 添加依赖与配置文件2. 创建Elasticsearch数据模型3. 定义Elasticsearch仓库接口4. 实现Elasticsearch数据操作四、基本查询与索引操作1. 插入与更新数据2. 删除数据与索引3. 条件查询与分页…...

编程日记 2023/9/11 8:25:19

【python零基础入门学习】python基础篇之文件对象open、模块以及函数的使用（三）

本站以分享各种运维经验和运维所需要的技能为主《python》：python零基础入门学习《shell》：shell学习《terraform》持续更新中：terraform_Aws学习零基础入门到最佳实战《k8》暂未更新《docker学习》暂未更新《ceph学习》ceph日常问题解…...

编程日记 2023/9/11 8:24:18

【JavaEE】_CSS常用属性值

目录 1. 字体属性 1.1 设置字体家族 font-family 1.2 设置字体大小 font-size 1.3 设置字体粗细 font-weight 1.4 设置字体倾斜 font-style 2. 文本属性 2.1 设置文本颜色 color 2.2 文本对齐 text-align 2.3 文本装饰 text-decoration 2.4 文本缩进 text-indent 2.…...

编程日记 2023/9/11 8:23:17

vue组件库开发，webpack打包，发布npm

做一个像elment-ui一样的vue组件库那多好啊！这是我前几年就想做的但webpack真的太难用，也许是我功力不够今天看到一个视频，早上6-13点，终于实现了，呜呜感谢视频的分享-来龙去脉-大家可以看这个视频：htt…...

编程日记 2023/9/11 8:22:16

Java中快速排序的优化技巧：随机取样、三数取中和插入排序

目录快速排序基础优化1：随机取样优化2：三数取中优化3：插入排序总结： 快速排序（Quick Sort）是一种高效的排序算法，它的平均时间复杂度为O(n log n)。然而，在某些情况下&…...

编程日记 2023/9/11 8:21:15

【leetcode 力扣刷题】删除字符串中的子串or字符以满足要求

删除字符串中的子串或者字符以满足题意要求 1234. 替换子串得到平衡字符串680. 验证回文串917. 仅仅反转字母 1234. 替换子串得到平衡字符串题目链接：1234. 替换子串得到平衡字符串题目内容： 题目中给出了平衡字符串的定义——只有’Q’，…...

编程日记 2023/9/11 8:20:14

【Unity基础】3.脚本控制物体运动天空盒

【Unity基础】3.脚本控制物体运动&天空盒大家好，我是Lampard~~ 欢迎来到Unity基础系列博客，所学知识来自B站阿发老师~感谢 （一）搭建开发环境 （1）下载visual studio 在我们下载unity编译器的时候&…...

编程日记 2023/9/11 8:19:13

Spring MVC拦截器

拦截器（Interceptor）是 Spring MVC 提供的一种强大的功能组件。它可以对用户请求进行拦截，并在请求进入控制器（Controller）之前、控制器处理完请求后、甚至是渲染视图后，执行一些指定的操作。在 Spring MV…...

编程日记 2023/9/11 8:18:12

ClickHouse的Join算法

ClickHouse的Join算法 ClickHouse是一款开源的列式分析型数据库（OLAP），专为需要超低延迟分析查询大量数据的场景而生。为了实现分析应用可能达到的最佳性能，分析型数据库（OLAP）通常将表组合在一起形成一个…...

编程日记 2023/9/11 8:17:11

java面试题-RabbitMQ面试题

RabbitMQ面试题面试官：RabbitMQ-如何保证消息不丢失候选人： 嗯！我们当时MYSQL和Redis的数据双写一致性就是采用RabbitMQ实现同步的，这里面就要求了消息的高可用性，我们要保证消息的不丢失。主要从三个层面考虑第一…...

编程日记 2023/9/11 8:16:10

数据仓库-核心概念

数据仓库数据仓库，英文名称为Data Warehouse，可简写为DW或DWH。数据仓库，是为企业所有级别的决策制定过程，提供所有类型数据支持的战略集合。它是单个数据存储，出于分析性报告和决策支持目的而创建。为需要业务智能的…...

编程日记 2023/9/11 8:15:09

java中的实体类

在Java与数据库交互时，设计实体类有以下几个原因： 1、对象关系映射（ORM）：实体类提供了一种将数据库中的表映射为Java对象的方式。这样，开发人员可以使用面向对象的方式操作数据库，而无需编写大…...

编程日记 2023/9/11 8:14:07

使用Puppeteer爬取地图上的用户评价和评论

导语在互联网时代，获取用户的反馈和意见是非常重要的，它可以帮助我们了解用户的需求和喜好，提高我们的产品和服务质量。有时候，我们需要从地图上爬取用户对某些地点或商家的评价和评论，这样我们就可以分析用户对不同…...

编程日记 2023/9/11 8:13:05

GLSL ES着色器语言使用矢量和矩阵的相关规范

目录矢量和矩阵类型下面是声明矢量和矩阵的例子： 赋值和构造矢量构造函数矩阵构造函数构造矩阵的几种方式访问元素 . 运算符矢量的分量名 ［ ］运算符运算符矢量和矩阵可用的运算符矢量和矩阵相关运算矢量和浮点数的…...

编程日记 2023/9/11 8:12:03

Himall商城- web私有方法

目录 1 Himall商城- web私有方法 1.1 /// 获取售价 1.1.1 //商品批量销售价 1.1.2 //获取组合购的价格 Himall商城- web私有方法 #region web私有方法 /// <summary> /// 获取售价 /// <para>己计算会员折</para> /// </summary> /// <para…...

编程日记 2023/9/11 8:11:02

Spring Boot 整合 Redis，使用 RedisTemplate 客户端

文章目录一、SpringBoot 整合 Redis1.1 整合 Redis 步骤1.1.1 添加依赖1.1.2 yml 配置文件1.1.3 Config 配置文件1.1.4 使用示例 1.2 RedisTemplate 概述1.2.1 RedisTemplate 简介1.2.2 RedisTemplate 功能二、RedisTemplate API2.1 RedisTemplate 公共 API2.2 String 类型 A…...

编程日记 2023/9/11 8:10:01

Tomcat 接收请求并传递给工作线程池流程

文章目录 Tomcat 接收请求并传递给工作线程池流程接收 socket 连接 org.apache.tomcat.util.net.SocketProcessorBase#reset结论 Tomcat 接收请求并传递给工作线程池流程接收 socket 连接有两个线程 http-nio-8080-ClientPoller-0/1 （下文称为 clientPoller&…...

编程日记 2023/9/11 8:09:00

在Linux系统上用C++将主机名称转换为IPv4、IPv6地址

在Linux系统上用C将主机名称转换为IPv4、IPv6地址功能指定一个std::string类型的主机名称，函数解析主机名称为IP地址，含IPv4和IPv6，解析结果以std::vector<std::string>类型返回。解析出错或者解析失败抛出std::string类型的异常消…...

编程日记 2023/9/11 8:07:59

【硬件设计】硬件学习笔记二--电源电路设计

硬件学习笔记二--电源电路设计一、LDO设计1.1 LDO原理1.2 LDO参数1.3 应用二、DC-DC设计2.1 DC-DC原理2.2 DC-DC参数介绍2.4 DC-DC设计要点2.5 DC-DC设计注意事项写在前面：本篇笔记来自王工的硬件工程师培训课程，想要学硬件的同学可以去腾讯课堂直接搜…...

编程日记 2023/9/11 8:06:58

day34 集合总结

集合总结一、概述作用：存储对象的容器，代替数组的，使用更加的便捷所处的位置：java.util 体系结构二、Collection 内部的每一个元素都得是引用数据类型常用方法 add(Object o) 添加元素 addAll(Collection c) 将指定集…...

编程日记 2023/9/11 8:05:57

【JAVA】图书管理系统(javaSE简易版内含画图分析) | 期末大作业课程设计

作者主页：paper jie 的博客本文作者：大家好，我是paper jie，感谢你阅读本文，欢迎一建三连哦。本文录入于《JAVA》专栏，本专栏是针对于大学生，编程小白精心打造的。笔者用重金(时间和精力)打造&…...

编程日记 2023/9/11 8:04:55

区块链技术与应用 - 学习笔记3【比特币数据结构】

大家好，我是比特桃。本系列笔记只专注于探讨研究区块链技术原理，不做其他违反相关规定的讨论。区块链技术已被纳入国家十四五规划，在“加快数字发展建设数字中国”篇章中，区块链被列为“十四五”七大数字经济重点产业之一&#…...

编程日记 2023/9/11 8:03:54

只会前端可以做动态网站吗/win7优化大师官方免费下载

其实MySQL默认的最大连接数为100，可能在大访问量的时候造成了连接不上数据库。解决的办法：1、如果你的MySQL数据库使用my.cnf文件配置找到文件 /etc/my.cnf编辑器打开，修改max_connections的值为10000。实际MySQL服务器允许的最大连接数16384…...

编程日记 2025/1/22 22:00:57

天津河东做网站公司/世界疫情最新数据

遇到情况: 我在Node js中设置了res.setHeader(Content-type,text/html;charsetutf-8); 导致这个错误翻译: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client Error [ERR_HTTP_HEADERS_SENT]:无法在发送到客户端后设置标头解决办法: …...

编程日记 2025/1/22 19:21:48

重庆营销型网站随做的好/百度seo推广计划类型包括

Label 欧拉函数 Description 给定整数n(1≤n≤105)n(1\leq n\leq 10^5)n(1≤n≤105)，求： ∑i1n∑j1ngcd(i,j)\sum_{i1}^{n}\sum_{j1}^{n}gcd(i,j)i1∑nj1∑ngcd(i,j) Solution 看上去此题所求又是一个反演的形式（其实此题可用反演解…...

编程日记 2025/1/22 16:39:53