一、拍照原理

• 好多人小时候应该都学过，在几张空白的纸上画同一个物体，并让物体之间稍有一些变化，然后连续快速地翻动这几张纸，它就形成了一个小动画，音视频播放器就是利用这样的原理来播放音视频文件的

• 播放器播的是非编码帧（解码后的帧），这些非编码帧就是一幅幅独立的图像

• 浏览器提供了一个非常强大的对象，称为Canvas，你可以把它想像成一块画布，你可以在上面画点、面、图形

• 拍照原理其实就是获取摄像头里面的非编码帧数据，并在Canvas上画出来

  
  

  Realtime communication with WebRTC

  Take

二、Canvas绘图

• canvas中提供了 ctx.drawImage(image, dx, dy, dWidth, dHeight) 方法进行绘图

• image：可以是一幅图片，或 HTMLVideoElement，既可以是一幅图片，也可以是一个 Video 元素

• dx, dy：图片起点的 x、y 坐标

• dWidth：图片的宽度

• dHeight：图片的高度

  void ctx.drawImage(image, dx, dy, dWidth, dHeight);

三、图片保存

• 首先，通过 Canvas 的 toDataURL 方法获得图片的 URL 地址

• 然后，创建一个标签

• 将 URL 地址放到标签中，当用户点击时就将图片下载下来

  
  

  Realtime communication with WebRTC

  Take 保存

四、实现滤镜

• 视频流中获取到照片后，你还可以通过滤镜为照片增加点特效，这样会让你的照片更加特别

• 在浏览器中对于图片的滤镜处理是通过 CSS 来控制的

• 首先在 HTML 中增加 CSS 的滤镜代码如下：

• blur：模糊度

• grayscale：灰度（黑白）

• invert：反转

• sepia：深褐色

• 当用户点击拍照时候，我们可以给canvas这个标签加上一个滤镜类命即可