如何使用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