HTML5VideoImageProcessing/move_gray_scale.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
86
87
88
89
90
91
92
93
94
<!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>
    <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'),
          context = canvas.getContext('2d'),
          video = document.getElementById('movieclip'),
          mouse = utils.captureMouse(canvas);
          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 );

      var ran = 1000;
      var gray = true;

      canvas.addEventListener('click', function(){
        console.log(ran);
        ran = 0;
        gray = !gray;
      }, false);

      (function drawFrame () {

        stats.begin();
        ran += 5;

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

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

        //pixel iteration
        for (var y = 0; y < imagedata.height; y += 1) {
          for (var x = 0; x < imagedata.width; x += 1) {

            var dx = x - mouse.x,
                dy = y - mouse.y,
                dist = Math.sqrt(dx * dx + dy * dy),
                offset = (x + y * imagedata.width) * 4,
                r = pixels[offset],
                g = pixels[offset + 1],
                b = pixels[offset + 2],
                w = (0.2126 * r) + (0.7152 * g) + (0.0722 * b); //relative luminance, humans perceive green more

            if (gray) {
              if (dist > ran) {
                pixels[offset] = pixels[offset + 1] = pixels[offset + 2] = w;
              }
            } else {
              if (dist < ran) {
                 pixels[offset] = pixels[offset + 1] = pixels[offset + 2] = w;
              }
            }
          }
        }

        context.putImageData(imagedata, 0, 0);

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