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

Question

I have a simple mp4 video file. 我有一个简单的mp4视频文件。

When I play it in HTML5, I want to split the the video into a 3x4 grid with each grid playing one portion of the video like this: 当我使用HTML5播放视频时，我想将视频分成3x4的网格，每个网格播放视频的一部分，如下所示：

期望的结果

However, my current code produces something like this: 但是，我当前的代码会生成如下内容：

目前的结果

I'm pretty sure something is wrong with the drawImage() function but I don't know which part. 我很确定drawImage（）函数有问题，但是我不知道哪一部分。

index.html 的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() has 3 use cases depending on the number of arguments you provide. context.drawImage()有3个用例，具体取决于您提供的参数数量。 More accurately you have the following options: 更准确地说，您有以下选择：

context.drawImage(video, x, y);

which draws the frame at a specific x,y point on your canvas 它在画布上的特定x,y点绘制框架

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

which does the same, except that it shrinks/enlarges the video to the width and height properties you specify (if the video itself had a 600x800 resolution, and you specified width = 300, height = 400 you would get the entire video frame shrunk down to those dimensions). 除了将视频缩小/放大到您指定的width和height属性（如果视频本身具有600x800分辨率，并且您指定width = 300, height = 400您会缩小整个视频帧）外，它的功能相同到那些尺寸）。

Your third option, which is what you are after is the following: 您的第三个选择如下：

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

This takes a specific rectangular region of the video frame, beginning at sx, sy and ending at swidth, sheight , and only draws that part at x, y . 这占据了视频帧的特定矩形区域，从sx, sy开始，以swidth, sheight结束，并且仅以x, y绘制该部分。

If I understand your code correctly you should do the following: 如果我正确理解您的代码，则应执行以下操作：

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

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

Basically, the video has width and height properties of its own. 基本上，视频具有自己的width和height属性。 You split the width in 4 parts (your columns) and the height in 3 parts (your rows). 您将宽度分为4个部分（您的列），将高度分为3个部分（您的行）。 At drawImage you specify which part of the video frame you want to draw (2nd to 5th argument) and on which tile you want to draw it(last 4 arguments). 在drawImage ，指定要绘制视频帧的哪一部分（第2到第5个参数），以及要在哪个图块上绘制（最后4个参数）。

You can find more info on drawImage here . 您可以在此处找到有关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