前端实现视频一键抓拍功能

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第26天，点击查看活动详情

在一些涉及到视频、监控等功能的页面可能或有这样一个需求：抓拍，或者是截图功能,一起来看看怎么实现吧！

实现抓拍功能，本文使用的是 html2canvas ，官方文档参考： html2canvas

安装及引入

安装：

npm i html2canvas --save

引入：

import html2canvas from 'html2canvas'

注：在vue项目中，还需要安装一个依赖，若不安装就可能会发生如下报错

找不到目录下的clock.js、parse-sidx.js：

解决方案：

npm i mux.js -S 

截屏实现

1. 在页面中写好视频、截图按钮的代码。其中视频组件外层需要用一个 div 进行包裹

<template>
  <div>
    <div id="view">
      <video controls autoplay>
        <source type="video/mp4" src="./test.mp4"></source>
      </video>
    </div>
    <button @click="screenShot">开始截屏</button>
  </div>
</template>

2. 实现截屏函数

• 调用 html2canvas() 的时候涉及到2个属性：

  • useCORS：是否尝试使用CORS从服务器加载图像
  • backgroundColor：画布背景色。如果未在 DOM 中指定，则，如果设置 null 为透明色

• 执行成功后返回一个 canvas 对象，可以在dom中渲染 canvas 对象

• canvas.toDataURL()将生成的 canvas 对象转换成 base64 格式

  • 第一个参数 type ,指定转换图片的格式: image/png 、 image/jpeg 、 image/webp 等，默认为 image/png 格式
  • 第二个参数 encoderOptions 用于设置转换为 base64 编码后图片的质量，取值范围为0-1，超出取值范围用默认值0.92代替，可省略

screenShot () {
    html2canvas(document.getElementById("view"), {
      useCORS: true,
      backgroundColor: null
    }).then((canvas) => {
      //document.body.appendChild(canvas);
      let canvasImg = canvas.toDataURL("image/png");
      this.canvasImg = canvasImg
    });
  },

3. 下载图片到本地

• 创建一个标签
• 指定下载文件名称
• 手动触发点击事件

downLoad(fileName, canvasImg) {
  var a = document.createElement("a");
  a.href = canvasImg;
  a.download = fileName;
  a.click();
},

4. 调用下载方法

点击按钮调用后即可在浏览器中下载截屏图片到本地。

this.downLoad("俺是一张截屏", canvasImg)

关于 Base64

转换为base64位编码后，图片会跟随页面的 html、css、js一起请求加载，不会再单独进行请求加载。

也可以防止由于图片路径错误导致图片加载失败的问题