video标签截取当前帧图并下载到本地

最新推荐文章于 2024-03-06 13:53:41 发布

xpanzi

最新推荐文章于 2024-03-06 13:53:41 发布

阅读量964

点赞数 1

文章标签： canvas javascript html5

本文链接：https://blog.csdn.net/panzi_only/article/details/104267237

版权

video标签截取当前帧图并下载到本地

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>video抓图</title>
    <style type="text/css">
        #captures {
            border: 1px solid #000;
            margin: 10px 0;
        }
    </style>
</head>

<body>
    <video id="video" controls="controls">
    <source src="5.mp4" />
  </video>
    <button id="captureBtn">抓图</button>
    <div id="captures"></div>

    <script>
        'use strict';
        let scale = 0.3;
        let video = document.getElementById('video');
        document.getElementById('captureBtn').onclick = function() {
            // 创建canvas
            let canvas = document.createElement('canvas');
            canvas.width = video.offsetWidth * scale;
            canvas.height = video.offsetHeight * scale;
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

            // 显示抓图
            let img = document.createElement('img');
            img.src = canvas.toDataURL('image/png');
            document.getElementById('captures').prepend(img);

            // 下载抓图
            let a = document.createElement('a');
            let event = new MouseEvent('click');
            a.download = '下载图片命名'
            a.href = canvas.toDataURL('image/png');
            a.dispatchEvent(event)
        }
    </script>
</body>

</html>

展示效果图：
在这里插入图片描述
使用，谷歌浏览器需要一个服务器环境，否则canvas的toDataURL方法会报错。可以用VScode编辑器下载插件的方式，也可以使用其他方式。
VScode下载本地服务器插件：https://jingyan.baidu.com/article/9989c746e671e6f648ecfea7.html