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

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

news 2026/3/27 23:54:46

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

小红书数据采集自动化工具实战：突破反爬限制的零基础搭建指南

小红书数据采集自动化工具实战：突破反爬限制的零基础搭建指南【免费下载链接】XiaohongshuSpider 小红书爬取项目地址: https://gitcode.com/gh_mirrors/xia/XiaohongshuSpider 高效数据采集是内容分析与市场研究的基础，但面对小红书等平台的反…...

编程新知 2026/3/27 23:08:36

你用AI写代码时，是不是总觉得“它懂语法，却搞不定真实工程”？Composer 2的答案在这里

很多开发者都有过这种体验：把一个真实项目需求甩给AI，它能秒出语法完美的代码片段，可一到大型代码库、遗留系统、多文件联动的时候，就开始原地打转。改了半天核心逻辑没动，引入新问题，或者干脆在长链条任务…...

编程新知 2026/3/27 22:46:24

【AI微实验】这就deepseek对音频处理的理解╮(╯▽╰)╭

【手把手】零基础用PythonLibrosa搞定古琴音高识别，附完整代码1. 为什么要用代码“听”古琴？——传统音乐数字化的第一关1.1 从“泠泠七弦上”到“0和1”：音乐信息检索的价值1.2 核心任务拆解：基频（F0）是什…...

编程新知 2026/3/27 22:08:04

OpenCore辅助工具(OCAT)全攻略：从配置到优化的黑苹果必备工具

OpenCore辅助工具(OCAT)全攻略：从配置到优化的黑苹果必备工具【免费下载链接】OCAuxiliaryTools Cross-platform GUI management tools for OpenCore（OCAT） 项目地址: https://gitcode.com/gh_mirrors/oc/OCAuxiliaryTools 核心价值&…...

编程新知 2026/3/27 22:00:02

STP安全特性实战：如何用bpduguard和bpdufilter防止网络攻击（附真实案例）

STP安全特性实战：如何用bpduguard和bpdufilter防止网络攻击（附真实案例） 在企业网络架构中，生成树协议（STP）的安全防护常常被忽视，直到某天凌晨2点，值班工程师突然接到全网瘫痪的告警…...

编程新知 2026/3/27 20:15:08

AutoGen多智能体框架：从协作价值到企业级实践指南

AutoGen多智能体框架：从协作价值到企业级实践指南【免费下载链接】autogen 启用下一代大型语言模型应用项目地址: https://gitcode.com/GitHub_Trending/au/autogen 在人工智能快速发展的今天，如何让AI系统像人类团队一样高效协作完成复杂任务&…...

编程新知 2026/3/27 20:07:07

OpenClaw+Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF：学术论文辅助写作系统

OpenClawQwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF：学术论文辅助写作系统 1. 为什么需要AI辅助学术写作去年冬天，我在赶一篇计算机视觉领域的会议论文时，经历了所有研究者都熟悉的痛苦：连续三天熬夜整理参考文献、…...

编程新知 2026/3/27 19:08:50

蓝桥杯嵌入式备赛：STM32G431引脚复用功能表，一张图搞定定时器与ADC配置

蓝桥杯嵌入式备赛：STM32G431引脚复用功能实战指南在蓝桥杯嵌入式赛场上，STM32G431作为官方指定开发平台的核心控制器，其引脚复用功能的灵活配置往往是决定项目成败的关键。许多参赛选手在紧张激烈的比赛中，常常因为引脚配置错误…...

编程新知 2026/3/27 18:38:37

如何用stressapptest进行高效内存和磁盘压力测试？实战案例分享

如何用stressapptest进行高效内存和磁盘压力测试？实战案例分享在服务器运维和硬件性能评估中，内存和磁盘的稳定性直接关系到系统的可靠性。想象一下，当你的服务器在凌晨三点突然因为内存错误崩溃，或者磁盘在高峰期出现读写异常&a…...

编程新知 2026/3/27 17:39:59

智慧生鲜配送：揭秘生鲜配送商城APP功能版块设计

在数字化消费浪潮中，生鲜配送商城APP成为居民采购食材的重要渠道。其功能版块设计聚焦用户需求，通过智能化、便捷化的操作体验，打造高效生鲜购物场景。以下揭秘其核心功能玩法，解析如何实现“从指尖到餐桌”的流畅服务。一、首页&…...

编程新知 2026/3/27 17:39:59

Js去除视频背景

原理

代码

代码

相关文章：