哈喽哈！我是小王子今天给大家分享一波如何给视频截图并保存为file类型的文件，或者bolb类型或者base64类型或者暂时就这三种类型了。。。。。。。。。。

注意：这个方法中传入的dom只能是video的dom传入div那种不行的，div的截图放在第四点点点

一、file类型的输出之两年半

这里的参数我们传入一个dom，然后会返回给你一个file类型的对象

export function screen_shot_bolb(dom) {
  return new Promise<void>((resolve, reject) => {
    const canvas = document.createElement('canvas')
    const ctx = (canvas.getContext('2d') as CanvasRenderingContext2D) || null

    canvas.width = dom.videoWidth
    canvas.height = dom.videoHeight
    ctx.drawImage(dom, 0, 0, dom.videoWidth, dom.videoHeight)
    canvas.toBlob(
      function (blob) {
        const file = new File([blob], 'fileName', { type: 'image/png' })

        resolve(file)
      },
      'image/png',
      0.1
    )
  })
}

二、blob类型的输出之小黑子

这里的参数我们传入一个dom，然后会返回给你一个blob类型的对象

export function screen_shot_bolb(dom) {
  return new Promise<void>((resolve, reject) => {
    const canvas = document.createElement('canvas')
    const ctx = (canvas.getContext('2d') as CanvasRenderingContext2D) || null

    canvas.width = dom.videoWidth
    canvas.height = dom.videoHeight
    ctx.drawImage(dom, 0, 0, dom.videoWidth, dom.videoHeight)
    canvas.toBlob(
      function (blob) {
        resolve(blob)
      },
      'image/png',
      0.1
    )
  })
}

三、base64类型的输出之油饼

这里的参数我们传入一个dom，然后会返回给你一个照片的base64的字符串

export function screen_shot_bolb(dom) {
  return new Promise<void>((resolve, reject) => {
    const canvas = document.createElement('canvas')
    const ctx = (canvas.getContext('2d') as CanvasRenderingContext2D) || null

    canvas.width = dom.videoWidth
    canvas.height = dom.videoHeight
    ctx.drawImage(dom, 0, 0, dom.videoWidth, dom.videoHeight)
   const imgBase = canvas.toDataURL('image/png')
  //这里返回base64字符串
    resolve(imgBase)
  })
}

四、div的内容截图的实现的方式哈哈哈（插件版本）

使用dom-to-image

dom-to-image是一个js库，可以将任意dom节点转换为矢量(SVG)或光栅(PNG或JPEG)图像。

安装

npm install dom-to-image -S

加载之可以只在使用页面引入

import domtoimage from 'dom-to-image'

使用之怎么用

以下传入的node是你需要截图的dom哦

1.获取PNG图像base64编码的数据URL并立即显示：

domtoimage.toPng(node)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

2.获取JPEG图像base64编码的数据URL并立即显示：

domtoimage.toJpeg(node)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

3. 获取图像blob：

domtoimage.toBlob(node)
    .then(function (blob) { 
        console.log('blob', blob)
    });

第二个参数可以传入option

Name	类型	Default	Description
filter	Function	——	以DOM节点为参数的函数。如果传递的节点应包含在输出中，则应返回true(排除节点意味着也排除其子节点)
bgcolor	String	——	背景色的字符串值，任何有效的CSS颜色值。
height	Number	——	渲染前应用于节点的高度（以像素为单位）。
width	Number	——	渲染前应用于节点的宽度（以像素为单位）。
style	Object	——	object对象，其属性在渲染之前要复制到节点的样式中。
quality	Number	1.0	介于0和1之间的数字，表示JPEG图像的图像质量(例如0.92=>92%)。默认值为1.0（100%）
cacheBust	Boolean	false	设置为true可将当前时间作为查询字符串附加到URL请求以启用清除缓存。
imagePlaceholder	Boolean	undefined	获取图片失败时使用图片的数据URL作为占位符。默认为未定义，并将在失败的图像上引发错误。

官方链接

github.com/tsayen/dom-…

这个截图是我现在用的，也许现在有更好的截图，但是能用就行不是么，哈哈哈