原生js实现视频截图 -ag凯发k8国际

视频截图效果预览

利用canvas进行截图

要用原生js实现视频截图，可以利用canvas的绘图功能 ctx.drawimage，只需要获取到视频标签，就可以通过drawimage把视频当前帧图像绘制在canvas画布上。

const video = document.queryselector('video')
const canvas = document.createelement('canvas')
const w = video.videowidth
const h = video.videoheight
canvas.width = w
canvas.height = h
const ctx = canvas.getcontext('2d')
ctx.drawimage(video, 0, 0, w, h)

接下来，需要把画布转化为图片，canvas提供了两个2d转换为图片的方法：canvas.todata和canvas.toblob()

canvas.todata方法

todataurl可以把图片转换成base64格式的图片，是一个同步方法，使用很简单，在上面已经绘制好画布的基础上，只需要下面一行代码就可以获取到当前视频帧的截图了

const imageurl = canvas.todata
console.log(imageurl)

可以看到，它最终生成了一个很长字符串的base64图片地址。

canvas.toblob(callback, mimetype, qualityargument)方法

这个方法相比上一个方法的优点是它是异步的，所以有一个callback回调，这个callback回调方法默认的第一个参数就是转换好的blob文件信息，本文也想重点介绍这种方法的使用。

先说明一下这个方法的三个参数：

参数	类型	是否必传	说明
callback	function	是	toblob()方法执行成功后的回调方法，支持一个参数，表示当前转换的blob对象
mimetype	string	否	表示需要转换的图像的mimetype类型。默认值是image/png，还可以是image/jpeg，甚至image/webp（前提浏览器支持）等
qualityargument	number	否	表示转换的图片质量。范围是0到1。由于canvas的toblob()方法转png是无损的，因此，此参数默认是没有效的，除非，指定图片mimetype是image/jpeg或者image/webp，此时默认压缩值是0.92

使用写法如下：

canvas.toblob((blob) => {
  console.log(blob)
}, 'image/png', 0.92)

可以看到方法执行得到的是当前转换的blob对象

那么剩下的就是要将此blob对象进一步转化为可供img显示的图片地址。

将blob对象转化为图片地址

下面介绍三种方法进行转化：

方式一： 通过url.createobject方法将blob转化为url

canvas.toblob((blob) => {
  const imageurl = url.createobject
  console.log(1, imageurl)
}, 'image/jpeg', 1)

如下图所示，转化得到的是一个bold流的图片地址。

方式二： 通过filereader将blob转化为dataurl

canvas.toblob((blob) => {
  const reader = new filereader()
  reader.readasdata
  reader.onload = () => {
    const imageurl = reader.result
    console.log(2, imageurl)
  }
}, 'image/webp', 1)

如下图所示，转化得到的是一个base64的图片地址。

方式三： 通过ajax将blob上传到服务器

canvas.toblob((blob) => {
    const formdata = new formdata()
    formdata.append('file', blob) // 这里的'file'是接口接收参数的字段名，需要根据实际情况改变
    const xhr = new xmlhttprequest()
    xhr.onload = () => {
      const imageurl = json.parse(xhr.responsetext).data // 接口回调参数，需要根据实际情况处理
      console.log(3, imageurl)
    }
    xhr.open('post', '/api/upload', true) // '/api/upload'是上传接口，需要根据实际情况改变
    xhr.send(formdata)
}, 'image/webp', 1)

由此就会将图片上传到你的文件服务器里，最终可以得到一个你自己文件服务器下对应的图片地址。

toblob()方法的兼容

首先，toblob()方法ie9浏览器不支持，因为blob数据格式ie10 才支持。

然后，对于ie浏览器，toblob()的兼容性有些奇怪，ie10浏览器支持ms私有前缀的toblob()方法，完整方法名称是mstoblob()。而ie11 ，toblob()方法却不支持。

但是，我们可以基于todata方法进行polyfill，性能相对会差一些，javascript代码如下：

if (!htmlcanvaselement.prototype.toblob) {
  object.defineproperty(htmlcanvaselement.prototype, 'toblob', {
    value: function (callback, type, quality) {
      var canvas = this
      settimeout(function() {
        var binstr = atob( canvas.todata.split(',')[1] )
        var len = binstr.length
        var arr = new uint8array(len)
        for (var i = 0; i < len; i  ) {
          arr[i] = binstr.charcodeat(i)
        }
        callback(new blob([arr], { type: type || 'image/png' }))
      })
    }
  })
}

注意事项

使用外部链接播放视频的话需要在视频标签上设置允许跨域的处理，添加属性crossorigin='anonymous'即可，

或者，在js里处理

const video = document.queryselector(".videotag")
video.setattribute('crossorigin', 'anonymous')
video.load()

否则会报以下错误：

完整封装示例

最后，给出一个利用toblob进行视频截图，最终获取base64图片地址的封装方法，代码示例如下：

function getbase64byvideo(video) {
    const canvas = document.createelement("canvas")
    const w = video.videowidth
    const h = video.videoheight
    canvas.width = w
    canvas.height = h
    return new promise((resolve, reject) => { // 由于toblob方法是异步的，所以这里用promise
      const ctx = canvas.getcontext('2d')
      ctx.drawimage(video, 0, 0, w, h)
      canvas.toblob((blob) => {
        // 通过filereader将blob转化为dataurl
        const reader = new filereader()
        reader.readasdata
        reader.onload = () => {
          const imageurl = reader.result
          resolve(imageurl)
        }
      }, 'image/webp', 1) // 根据需要可以自行配置这里的两个参数
    })
}

调用方法：

const videotag = document.queryselector(".videotag")
const dataurl = await getbase64byvideo(videotag)

总结

以上是ag凯发k8国际为你收集整理的原生js实现视频截图的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得ag凯发k8国际网站内容还不错，欢迎将ag凯发k8国际推荐给好友。