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

妖狐艹你老母 2023-07-04 14:08 4阅读 0赞

# 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>

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

#### canvas.toDataURL方法 ####

https://blog.csdn.net/XuM222222/article/details/82667084

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppX29ubHk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200211183419547.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppX29ubHk=,size_16,color_FFFFFF,t_70