h5利用canvas截取video视频

最新推荐文章于 2024-06-06 15:19:01 发布

碑无名

最新推荐文章于 2024-06-06 15:19:01 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/deep_zhuheihei/article/details/125896335

版权

前端专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!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>Document</title>
  </head>
  <body>
    <canvas
      class="canvas"
      canvas-id="Canvas"
      id="Canvas"
      type="2d"
      style="position: fixed; top: 0; left: -100%"
      width="500"
      height="500"
    ></canvas>
    <video id="video" width="320" height="240" controls>
      <source src="./1.mp4" type="video/mp4" />
      您的浏览器不支持 HTML5 video 标签。
    </video>
    <img class="img" src="" alt="" />
    <button class="btn">截屏</button>
    <script>
      const video = document.getElementById("video");
      const canvas = document.createElement("canvas");
      const canvasCtx = canvas.getContext("2d");
      const btn = document.querySelector(".btn");
      const img = document.querySelector(".img");
      btn.addEventListener("click", function () {
        const ratio = window.devicePixelRatio || 1;
        canvasCtx.scale(ratio, ratio);
        console.log(video);
        // canvas大小与图片大小保持一致，截图没有多余
        canvas.width = video.offsetWidth * ratio;
        canvas.height = video.offsetHeight * ratio;
        canvasCtx.drawImage(video, 0, 0, canvas.width, canvas.height);
        const imgBase64 = canvas.toDataURL("image/png");
        img.setAttribute("src", imgBase64);
        console.log(imgBase64, canvas);
      });
    </script>
  </body>
</html>