canvas像素点操作 —— 视频绿幕抠图

原文地址

主要内容

上篇文章学习了canvas像素点的获取 —— 传送门, 今天学一下canvas像素点操作。

一个方法:putImageData

putImageData

用法:

context.putImageData(imgData, x, y, dX, dY, dWidth, dHeight);
参数描述
imgData规定要放回画布的 ImageData 对象。
xImageData 对象左上角的 x 坐标,以像素计。
yImageData 对象左上角的 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();}
}

上周跟同学去了一趟溧阳天目湖的南山竹海,在景区被忽悠拍了一张照片,就是这张 ——

small demo

然后被朋友圈吐槽抠图。其实当时就是站在一块绿幕前拍的? 。

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);}
}

参考资料

  • Manipulating video using canvas
  • Pixel manipulation with canvas
  • Canvas and images and pixels
  • https://www.jianshu.com/p/90f6aedb33db

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367119.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

并发编程(一):基础概述

本篇博客主要讲述并发编程中的一些基础内容&#xff0c;并了解一下基本概念。 首先我们了解一下什么是并发&#xff1f; 同时拥有两个或者多个线程&#xff0c;如果程序在单核处理器上运行&#xff0c;多个线程将交替的换入或者换出内存&#xff0c;这些线程是同时“存在”的&a…

python哲学翻译_Python

正在学习Python开发语言的用户&#xff0c;可能会在学习过程中听说过讲师说过Python有一段有关于Python的哲学理念机设计思想&#xff0c;在Python里输入“import this”命令就会出现一段英文格言&#xff0c;这里我们把Python的这段格言的双语版分享出来&#xff0c;帮助正在学…

如何创建线程?

Java并发编程&#xff1a;如何创建线程&#xff1f; 在前面一篇文章中已经讲述了在进程和线程的由来&#xff0c;今天就来讲一下在Java中如何创建线程&#xff0c;让线程去执行一个子任务。下面先讲述一下Java中的应用程序和进程相关的概念知识&#xff0c;然后再阐述如何创建线…

经典MapReduce作业和Yarn上MapReduce作业运行机制

一、经典MapReduce的作业运行机制 如下图是经典MapReduce作业的工作原理&#xff1a; 1.1 经典MapReduce作业的实体 经典MapReduce作业运行过程包含的实体&#xff1a; 客户端&#xff0c;提交MapReduce作业。JobTracker&#xff0c;协调作业的运行。JobTracker是一个Java应用程…

根据Linux2.6.26源码分析进程模型

1.关于进程 1.1进程的概念 进程是正在运行的程序实体&#xff0c;并且包括这个运行的程序中占据的所有系统资源&#xff0c;比如说CPU(寄存器)&#xff0c;IO,内存&#xff0c;网络资源等。很多人在回答进程的概念的时候&#xff0c;往往只会说它是一个运行的实体&#xff0c;而…

socket编程开发

1.socket是什么&#xff1f; Socket是应用层与TCP/IP协议族通信的中间软件抽象层&#xff0c;它是一组接口。在设计模式中&#xff0c;Socket其实就是一个门面模式&#xff0c; 它把复杂的TCP/IP协议族隐藏在Socket接口后面&#xff0c;对用户来说&#xff0c;一组简单的接口就…

python大作业外星人入侵_【python3小白上路系列】外星人入侵——开始

早起的周日&#xff0c;今日阴天&#xff0c;老爸生日快乐~开始项目首先创建一个空的Pygame窗口&#xff0c;供后面用来绘制游戏元素&#xff0c;如飞船和外星人。我们还将让这个游戏响应用户输入、设置背景色以及加载飞船图像。1.1.1 创建Pygame窗口以及相应用户输入首先&…

Codeforces 975D Ghosts 【math】

打了两次cf里的比赛&#xff0c;发现cf比较喜欢考数学题。一开始看到这道题没有思路&#xff0c;因为总想dp&#xff0c;图论&#xff0c;贪心这些东西。如果下次再没有思路&#xff0c;可以从数学的角度入手。 题解说的比较清楚&#xff1a; 2018.9.4又看了遍这题&#xff0c;…

java 一维数组_java基础 ---- 一维数组

为什么要使用数组&#xff1a; 因为不使用数组计算多个变量的时候太繁琐&#xff0c;不利于数据的处理。-------- 数组也是一个变量&#xff0c;是存储一组相同类型的变量声明一个变量就是在内存中划出一块合适的空间声明一个数组就是在内存中划出一块连续的空间数组长度就是…

Java中的策略设计模式-示例教程

策略模式是行为设计模式之一 。 当我们对一个特定任务有多种算法&#xff0c;并且客户端决定在运行时使用的实际实现时&#xff0c;将使用策略模式。 策略模式也称为策略模式 。 我们定义了多种算法&#xff0c;并让客户端应用程序将算法用作参数。 此模式的最佳示例之一是采用…

vue-cli 3.0 使用全过程讲解

2018年8月13日更新&#xff1a; 恭祝vue-cli 3.0.0 官方正式版发布&#xff0c;此后我们可以正式在3.0环境下进行项目开发了。 此文发布以来受到了很多朋友的阅读&#xff0c;但我深知这篇文章还是很浅显的&#xff0c;因此&#xff0c;我会在后续的 3.0 使用过程中分享我遇到…

前端入行两年--教会了我这些道理

1.前言 光阴似箭&#xff0c;日月如梭。不得不感慨时间过得很快&#xff0c;2017差不多结束了&#xff0c;一下子我从事前端开发的时间已经两年了。这两年可以说是一波三折&#xff0c;回想这两年的经历&#xff0c;让我忍不住了写下了这篇文章&#xff0c;记录自己在这两年经历…

巴霍巴利王

巴霍巴利王 惊心动魄的宫廷政变&#xff0c;必然铸就新的王朝更迭。时代的婉转&#xff0c;终究选上得民心的君主。我们的故事就这样悄无声息的将你带入幽深的宫廷内院。 夜幕之中&#xff0c;面对寒冷与杀戮&#xff0c;一位身负重伤王室女人&#xff0c;抱着一个新生儿&#…

Java中的观察者设计模式-示例教程

观察者模式是行为设计模式之一 。 当您对对象的状态感兴趣并希望在发生任何更改时得到通知时&#xff0c;观察者设计模式很有用。 在观察者模式中&#xff0c;监视另一个对象状态的对象称为Observer &#xff0c;而正在监视的对象称为Subject 。 根据GoF&#xff0c;观察者模式…

IdnentiyServer-使用客户端凭据访问API

情景如下&#xff1a;一个客户端要访问一个api&#xff0c;不需要用户登录&#xff0c;但是又不想直接暴露api给外部使用&#xff0c;这时可以使用identityserver添加访问权限。 客户端通过clientid和secrect访问identitserver的Token Endpoint,获取accesstoken&#xff1b; 接…

重要·Flutter 首个预览版 发布

今天&#xff0c;InfoQ China 主办的 GMTC 全球大前端技术大会在北京举行&#xff0c;在这次大会中 Google 宣布发布 Flutter 首个预览版。这无疑让 Flutter 迈上了一个新的台阶。于此同时推出了 Flutter 社区中文资源 。可能有些同学还不了解 Flutter&#xff0c;这里再普及一…

复习做UWP时涉及到的几种加密签名相关

复习做UWP时涉及到的几种加密签名相关 原文:复习做UWP时涉及到的几种加密签名相关本人菜鸟一枚&#xff0c;大学里凭兴趣学了一点WP的皮毛&#xff0c;后来又幸运&#xff08;或者不幸&#xff09;的进了一家专注于Windows生态的公司做了一段时间的UWP。在博客园写点自己遇到的…

Java中的中介器设计模式-示例教程

中介者模式是行为设计模式之一 &#xff0c;因此它处理对象的行为。 中介器设计模式用于在系统中不同对象之间提供集中式通信介质。 根据GoF&#xff0c;中介者模式意图是&#xff1a; 通过封装不同对象集相互交互和通信的方式&#xff0c;允许松散耦合。 允许每个对象集的动作…

java gc full gc_Java中full gc什么意思?

慕雪6442864除直接调用System.gc外&#xff0c;触发Full GC执行的情况有如下四种。1. 旧生代空间不足旧生代空间只有在新生代对象转入及创建为大对象、大数组时才会出现不足的现象&#xff0c;当执行Full GC后空间仍然不足&#xff0c;则抛出如下错误&#xff1a;java.lang.Out…

axios请求超时,设置重新请求的完美解决方法

自从使用Vue2之后&#xff0c;就使用官方推荐的axios的插件来调用API&#xff0c;在使用过程中&#xff0c;如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历。 具体原因 最近公司在做一个项目, 服务端数据接口用的是Php输出的API, 有时候在…