canvas快速实现视频的一键截图功能

视频的一键截图功能，在现在非常常见，但是，你知道怎么做到的吗？？

 

简单粗暴的原理 - 利用canvas的2d图进行绘制视频中的某一帧在进行保存

 

html:

<video
      style="width:500px;height:500px;"
      id="videoElement1"
      controls="controls"
      autoplay
    >
      <!-- <source :src="require('../../assets/vedio/mov_bbb.mp4')" type="video/mp4"> -->
      <source src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4">
    </video>
    
    <button @click="toCut">截图</button>
    <canvas id="nowC" style="width:500px;height:500px;"></canvas>

 

js

    toCut() {
      var video = document.querySelector("#videoElement1"); //获取前台要截图的video对象，
      var canvas = document.querySelector("#nowC"); //获取前台的canvas对象，用于作图
      var ctx = canvas.getContext("2d"); //设置canvas绘制2d图，
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height); //将video视频绘制到canvas中
      var images = canvas.toDataURL("image/png"); //canvas的api中的toDataURL()保存图像
      this.downloadImage(images);
    },

    //下载图片
    downloadImage(url) {
      var a = document.createElement("a");  //创造a标签进行下载
      a.setAttribute("href", url);
      a.setAttribute("target", "_blank");
      a.setAttribute("id", "vid");
      a.setAttribute("download", "image" + + new Date() + ".png");
      let canSupportDownload = "download" in a;
      // 防止反复添加
      if (document.getElementById("vid")) {
        document.body.removeChild(document.getElementById("vid"));
      }
       
      //添加a标签并手动触发点击事件下载
      if (canSupportDownload) {
        document.body.appendChild(a);
        a.click();
      } else {
        alert("不支持下载");
        window.open(url);
      }
    }

   

里面用到的知识点，是canvas的一些方法

    作为一个懒的码字的孩子，我直接上截图了

 

  toDataURL:

注意：请求视频如果是不同源，会存在跨域问题，所以需要解决跨域问题

canvas的相关跨域的解决，可以看一下这篇文章：https://www.zhangxinxu.com/wordpress/2018/02/crossorigin-canvas-getimagedata-cors/

 

 

kscreenshot插件

    利用kscreenshot这个插件也可以实现截图功能，

    先看看他的截图效果图 - 单纯的截图，功能还是很多 ，但由于自身bug的存在并不能实现对视频的截图，截图视频会变白

    

    使用的人提出了很多的问题，像下面这些

     

 

  由于该插件还存在很多问题，不推荐在项目中使用，但是不能否认，在某些项目中不会出现问题也是使用，所以还是讲一个怎么使用

 

第一步：下载安装

npm  install kscreenshot --save

  在安装时候，发现会有很多问题，有时候会覆盖掉项目原有的安装，所以安装的时候需要注意一下

 

第二步：使用，引入，在data初始换中实例化，切图

<script>
import kscreenshot  from 'kscreenshot'
export default {
  data() {
    return {
      //65为键盘A的keyCode
      keyObj: new kscreenshot({
       key: 65,
      })
    };
  },
  created() {},
  methods: {
    toCut(){
      this.keyObj.startScreenShot()
    }
 }
}
</script>

 

简单的就可以完成了，关于他的api，推荐大家自行看文档

https://gitee.com/kejiacheng/kscreenshot?utm_source=aladin&utm_campaign=repo