原生JS实现视频截图

这篇具有很好参考价值的文章主要介绍了原生JS实现视频截图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

视频截图效果预览

原生JS实现视频截图

利用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.toDataURL()canvas.toBlob()

canvas.toDataURL(mimeType, qualityArgument)方法

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

const imageUrl = canvas.toDataURL("image/png")
console.log(imageUrl)

原生JS实现视频截图

可以看到,它最终生成了一个很长字符串的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对象
原生JS实现视频截图

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

将Blob对象转化为图片地址

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

方式一: 通过URL.createObjectURL()方法将Blob转化为URL

canvas.toBlob((blob) => {
  const imageUrl = URL.createObjectURL(blob)
  console.log(1, imageUrl)
}, 'image/jpeg', 1)

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

原生JS实现视频截图

方式二: 通过FileReader将Blob转化为DataURL

canvas.toBlob((blob) => {
  const reader = new FileReader()
  reader.readAsDataURL(blob)
  reader.onload = () => {
    const imageUrl = reader.result
    console.log(2, imageUrl)
  }
}, 'image/webp', 1)

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

原生JS实现视频截图

方式三: 通过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()方法却不支持。

但是,我们可以基于toDataURL()方法进行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.toDataURL(type, quality).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'即可,

<video className="videoTag" crossOrigin='anonymous' controls>
     <source src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4" type='video/mp4' />
</video>

或者,在js里处理

const video = document.querySelector(".videoTag")
video.setAttribute('crossOrigin', 'anonymous')
video.load()

否则会报以下错误:
原生JS实现视频截图

完整封装示例

最后,给出一个利用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.readAsDataURL(blob)
        reader.onload = () => {
          const imageUrl = reader.result
          resolve(imageUrl)
        }
      }, 'image/webp', 1) // 根据需要可以自行配置这里的两个参数
    })
}

调用方法:文章来源地址https://www.toymoban.com/news/detail-746113.html

const videoTag = document.querySelector(".videoTag")
const dataUrl = await getBase64ByVideo(videoTag)

到了这里,关于原生JS实现视频截图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 原生js实现复选框(全选/全不选/反选)效果【含完整代码】

    1、勾选后,可以获取到所勾选的值组成的数组,并展示到页面; 2、全部勾选,以及取消勾选时,要相应地更新全选框的状态及文字显示; 3、点击反选,将所有选项的选择状态置换,并相应改变全选框的状态; 定义一个数组 checkValues ,存放用户所勾选的内容。 再定义一个

    2023年04月13日
    浏览(48)
  • 原生js实现简单的视频播放控件

    HTML 5 视频/音频参考手册 https://www.w3school.com.cn/html5/html5_ref_audio_video_dom.asp 本文主要依靠HTML 5 api ,所有用的HTML 5 api 的使用和各项信息请参考以上链接! 如果你打算参考本文,这里所用的视频什么的请自行准备。这里仅建议初学者参考。 因为主要依靠HTML 5的api,所有也没什么

    2024年02月02日
    浏览(48)
  • 原生js实现网页淘宝产品展示效果,鼠标移入小图展示对应大图(事件委托、事件传播、冒泡机制)【含完整代码】

    淘宝网页产品展示模块如下: 当鼠标移入小图,在上方会相应地展示大图 当鼠标移入小图,在上方会相应地展示大图;且当鼠标移出,图片停留在移入时显示的图片,不会改变。 本文实现效果如下(鼠标移入即改变,不用点击): 定义图片列表,为列表添加鼠标移入事件

    2024年02月07日
    浏览(42)
  • JS PC端调用摄像头录视频截图上传文件

    创建 Catcher 类 直接在HTML文件中调用

    2024年02月10日
    浏览(52)
  • 【vue3】js + css 实现 视频框选放大:局部细节放大、放大镜效果

    实现鼠标框选区域放大显示。 需求1:放大 按住鼠标左键不放 ——》向右侧拖动,框选出需要放大的区域后 ——》松开鼠标 ——》框选区域放大显示 需求2:还原 按住鼠标左键不放 ——》向左侧拖动,框选出随意大小的区域后 ——》松开鼠标 ——》视图显示大小还原 需求

    2024年02月03日
    浏览(56)
  • 【Vue】fabricjs 实现局部截图及el-image-viewer大图预览

    效果图: 再结合el-image-viewer可以实现大图预览局部图的效果。

    2024年02月22日
    浏览(53)
  • video.js 视频截图、录制、自定义全屏,hls、flv、mp4视频播放

    功能 video.js内嵌 截图、录制功能 (图片、视频会下载到本地) 自定义全屏 播放hls、flv、mp4 功能集合成Vue组件 参考 video.js components RecordRTC demo video 截图并下载 video.js添加自定义组件的方法 使用RecordRTC对video视频进行录制 播放hls、flv、mp4 安装 引入 html 引入组件(视频地址使

    2023年04月08日
    浏览(46)
  • video全屏操作栏自定义样式&&js 指定元素全屏&&视频截图下载

    目录 1. 页面结构 2. 全屏方法 3. 截图方法 4. 样式代码 5. 效果截图 6. 附上完整代码 最近遇到的需求就是重新video标签的控制栏的样式,包括进度条、音量、倍速、全屏等样式,在正常状态下,可以将原生样式隐藏掉自定义新的控制栏元素定位上去,但是全屏后样式失效,出现

    2024年02月12日
    浏览(45)
  • 前端Vue自定义轮播图视频播放组件 仿京东商品详情轮播图视频Video播放效果 可图片预览

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月15日
    浏览(54)
  • 记录--使用 JS 实现基本的截图功能

    在开始动手之前,分析一下整个功能的实现过程: 根据图片大小创建 canvas1 画布,并将原图片直接定位在 canvas1 上; 在画布上添加一个蒙层,以区分当前 canvas 图像是被裁剪的原图像; 在蒙层上方,对裁剪区域(鼠标移动形成的矩形范围)再次进行图像绘制; 获取裁剪区域

    2024年02月13日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包