js代码:视频文件和js代码最好为同一服务器下，不然容易出错

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
    <video id="video" controls="controls" width="400" height="300" preload="auto">
        <source src="./upload/63534e2688f81.mp4">
    </video>
    <br>
    <br> 视频第一帧图片：
    <div id="output"></div>
    <script type="text/javascript">
        (function() {
            var video, output;
            var scale = 0.8;
            var initialize = function() {
                output = document.getElementById("output");
                video = document.getElementById("video");
                video.addEventListener('loadeddata', 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");
                img.width = 400;
                img.height = 300;
                console.log(img);
                output.appendChild(img);
            };
            initialize();
        })();
    </script>
</body>
</html>

php代码：将js获取到的base64数据转为文件

file_put_contents('./aa.jpg',base64_decode(explode(',',$base64)[1]));

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

js 转视频第一帧为base64图片，用php转为图片文件

2022-10-22 14:45:43