上传视频截取第一贞转图片_视频上传切首图-CSDN博客

本文链接：https://blog.csdn.net/u011301203/article/details/120295190

本文介绍如何使用HTML5技术从上传的视频中截取第一帧并转换为图片。通过JavaScript处理视频文件，获取视频的第一帧画面，然后转换成图像格式。

摘要由CSDN通过智能技术生成

<!--
 * @Author: Mr.xie
 * @Date: 2021-09-13 19:22:51
 * @LastEditTime: 2021-09-14 19:59:18
 * @LastEditors: Mr.xie
 * @Description: 
 * @FilePath: /vido/updateVide.html
 * 可以输入预定的版权声明、个性签名、空行等
-->

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>上传视频截取首贞作为头图</title>
  <style>
    .fat {
      position: absolute;
      /* top: -1100px; */
    }
  </style>
</head>

<body>


  <div class="fat">

    <video src="" id="video" style="width: 200px;height: 400px;" preload oncanplay="myFunction()"></video>
    <canvas id="myCanvas" width="200" height="400" style="border:1px solid #d3d3d3;">
    </canvas>
    <input class="form-control" type="file" style="height:auto;" id="videoInput" name="video" />
  </div>

  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script>

    // hTML5实现表单内的上传文件框，上传前预览视频，刷新预览video，使用HTML5 的File API,
    // 目的：视频上传 截取 视频 第一贞作为 首图


    let video = document.querySelector('#video');
    let videoInput = document.querySelector('#videoInput');

    // 监听input上传视频
    videoInput.addEventListener('change', function () {

      // 根据上传的视频file文件 回现 给video
      var objUrl = getObjectURL(this.files[0]);
      video.setAttribute('src', objUrl)

      // 监听video 读取完成
      video.addEventListener('loadeddata', function (e) {
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        // 创建画布 读写img 生成图片base 
        ctx.drawImage(video, 0, 0, 200, 400);
        let img = document.createElement('img');
        img.src = c.toDataURL('image/png');
        document.querySelector('.fat').appendChild(img)
      })
    })

    function myFunction() {
      console.log('视频加载完成')
    }

    // base 转 file
    function base64toFile(dataurl, filename = "file") {
      let arr = dataurl.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let suffix = mime.split("/")[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], `${filename}.${suffix}`, {
        type: mime,
      });
    }

    // 图片上传 file类型 需要用 formData方式
    function uploadFileImage(file) {
      var form = new FormData();
      form.append("file", file);
      form.append("filename", file.name);
      uploadFileImage(form).then((res) => {
        console.log(res);
      });
    }


    // jq方式
    $('#videoInput').change(function () {
      console.log(this.files[0])
      var objUrl = getObjectURL(this.files[0]);
      if (objUrl) {
        $("#video").attr("src", objUrl);

        var video = document.getElementById("video");
        video.addEventListener('loadeddata', function (e) {
          var c = document.getElementById("myCanvas");
          var ctx = c.getContext("2d");

          setTimeout(function () {
            ctx.drawImage(video, 0, 0, 200, 400);
            let img = document.createElement('img');
            img.src = c.toDataURL('image/png');
            document.querySelector('body').appendChild(img)
            console.log(img)
          }, 100)
        })
      }
    });

    //建立一个可存取到该file的url
    function getObjectURL(file) {
      var url = null;
      if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    }




  </script>

</body>

</html>