用原生JS和html5进行视频截图并保存到本地

最新推荐文章于 2022-06-04 17:07:33 发布

weixin_30367945

最新推荐文章于 2022-06-04 17:07:33 发布

阅读量543

点赞数

原文链接：http://www.cnblogs.com/xieshuxin/p/6731637.html

版权

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Video视频截图</title>
    <style>
        body, h1, h2, p { margin:0; padding:0; }
        html { font-family:"微软雅黑"; background-color:#e9e9e9; }
        h1 { font-size:24px; font-weight:normal; padding:20px 0; text-align:center; color:#858585; background:-webkit-linear-gradient(rgba(0, 186, 255, .8), rgba(0, 130, 255, .8)); border-bottom:1px solid #009cff; color:#FFF; margin-bottom:50px; }
        video { display:block; margin:0 auto 30px auto; }
        canvas { display:none; }
        button { display:block; width:480px; height:50px; font-size:24px; margin:0 auto; border:1px solid #0085ff; color:#FFF; background:-webkit-linear-gradient(rgba(80, 170, 255, .8), rgba(0, 132, 255, .8)); cursor:pointer; border-radius:5px; margin-bottom:30px; }
        button:hover { background:-webkit-linear-gradient(rgba(0, 132, 255, .8), rgba(80, 170, 255, .8)); border-color:#1988ff; }
        h2, p { width:480px; margin:0 auto; color:#858585; }
        h2 { margin-bottom:1em; font-size:18px; }
        p { font-size:14px; line-height:24px; }
    </style>
    <script>
        window.onload = function () {
            var button = document.querySelectorAll('.screen')[0];
            var video = document.querySelectorAll('video')[0];
            var canvas = document.querySelectorAll('canvas')[0];
            var ctx = canvas.getContext('2d');
            var width = 480;
            var height = 270;

            canvas.width = width;
            canvas.height = height;
            video.src = 'movie.mp4?t=' + new Date().getTime();
            video.width = width;
            video.height = height;
            video.autoplay = true;
            video.loop = true;
            button.onclick = function () {
                ctx.drawImage(video, 0, 0, width, height);  // 将video中的数据绘制到canvas里
                saveImage(canvas, 'screen_' + new Date().getTime() + '.png');  // 存储图片到本地
            };
        };
        function saveImage (canvas, filename) {
            var image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
            saveFile(image, filename || 'file_' + new Date().getTime() + '.png');
        }
        function saveFile(data, filename) {
            save_link.href = data;
            save_link.download = filename;

            var event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            save_link.dispatchEvent(event);
        }
    </script>
</head>
<body>
<h1>Video视频截图</h1>
<video>仅支持H264格式MP4</video>
<canvas></canvas>
<button class="screen">截图</button>
<h2>当前，video 元素支持三种视频格式：</h2>
<p>Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件</p>
<p>MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件</p>
<p>WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件</p>
</body>
</html>

转载于:https://www.cnblogs.com/xieshuxin/p/6731637.html

weixin_30367945

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
用原生JS和html5进行视频截图并保存到本地

<!doctype html><html><head> <meta charset="utf-8"> <title>Video视频截图</title> <style> body, h1, h2, p { margin:0; padding:0; } ...
复制链接

扫一扫