Day19 - 摄像、拍照,滤镜中文指南
作者:©Mrlin(史密斯林)
简介:学习记录,用于记录在CSDN课程中的学习内容。
课程:30天完成30个JS原生开发项目挑战视频教程。JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。
效果如下
JS30天第19天挑战的是如何调用摄像头录像、播放,如何捕捉视频将其绘制canvas
,还有拍照,以及滤镜的制作。
运行项目
- 通过
npm install
安装依赖包 - 通过
npm start
启动服务器 - 浏览器直接访问
http://localhost:3000
1 | liyuechun:19 - Webcam Fun yuechunli$ pwd |
主要思路
- 获取到浏览器的摄像头的影像
- 将影像的记录导出到canvas中
- 通过获取canvas中的图片信息,对图片添加滤镜
Browsersync
项目结构
了解Browsersync
省时的浏览器同步测试工具,Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是Browsersync可以同时在PC、平板、手机
等设备下进项调试。您可以想象一下:“假设您的桌子上有pc、ipad、iphone、android等设备,同时打开了您需要调试的页面,当您使用browsersync后,您的任何一次代码保存,以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师,使用它将提高您30%的工作效率。
有了它,您不用在多个浏览器、多个设备间来回切换,频繁的刷新页面。更神奇的是您在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器和设备中,这一切还可以通过可视化界面来控制。
获取影像
1 | function getVideo(){ |
- MediaDevices.getUserMedia()
MediaDevices.getUserMedia()
方法提示用户允许使用一个视频和/或一个音频输入设备,例如相机或屏幕共享和/或麦克风。如果用户给予许可,就返回一个Promise
对象,MediaStream
对象作为此Promise
对象的Resolved
[成功]状态的回调函数参数,相应的,如果用户拒绝了许可,或者没有媒体可用的情况下,PermissionDeniedError
或者NotFoundError
作为此Promise
的Rejected
[失败]状态的回调函数参数。注意,由于用户不会被要求必须作出允许或者拒绝的选择,所以返回的Promise
对象可能既不会触发resolve
也不会触发reject
。
- URL.createObjectURL()。
URL.createObjectURL()
静态方法会创建一个DOMString
,其中包含一个表示参数中给出的对象的URL
。这个URL
的生命周期和创建它的窗口中的document
绑定。这个新的URL
对象表示指定的File
对象或Blob
对象。
canvas绘图
1 | function printToCanvas(){ |
ctx.drawImage()
它能够将当前的视频流(video)中的一帧画在canvas中。
-
ctx.getImageData()
返回一个ImageData对象,用来描述canvas区域隐含的像素数据,这个区域通过矩形表示,起始点为(sx, sy)、宽为sw、高为sh。 -
ctx.putImageData()
:该方法是 Canvas 2D API 将数据从已有的 ImageData 对象绘制到位图的方法。 如果提供了脏矩形,只能绘制矩形的像素。 imagedata信息
imagedata中有大量的数据,其中分别代表了图片的颜色信息,分别为red,green,blue,alpha的值,因此我们可以同添加自定义滤镜,通过改变颜色的rgba的值,控制页面的效果。
摄像记录导出到canvas中
1 | function takePhoto(){ |
- 在没次点击照相的时候,都要求播一遍音效,并且为了模拟现实情况,我们在用户点击时,设置当前的播放时间为0,再播放音效。
- canvas.toDataURL(‘image/jpeg’);方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型,默认为 PNG 格式。图片的分辨率为96dpi。
- 接下来新建一个a元素,设置其href的值为data。在插入在文档中。实现截图成功的效果。
自定义滤镜
1 | // 红色特效滤镜 |
这部分主要定义了三个滤镜,由于我们通过ctx.getImageData
可以获取到页面颜色的rgba的值,因此我们添加滤镜的原理也是这样,通过循环改变一张图片中的所有rgba的值即可。