html 像素 视频教程,canvas像素点操作之视频绿幕抠图
本文介绍了canvas像素点操作之视频绿幕抠图,分享给大家,具体如下:
用法:
context.putImageData(imgData, x, y, dX, dY, dWidth, dHeight);
参数
描述
imgData
规定要放回画布的 ImageData 对象。
x
ImageData 对象左上角的 x 坐标,以像素计。
y
ImageData 对象左上角的 y 坐标,以像素计。
dX
可选。水平值(x),以像素计,在画布上放置图像的位置。
dY
可选。水平值(y),以像素计,在画布上放置图像的位置。
dWidth
可选。在画布上绘制图像所使用的宽度。
dHeight
可选。在画布上绘制图像所使用的高度。
下面的栗子简单实现了几个简单的滤镜效果,具体算法参考的这里,学过《数字图像处理》的同学应该对此理解更深刻。
demo
该栗子纯属为了演示功能而做,如果只强调效果而不在乎数据的话,用CSS3的filter属性便能高效又轻松地搞定。
部分代码
import imgUrl from './component/sample.jpg';
export default {
data () {
return {
imgUrl: imgUrl
}
},
methods: {
onOperate1 () {
this.ctx.putImageData(this.onCompute1(), 0, 0);
},
onOperate2 () {
this.ctx.putImageData(this.onCompute2(), 0, 0);
},
...
onCancel () {
this.reload();
},
onCompute1 () {
let data = this.frameData.data;
for (let i = 0; i < this.imgDataLength; i += 4) {
let r = data[i + 0],
g = data[i + 1],
b = data[i + 2];
data[i + 0] = 255 - r;
data[i + 1] = 255 - g;
data[i + 2] = 255 - b;
}
return this.frameData;
},
onCompute2 () {
let data = this.frameData.data;
for (let i = 0; i < this.imgDataLength; i += 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;
}
return this.frameData;
},
...
},
mounted () {
this.canvas = this.$refs['canvas'];
this.ctx = this.canvas.getContext('2d');
this.reload();
}
}
上周跟同学去了一趟溧阳天目湖的南山竹海,在景区被忽悠拍了一张照片,就是这张 ——
然后被朋友圈吐槽抠图。其实当时就是站在一块绿幕前拍的:joy: 。
PS中魔法棒工具可以把图片中一定容差下的相近像素都选中、清空,轻松做到一键“抠图”,前提是主体一定要与背景有大的差异,即像素值差值越大,抠图效果越好。
Canvas同样可以做到,并且可以处理视频帧,其中的原理是一样的 —— 将每个视频帧中绿幕的像素块透明度置0即可。像这样 ——
demo
部分代码
import videoUrl from './component/video.ogv';
import imgUrl from './component/sample.jpg';
const TOLERANCE = 5;
export default {
data () {
return {
videoUrl: videoUrl,
imgUrl: imgUrl
}
},
methods: {
draw () {
if (this.video.paused || this.video.ended) {
return;
}
this.ctx.drawImage(this.video, 0, 0, this.width, this.height);
this.ctx.putImageData(this.cutOut(), 0, 0);
},
cutOut () {
let frameData = this.ctx.getImageData(0, 0, this.width, this.height),
len = frameData.data.length / 4;
for (let i = 0; i < len; i++) {
let r = frameData.data[i * 4 + 0],
g = frameData.data[i * 4 + 1],
b = frameData.data[i * 4 + 2];
if (r - 100 >= TOLERANCE
&& g - 100 >= TOLERANCE
&& b - 43 <= TOLERANCE) {
frameData.data[i * 4 + 3] = 0;
}
}
return frameData;
}
},
mounted () {
this.video = this.$refs['video'];
this.canvas = this.$refs['canvas'];
this.ctx = this.canvas.getContext('2d');
this.timer = null;
this.video.addEventListener('play', () => {
this.width = this.video.videoWidth;
this.height = this.video.videoHeight;
this.timer && clearInterval(this.timer);
this.timer = setInterval(() => {
this.draw();
}, 50);
}, false);
}
}
参考资料
html 像素 视频教程,canvas像素点操作之视频绿幕抠图相关推荐
- html5 自动扣图,canvas像素点操作之视频绿幕抠图
本文介绍了canvas像素点操作之视频绿幕抠图,分享给大家,具体如下: 用法: context.putimagedata(imgdata, x, y, dx, dy, dwidth, dheight) ...
- Unity3D视频绿幕抠图的实现及优化
Unity3D视频绿幕抠图的实现及优化 展开 本文是通过Shader处理绿幕的方式来实现Unity中视频(VideoPlayer)的绿幕抠图.因为项目原因,不追究细节(能用就好能用就好)orz可是我连 ...
- 通过OpenCV对视频进行绿幕抠图
通过OpenCV对视频进行绿幕抠图 效果 代码 1.打开视频素材 2.保存视频路径及格式设置 3.读取一帧视频 4.寻找绿幕背景 5.融合 6.代码执行效果 效果 今天跟大家分享的是最近比较受大家喜欢 ...
- 视频绿幕抠像应用:用FastDeploy部署RVM拯救视频剪辑师的发量
视频绿幕抠像应用:用FastDeploy部署RVM拯救视频剪辑师的发量 本项目为自动抠像,不管背景是什么,都可以抠像成绿幕视频.上传视频或图片,一键抠图抠像!将绿幕视频下载后,就可以用视频编辑软件进行 ...
- 视频编辑SDK,AE模版SDK,绿幕抠图SDK,AI人像分割SDK,VLOG模版SDK
蓝松短视频SDK(视频编辑.AE模版.绿幕抠图.人像分割.人体抠图.VLOG模版): 高集成度:SDK中的大部分功能,都是一行代码设置 高完整度:提供常见视频编辑UI界面,可直接使用 高独立性:蓝松S ...
- java绿幕抠图_无需绿幕的全自动视频抠图工具|unscreen
早前我有分享过用AI算法去除图片背景的方法(AI抠图),最近看到群里有人分享了一个视频抠图的网站.同大家一起分享下. 抠图是一个相关行业的必备技能,但是大部分小白只有看大声炫技的份.此时多么希望能 ...
- 一键绿幕抠像替换背景,绿幕抠图是如何操作的?
一般要抠像的视频,前期都使用绿幕或蓝幕拍摄.拍摄结束进入后期软件进行抠像处理.那再我们日常生活中,没有用绿幕蓝幕拍摄,我们又改如何进行视频抠像替换背景的操作呢? 在电影.电视剧拍摄中应特效需要常用到绿 ...
- 【OpenCV学习】【8】绿幕抠图操作
我们在看电影的时候会发现许多很震撼的特效,而在拍摄这些特效时,他们都在一个很大的绿幕中进行,接下来我们来将绿幕的图像进行抠图操作!It is amazing!~ import cv2image = c ...
- 利用RVM与FastDeploy实现高效视频绿幕抠像:挽救视频剪辑师的工作效率
目录 引言 RVM: Robust Video Matting FastDeploy: 快速部署 1.安装FastDeploy环境 2.运行官方RVM抠像测试代码
最新文章
- jsonp跨域ajax跨域get方法
- linux 下 select 函数的用法
- 在Linux操作系统下使用虚拟光驱的方法
- 续流二极管原理及应用
- Navicat Premium 怎么安装比较快
- BZOJ 4710 [Jsoi2011]分特产 解题报告
- 程序员的思维修炼》读书笔记
- LeetCode 430. 扁平化多级双向链表(DFS)
- wordcount linux java_linux下在eclipse上运行hadoop自带例子wordcount
- 中国象棋程序的设计与实现(六)--N皇后问题的算法设计与实现(源码+注释+截图)...
- jsp页面科学计数法显示问题的解决办法
- oracle取时间间隔天,如何掌握 Oracle 中的时间间隔型数据(转)
- MQTT 固定报头 中 剩余长度字段的计算
- java与tomcat,Centos上安装配置java和tomcat
- Linux中的ps命令
- python数据分析之pandas
- java path类_Java PathParser类代码示例
- tesseract-ocr
- 视频号领域发布的不同时间,视频号上热门秘诀:国仁楠哥
- Python-random函数用法