HTML5VideoImageProcessing/mosaic.html at master · DaisukeHirata/HTML5VideoImageProcessing · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Video Frames</title>
    <link rel="stylesheet" href="style.css">
    <style>
      #movieclip {
        display: none;
      }
    </style>
  </head>
  <body>
    <header>Avoid cross domain security error. $ http-server -p 8000 </header>
    <canvas id="canvas" width="600" height="360"></canvas>
    <input id="blocksize" type="range" min="5" max="50" step="5"/>
    <aside>Video file may take a moment to load.</aside>

    <video id="movieclip" width="640" height="360" autoplay>
      <source src="./assets/movieclip.mp4" type="video/mp4"/>
      <source src="./assets/movieclip.webm" type="video/webm"/>
      <source src="./assets/movieclip.ogv" type="video/ogg"/>
    </video>

    <script src="utils.js"></script>
    <script src="Stats.js"></script>
    <script>
    window.onload = function () {

      var canvas = document.getElementById('canvas'),
          copyContext = createCopyContext(canvas),
          context = canvas.getContext('2d'),
          video = document.getElementById('movieclip'),
          stats = initStats(),
          blockSize = 10;

      function createCopyContext (canvas) {
        var copy = document.createElement('canvas');
        copy.width = canvas.width;
        copy.height = canvas.height;
        return copy.getContext('2d');
      }

      function initStats() {
        var stats = new Stats();
        stats.setMode(0); // 0: fps, 1: ms
        // align to right
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.right = '0px';
        stats.domElement.style.top = '0px';
        document.body.appendChild( stats.domElement );
        return stats;
      }

      (function drawFrame () {

        stats.begin();

        window.requestAnimationFrame(drawFrame, canvas);
        copyContext.drawImage(video, 0, 0);

        var imagedata = copyContext.getImageData(0, 0, canvas.width, canvas.height),
            pixels = imagedata.data;

        blockSize = parseInt(document.getElementById('blocksize').value);

        //pixel iteration
        for (var y = 0; y < imagedata.height; y += blockSize) {
          for (var x = 0; x < imagedata.width; x += blockSize) {
            var offset = (x + y * imagedata.width) * 4,
                r = pixels[offset],
                g = pixels[offset + 1],
                b = pixels[offset + 2];

            context.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
            context.fillRect(x, y, blockSize, blockSize);
          }
        }

        stats.end();
      }());
    };
    </script>
  </body>
</html>