fractalRender/test.html at master · JoeHarrison/fractalRender · 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
<html>
    <head>
    </head>
    <body>
        <input type="file" accept="video/*" />
        <p id="progress"></p>
    </body>
    <script>
        document.querySelector('input').addEventListener('change', extractFrames, false);

        function extractFrames() {
          var video = document.createElement('video');
          var array = [];
          var sequence = [];
          var canvas = document.createElement('canvas');
          var ctx = canvas.getContext('2d');
          var pro = document.querySelector('#progress');

          function initCanvas(e) {
            canvas.width = this.videoWidth;
            canvas.height = this.videoHeight;
          }

          function drawFrame(e) {
            this.pause();
            ctx.drawImage(this, 0, 0);
            /*
            this will save as a Blob, less memory consumptive than toDataURL
            a polyfill can be found at
            https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill
            */
            canvas.toBlob(saveFrame, 'image/jpeg');

            pro.innerHTML = ((this.currentTime / this.duration) * 100).toFixed(2) + ' %';
            if (this.currentTime < this.duration) {
              this.play();
            }
          }

          function saveFrame(blob) {
            array.push(blob);
          }

          function revokeURL(e) {
            var tmpcanvas = document.createElement('canvas');
            tmpcanvas.width = this.width;
            tmpcanvas.height = this.height;

            var tmpcontext = tmpcanvas.getContext('2d');
            tmpcontext.drawImage(this, 0, 0);

            var input = tmpcontext.getImageData(0, 0, tmpcanvas.width, tmpcanvas.height);
            var inputData = input.data;

            var im = [];

            for (var y = 0; y < input.height; y++) {
                im.push([]);
                for (var x = 0; x < input.width; x++) {
                    var i = (y*input.width + x)*4;
                    im[y].push([inputData[i]/255.0, inputData[i+1]/255.0, inputData[i+2]/255.0, inputData[i+3]/255.0]);
               }
           }

            sequence.push(im);
            console.log(sequence);
            URL.revokeObjectURL(this.src);
          }

          function onend(e) {

            var img;
            // do whatever with the frames
            for (var i = 0; i < 10; i++) {
              img = new Image();
              img.onload = revokeURL;
              img.src = URL.createObjectURL(array[i]);
            }

            URL.revokeObjectURL(this.src);
          }

          video.muted = true;

          video.addEventListener('loadedmetadata', initCanvas, false);
          video.addEventListener('timeupdate', drawFrame, false);
          video.addEventListener('ended', onend, false);

          video.src = URL.createObjectURL(this.files[0]);
          video.play();
        }
    </script>
</html>