video标签截取当前帧图

最新推荐文章于 2024-07-17 15:18:17 发布

Eighteen Z

最新推荐文章于 2024-07-17 15:18:17 发布

阅读量1.4w

点赞数 6

分类专栏： javascript 文章标签： video 截图 canvas

本文为博主原创文章，未经博主允许不得转载！转载请注明出处。[进入个人博客 Eighteen Blog](https://www.zsfmyz.top)

本文链接：https://blog.csdn.net/lunhui1994_/article/details/81190373

版权

javascript 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

查看原文及demo

也是工作中的一个需求，需要在视频播放中截取当前帧的图片用来当做海报图或者封面图。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<video id="video" controls="controls">
    <source src="../videos/小李子.mp4" />
</video>
<button id="capture">Capture</button>
<div id="output"></div>

<script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
<script>
    (function() {
        "use strict";
        var video, $output;
        var scale = 0.25;
        var initialize = function() {
            $output = $("#output");
            video = $("#video").get(0);
            $("#capture").click(captureImage);
        };
        var captureImage = function() {
            var canvas = document.createElement("canvas");
            canvas.width = video.videoWidth * scale;
            canvas.height = video.videoHeight * scale;
            canvas.getContext('2d')
                .drawImage(video, 0, 0, canvas.width, canvas.height);
            var img = document.createElement("img");
            img.src = canvas.toDataURL('image/png');
            $output.prepend(img);
        };
        $(initialize);
    }());
</script>
</body>
</html>

主要的方法就是captureImage ，video是当前需要截取的视频所在的标签。

大家可以用webstrom内置的服务器进行测试。

使用，谷歌浏览器需要一个服务器环境，否则canvas的toDataURL方法会报错。该方法是将其转换为base64格式的图片地址。