如何使用HTML5中的drawImage（）将视频分成块？

Question

我有一个简单的mp4视频文件。

当我使用HTML5播放视频时，我想将视频分成3x4的网格，每个网格播放视频的一部分，如下所示：

期望的结果

但是，我当前的代码会生成如下内容：

目前的结果

我很确定drawImage（）函数有问题，但是我不知道哪一部分。

的index.html

<!DOCTYPE html>

<html>

  <head>
    <title>
      Lab 5: HTML5
    </title>
    <style>
      .box{
        width:660px;
        height:125px;
        margin-top: auto;
      }
      canvas{
        border:1px solid #fff;
        margin:10px 0 0 0;
      }
    </style>
  </head>

  <body>
    <div style="display:none">
      <video id="videoid" autoplay>
        <source src="video.mp4" type="video/mp4">
      </video>
    </div>

    <div class="box">
      <canvas id="canvas00" width="160" height="120"></canvas>
      <canvas id="canvas01" width="160" height="120"></canvas>
      <canvas id="canvas02" width="160" height="120"></canvas>
      <canvas id="canvas03" width="160" height="120"></canvas>
    </div>
    <div class="box">
      <canvas id="canvas10" width="160" height="120"></canvas>
      <canvas id="canvas11" width="160" height="120"></canvas>
      <canvas id="canvas12" width="160" height="120"></canvas>
      <canvas id="canvas13" width="160" height="120"></canvas>
    </div>
    <div class="box">
      <canvas id="canvas20" width="160" height="120"></canvas>
      <canvas id="canvas21" width="160" height="120"></canvas>
      <canvas id="canvas22" width="160" height="120"></canvas>
      <canvas id="canvas23" width="160" height="120"></canvas>
    </div>

    <script>
      var ROWS = 3; // Number of rows
      var COLS = 4; // Number of columns
      var tile_array = new Array();

      for(var ri = 0; ri < ROWS; ri++) {
        for(var ci = 0; ci < COLS; ci++) {
          tile_array.push("tile"+ri+ci); // An array that stores id of tiles
        }
      }

      var video = document.getElementById("videoid"); // Get the video

      update(video); // Update video

      function update(video) {
        drawtiles(640, 360, ROWS, COLS, video); //
        setTimeout(function(){
          update(video)
        }, 33); // Update video every 33 miliseconds
      }

      function drawtiles(w, h, r, c, source) {
        var tileW = Math.round(w / c); // Get the width of a single tile
        var tileH = Math.round(h / r); // Get the height of a single tile

        for(var ri = 0; ri < r; ri++) {
          for(var ci = 0; ci < c; ci++) {
            var target_ri = parseInt(tile_array[ri*COLS+ci][4]);
            var target_ci = parseInt(tile_array[ri*COLS+ci][5]);
            var thecanvas = document.getElementById("canvas"+ri+ci);

            /*TO DO: implement the code for drawing the tile in the
            (target_ri, target_ci) position of the video, with width tileW
            and height tileH, onto this canvas in the (ri, ci) position of the web page*/

            var ctx = thecanvas.getContext("2d");
            ctx.drawImage(video, target_ri, target_ci, tileW, tileH);

          }
        }
      }

    </script>
  </body>

</html>

Answer 1

context.drawImage()有3个用例，具体取决于您提供的参数数量。 更准确地说，您有以下选择：

context.drawImage(video, x, y);

它在画布上的特定x,y点绘制框架

context.drawImage(video, x, y, width, height);

除了将视频缩小/放大到您指定的width和height属性（如果视频本身具有600x800分辨率，并且您指定width = 300, height = 400您会缩小整个视频帧）外，它的功能相同到那些尺寸）。

您的第三个选择如下：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

这占据了视频帧的特定矩形区域，从sx, sy开始，以swidth, sheight结束，并且仅以x, y绘制该部分。

如果我正确理解您的代码，则应执行以下操作：

videoX = video.width / c;
videoY = video.height / r;

ctx.drawImage(video, ci*videoX, ri*videoY, videoX, videoY, target_ri, target_ci, tileW, tileH);

基本上，视频具有自己的width和height属性。 您将宽度分为4个部分（您的列），将高度分为3个部分（您的行）。 在drawImage ，指定要绘制视频帧的哪一部分（第2到第5个参数），以及要在哪个图块上绘制（最后4个参数）。

您可以在此处找到有关drawImage的更多信息。

如何使用HTML5中的drawImage（）将视频分成块？

问题描述

1 个解决方案

解决方案1
1 2018-03-25 11:18:21

如何使用HTML5中的drawImage（）将视频分成块？

问题描述

1 个解决方案

解决方案1 1 2018-03-25 11:18:21

解决方案1
1 2018-03-25 11:18:21