专栏首页Modeng的专栏Web实战:如何进行视频截图

Web实战:如何进行视频截图

由于前段时间事情比较多,文章的更新就给耽误了,项目需要上线经常加班,再加上自己的一些学习计划,一晃就是一个多月,没有更新文章。

有人会问,登哥你怎么不搬运和转载别人的文章呢?,这样公众号就不会断更了,这个问题问的好,熟悉我的读者应该会发现,我的文章全都是原创文章。

刚开始运行公众号时,可能转载过一两篇文章,从那以后我就坚持原创了。不在进行转载,这其实和我公众号的定位有关系。

我写文章的目的很简单,不是为了涨粉,更多的是为了个人成长,因为你在写文章的同时其实就是在自我学习的过程,这个过程要比你单纯的看知识点要吸收的更有效率。

当然了,在这个过程中如果能收获认可自己的读者,那是一件很开心的事情。如果没有,我也没有损失什么。一直按照我的节凑进行就好。

所以从这个角度来说,转载可能对我的意义就不大了。

最近在自学 Python 后面除了给大家分享前端的相关知识以外,还会给大家分享更多有意思东西。大家以后可以多关注关注。

今天给大家分享一个实战技巧,最近在项目中使用到的,需求是在播放视频的时候可以进行截图。

我们都知道,网页中大多都是用 <video>标签进行视频的播放。那如何才能实现视频的截图呢?

这里我们用到了 canvas 的相关功能。我们都知道,canvas 是伴随着 HTML5 出现的,它具有强大的绘图能力。很多可视化库都是利用到了 canvas。

因为 canvas 具有对图像的操作能力,今天我们就用它来实现视频的截图操作,之前对 canvas 有过一段时间的学习,如果想学习 canvas 的同学,这里推荐慕课网上的入门课程。

这里主要用到两个方法:

drawImage

drawImage 方法是在画布上绘制图像、画布或视频。 语法:

ctx.drawImage(image, dx, dy); ctx.drawImage(image, dx, dy, dWidth, dHeight); ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); 三种用法,本文不做过多描述,有兴趣的可以查看相关文档。其中的参数 image:允许任何的图像源,所以我们就可以利用这个特性,对 video 进行操作。更多可查看相关文档

toDataURL

toDataURL 方法可以返回 Canvas 图像对应的 data URI,也就是平常我们所说的base64地址。 格式如下: data:[][;base64],

实现

利用上述方法我们很容易就能实现视频的截图,主要分为三步:

使用 drawImage 方法在画布上绘制图像。

使用 toDataURL 方法获取图像的地址。

创建一个img标签,赋值给 src。

  <video id="video" src="./flower.webm" width="300" controls></video>
  <button onclick="captureVideo()">截图</button>
  <script>
    let video = document.getElementById("video");
    let canvas = document.createElement("canvas");
    let img = document.createElement("img");
    let ctx = canvas.getContext("2d");
    function captureVideo() {
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      img.src = canvas.toDataURL();
      document.body.append(img);
    }

到这里就大功告成了,一起来看效果吧。

最后,如果觉得文章不错,对你有所启发,点赞是一种态度也是一种认可。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Canvas学习系列一:初识canvas

    版权声明:本文为原创文章发布于公众号:Modeng , 你可以随意转载但请务必注明出处!!!关注微信公众号:Modeng,回复 「前端书籍」上百本经...

    六小登登
  • Canvas学习系列二:Canvas的坐标系统

    版权声明:本文为原创文章发布于公众号:Modeng , 你可以随意转载但请务必注明出处!!! https://blog.csdn.net/qq_321352...

    六小登登
  • Element组件引发的Vue中mixins使用,写出高复用组件

    版权声明:本文为原创文章首发于公众号:六小登登 , 你可以随意转载但请务必注明出处!!!关注微信公众...

    六小登登
  • 移动搜索三国杀,谁能代表未来趋势?

    伴随着各类APP应用的崛起,移动搜索使用频率正在降低,移动入口的作用地位也正在弱化。不过,移动搜索领域依旧不乏激烈的竞争,虽然没有浓厚的火药味,实际上暗中的较量...

    罗超频道
  • Canvas 图片绕边旋转的小动画

    /** * 图片绕边旋转的小动画 */ function initDemo10() { var canvas = document.getEleme...

    就只是小茗
  • 碎片化 | 第四阶段-52-Hibernate特性-视频

    如清晰度低,可转PC网页观看高清版本: http://v.qq.com/x/page/r056899qkz7.html Hibernate特性 延迟加载 做一...

    码神联盟
  • 碎片化 | 第四阶段-53-hibernate持久化session问题解决-视频

    如清晰度低,可转PC网页观看高清版本: http://v.qq.com/x/page/h0568t95mz4.html Hibernate特性 延迟加载 做一...

    码神联盟
  • 移动开发之浅析cocos2d-x的中文支持问题

      题记:这阵子一直在学习cocos2d-x,其跨平台的特性确实让人舒爽,引擎的框架概念也很成熟,虽然相应的第三方工具略显单薄,但也无愧是一件移动开发的利器啊,...

    用户2615200
  • 自动化编排工具:Terraform 安装与使用采坑

    Terraform 是一种安全有效地构建、更改和版本控制基础设施的工具(基础架构自动化的编排工具)。Terraform 几乎可以支持所有市面上能见到的云服务。具...

    DevOps时代
  • 【原创】国产分析工具谁更牛?百度统计和CNZZ实际使用效果评测

    近年,我一直服务于中小企业运营,网站分析大多直接使用市面上的第三方统计软件。最早使用51la和量子恒道,后来使用GoogleAnalytics、CNZZ、百度统...

    iCDO互联网数据官

扫码关注云+社区

领取腾讯云代金券