質問編集履歴

質問の追加

2017/11/21 07:56

投稿

west826

スコア14

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,3 +1,27 @@
+###前提・実現したいこと
+リアルタイムに動画の処理ができるVJの開発をしたいと考えています。
+※Firefoxを使用しています
+###発生している問題
+- グレースケールボタンを押してから、セピアボタンを押すとグレースケールの設定が表示されないようにしたい。
+→clearIntervalで試してみたがうまくいきませんでした
+- グレースケールボタンを押してからもカラーの映像がたまに表示されてしまう
+→setIntervalの秒数を変えたりしてみたが直りませんでした
+- 同様に、ぼかしを押しても何も変化がありません。
+→エラーが出ないので対処の仕方がわかりません
 ```html
 <!DOCTYPE html>
@@ -10,670 +34,630 @@
         <title>映像とキャンバスを同期</title>
-        <style type="text/css">
-#v{
-    display:none;
-}
-#screen{
-    width:480px;
-    height:270px;
-    background-color:#000000;
-}
-button{
-    width:100px;
-    height:50px;
-}
-      </style>
-    </head>
+    </head>  <body>
+      <video controls id="v" width="480" height="270">
+        <source src="movie.mp4" width="480" height="270">
+      </video>
+      <div id="screen">
+        <canvas id="c" width="480" height="270"></canvas>
+      </div>
+      <script type="text/javascript" src="script.js"></script>
+      <button onClick="playVideo()">play/stop</button>
+      <button onClick="restart()">restart</button>
+      <br>
+      <p>効果:</p>
+      <button onClick="grayscale()">グレースケール</button>
+      <button onClick="diffusion()">拡散</button>
+      <button onClick="sepia()">セピア</button>
+      <button onClick="inversion()">反転</button>
+      <button onClick="shading()">ぼかし</button>
+      <button onClick="heatmap()">疑似カラー</button>
+    <input id="color" type="color" value="#ff0000" />
+    <input id="distance" type="number" value="10" />
+      <button onClick="outline()">アウトライン</button>
+  </body>
+</html>
+```
+```javascript
+//play/stopボタンの設定
+function playVideo(){
+    var video = document.getElementById("v");
+    if(video.paused){
+        video.play();
+    }else{
+        video.pause();
+    }
+    setInterval(function(){
+        var canvas = document.getElementById("c");
+        canvas.getContext("2d").drawImage(video, 0, 0, 480, 270);
+    }, 1000/30);
+}
+//restartボタンの設定
+function restart() {
+    var video = document.getElementById("v");
+    video.currentTime = 0;
+}
+//グレースケールボタンの設定
+function grayscale(){
+  //clearInterval(timer2);
+  timer1=setInterval(function(){
+    // 対象のCanvasを取得し、contextも取得する。
+    var canvas  = document.getElementById("c");
+    var context = canvas.getContext("2d");
+    var video = document.getElementById("v");
+    // Canvasから描画内容を保持するimageDataを取得する。
+    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+    // 描画内容に対して、式を当てはめながらrgbの値を計算する。
+    var d = imageData.data;
+    for (var i = 0; i < d.length; i+=4) {
+        var g = d[i] * 0.2126 + d[i+1] * 0.7152 + d[i+2] * 0.0722;
+        d[i] = d[i+1] = d[i+2] = g;
+        // d[i+3]に格納されたα値は変更しない
+    }
-  <body>
-      <video controls id="v" width="480" height="270">
-        <source src="movie.mp4" width="480" height="270">
-      </video>
+    // 計算結果でCanvasの表示内容を更新する。
-      <div id="screen">
+    context.putImageData(imageData, 0, 0);
-        <canvas id="c" width="480" height="270"></canvas>
-      </div>
-      <script type="text/javascript" src="script.js"></script>
-      <button onClick="playVideo()">play/stop</button>
-      <button onClick="restart()">restart</button>
-      <br>
-      <p>効果:</p>
-      <button onClick="grayscale()">グレースケール</button>
-      <button onClick="diffusion()">拡散</button>
-      <button onClick="sepia()">セピア</button>
-      <button onClick="inversion()">反転</button>
-      <button onClick="shading()">ぼかし</button>
-      <button onClick="heatmap()">疑似カラー</button>
-    <input id="color" type="color" value="#ff0000" />
-    <input id="distance" type="number" value="10" />
-      <button onClick="outline()">アウトライン</button>
+  }, 1000/30);
+}
+//拡散
+function diffusion(){
+}
+//セピア
+function sepia(){
+  //他のボタンの処理を止める
+  //clearInterval(timer1);
+  timer2=setInterval(function(){
+    // 対象のCanvasを取得し、contextも取得する。
+    var canvas  = document.getElementById("c");
+    var context = canvas.getContext("2d");
+    var video = document.getElementById("v");
+    // Canvasから描画内容を保持するimageDataを取得する。
+    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+    // 描画内容に対して、式を当てはめながらrgbの値を計算する。
+    var d = imageData.data;
+    for (var i = 0; i < d.length; i+=4) {
+        var g =0.34*d[i] + 0.5*d[i+1] + 0.16*d[i+2];
+      // red
+        d[i] = (g/255)*240;
-  </body>
+        // green
+        d[i + 1] = (g/255)*200;
-</html>
+        // blue
+        d[i + 2] = (g/255)*145;
+    }
+    // 計算結果でCanvasの表示内容を更新する。
+    context.putImageData(imageData, 0, 0);
+  }, 1000/30);
+}
+//ネガポジ反転
+function inversion(){
+    //省略
+}
+//ぼかし(近傍8点)
+function shading(context, width,height,mosaicSize){
+    setInterval(function(){
+        // 対象のCanvasを取得し、contextも取得する。
+        var canvas  = document.getElementById("c");
+        var context = canvas.getContext("2d");
+        // Canvasから描画内容を保持するimageDataを取得する。
+        var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+        function BlurEffect(data,width){
+            for(var i = 0;i<data.length;i+=4){
+                var pre_line = i - width*4;
+                var next_line = i + width*4;
+                var red = (data[pre_line-4]+data[pre_line]+data[pre_line+4]
+                          +data[i-4]+data[i]+data[i+4]
+                          +data[next_line -4]+data[next_line]+data[next_line+4])/9;
+                var blue = (data[pre_line-3]+data[pre_line+1]+data[pre_line+5]
+                           +data[i-3]+data[i+1]+data[i+5]
+                           +data[next_line -3]+data[next_line+1]+data[next_line+5])/9;
+                var green = (data[pre_line-2]+data[pre_line+2]+data[pre_line+6]
+                            +data[i-2]+data[i+2]+data[i+6]
+                            +data[next_line -2]+data[next_line+2]+data[next_line+6])/9;
+                // red
+                data[i] = red;
+                // green
+                data[i + 1] = blue;
+                // blue
+                data[i + 2] = green;
+            }
+        }
+        // 生成したモノクロ画像データを適用
+        context.putImageData(imageData, 0, 0);
+    }, 1000/30);
+}
+//疑似カラー
+function heatmap(){
+}
+//アウトライン
+function outline(){
+  setInterval(function(){
+    // 対象のCanvasを取得し、contextも取得する。
+        var canvas  = document.getElementById("c");
+        var context = canvas.getContext("2d");
+        // videoの映像をcanvasに描画する
+    var draw = function () {
+      // ここでアウトライン処理をする
+        outline();
+        requestAnimationFrame(draw);
+    };
+    // 境界線とする閾値
+    var outlineColor = {r: 255, g: 0, b: 0},
+        complementaryColor = {r: 0, g: 255, b: 255},
+        colorDistance = 10;
+    // アウトライン処理
+    var outline = function () {
+        // Canvasから描画内容を保持するimageDataを取得する
+        var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+        var d = imageData.data;
+        // dはUint8ClampedArray
+        // 長さはcanvasの width * height * 4(r,g,b,a)
+        // 先頭から、一番左上のピクセルのr,g,b,aの値が順に入っており、
+        // 右隣のピクセルのr,g,b,aの値が続く
+        // n から n+4 までが1つのピクセルの情報となる
+        var currentOutlineColor = outlineColor;
+        for (var i = 0, l = d.length; i < l; i += 4) {
+            // この条件の時、currentは右端の色、nextは1px下の段の左端の色になるので透明にしてスキップする
+            if ((i / 4 + 1) % canvas.width === 0) {
+                d[i + 3] = 0;
+                continue;
+            }
+            // 段が変わったら色を変える
+            // 一段ずつoutlineColorからcomplementaryColorにグラデーションにする
+            if ((i / 4) % canvas.width === 0) {
+                var row = (i / 4) / canvas.width,
+                    r = (outlineColor.r - complementaryColor.r) / canvas.height,
+                    g = (outlineColor.g - complementaryColor.g) / canvas.height,
+                    b = (outlineColor.b - complementaryColor.b) / canvas.height;
+                currentOutlineColor = {
+                    r: outlineColor.r - (r * row),
+                    g: outlineColor.g - (g * row),
+                    b: outlineColor.b - (b * row)
+                };
+            }
+            var currentIndex = i,
+                nextIndex = currentIndex + 4,
+                underIndex = currentIndex + (canvas.width * 4),
+                // チェックするピクセルの色
+                current = {
+                    r: d[currentIndex],
+                    g: d[currentIndex + 1],
+                    b: d[currentIndex + 2]
+                },
+                // 右隣の色
+                next = {
+                    r: d[nextIndex],
+                    g: d[nextIndex + 1],
+                    b: d[nextIndex + 2]
+                },
+                // 下の色
+                under = {
+                    r: d[underIndex],
+                    g: d[underIndex + 1],
+                    b: d[underIndex + 2]
+                };
+            // 現在のピクセルと右隣、下の色の三次元空間上の距離を閾値と比較する
+            // 閾値より大きい（色が遠い）場合、境界線とみなしそのピクセルをcurrentOutlineColorに変更
+            // 閾値より小さい（色が近い）場合、そのピクセルを消す
+            if (getColorDistance(current, next) > colorDistance || getColorDistance(current, under) > colorDistance) {
+                d[i] = currentOutlineColor.r;
+                d[i + 1] = currentOutlineColor.g;
+                d[i + 2] = currentOutlineColor.b;
+            } else {
+                // alpha値を0にすることで見えなくする
+                d[i + 3] = 0;
+            }
+        }
+        // 書き換えたdをimageDataにもどし、描画する
+        imageData.data = d;
+        context.putImageData(imageData, 0, 0);
+    };
+    // r,g,bというkeyを持ったobjectが第一引数と第二引数に渡される想定
+    var getColorDistance = function (rgb1, rgb2) {
+        // 三次元空間の距離が返る
+        return Math.sqrt(
+            Math.pow((rgb1.r - rgb2.r), 2) +
+            Math.pow((rgb1.g - rgb2.g), 2) +
+            Math.pow((rgb1.b - rgb2.b), 2)
+        );
+    };
+    var color = document.getElementById('color');
+    color.addEventListener('change', function () {
+        // フォームの値は16進カラーコードなのでrgb値に変換する
+        outlineColor = color2rgb(this.value);
+        complementaryColor = getComplementaryColor(outlineColor);
+    });
+    var color2rgb = function (color) {
+        color = color.replace(/^#/, '');
+        return {
+            r: parseInt(color.substr(0, 2), 16),
+            g: parseInt(color.substr(2, 2), 16),
+            b: parseInt(color.substr(4, 2), 16)
+        };
+    };
+    // 補色の計算
+    var getComplementaryColor = function (rgb) {
+        var max = Math.max(rgb.r, rgb.g, rgb.b),
+            min = Math.min(rgb.r, rgb.g, rgb.b),
+            sum = max + min;
+        return {
+            r: sum - rgb.r,
+            g: sum - rgb.g,
+            b: sum - rgb.b
+        };
+    };
+    var distance = document.getElementById('distance');
+    distance.style.textAlign = 'right';
+    distance.addEventListener('change', function () {
+        colorDistance = this.value;
+    });
+}, 1000/30);
+}
 ```
-```javascript
-//play/stopボタンの設定
-function playVideo(){
-    var video = document.getElementById("v");
-    if(video.paused){
-        video.play();
-    }else{
-        video.pause();
-    }
-    setInterval(function(){
-        var canvas = document.getElementById("c");
-        canvas.getContext("2d").drawImage(video, 0, 0, 480, 270);
-    }, 1000/30);
-}
-//restartボタンの設定
-function restart() {
-    var video = document.getElementById("v");
-    video.currentTime = 0;
-}
-//グレースケールボタンの設定
-function grayscale(){
-  //clearInterval(timer2);
-  timer1=setInterval(function(){
-    // 対象のCanvasを取得し、contextも取得する。
-    var canvas  = document.getElementById("c");
-    var context = canvas.getContext("2d");
-    var video = document.getElementById("v");
-    // Canvasから描画内容を保持するimageDataを取得する。
-    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-    // 描画内容に対して、式を当てはめながらrgbの値を計算する。
-    var d = imageData.data;
-    for (var i = 0; i < d.length; i+=4) {
-        var g = d[i] * 0.2126 + d[i+1] * 0.7152 + d[i+2] * 0.0722;
-        d[i] = d[i+1] = d[i+2] = g;
-        // d[i+3]に格納されたα値は変更しない
-    }
-    // 計算結果でCanvasの表示内容を更新する。
-    context.putImageData(imageData, 0, 0);
-  }, 1000/30);
-}
-//拡散
-function diffusion(){
-}
-//セピア
-function sepia(){
-  //他のボタンの処理を止める
-  //clearInterval(timer1);
-  timer2=setInterval(function(){
-    // 対象のCanvasを取得し、contextも取得する。
-    var canvas  = document.getElementById("c");
-    var context = canvas.getContext("2d");
-    var video = document.getElementById("v");
-    // Canvasから描画内容を保持するimageDataを取得する。
-    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-    // 描画内容に対して、式を当てはめながらrgbの値を計算する。
-    var d = imageData.data;
-    for (var i = 0; i < d.length; i+=4) {
-        var g =0.34*d[i] + 0.5*d[i+1] + 0.16*d[i+2];
-      // red
-        d[i] = (g/255)*240;
-        // green
-        d[i + 1] = (g/255)*200;
-        // blue
-        d[i + 2] = (g/255)*145;
-    }
-    // 計算結果でCanvasの表示内容を更新する。
-    context.putImageData(imageData, 0, 0);
-  }, 1000/30);
-}
-//ネガポジ反転
-function inversion(){
-    //省略
-}
-//ぼかし(近傍8点)
-function shading(context, width,height,mosaicSize){
-    setInterval(function(){
-        // 対象のCanvasを取得し、contextも取得する。
-        var canvas  = document.getElementById("c");
-        var context = canvas.getContext("2d");
-        // Canvasから描画内容を保持するimageDataを取得する。
-        var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-        function BlurEffect(data,width){
-            for(var i = 0;i<data.length;i+=4){
-                var pre_line = i - width*4;
-                var next_line = i + width*4;
-                var red = (data[pre_line-4]+data[pre_line]+data[pre_line+4]
-                          +data[i-4]+data[i]+data[i+4]
-                          +data[next_line -4]+data[next_line]+data[next_line+4])/9;
-                var blue = (data[pre_line-3]+data[pre_line+1]+data[pre_line+5]
-                           +data[i-3]+data[i+1]+data[i+5]
-                           +data[next_line -3]+data[next_line+1]+data[next_line+5])/9;
-                var green = (data[pre_line-2]+data[pre_line+2]+data[pre_line+6]
-                            +data[i-2]+data[i+2]+data[i+6]
-                            +data[next_line -2]+data[next_line+2]+data[next_line+6])/9;
-                // red
-                data[i] = red;
-                // green
-                data[i + 1] = blue;
-                // blue
-                data[i + 2] = green;
-            }
-        }
-        // 生成したモノクロ画像データを適用
-        context.putImageData(imageData, 0, 0);
-    }, 1000/30);
-}
-//疑似カラー
-function heatmap(){
-}
-//アウトライン
-function outline(){
-  setInterval(function(){
-    // 対象のCanvasを取得し、contextも取得する。
-        var canvas  = document.getElementById("c");
-        var context = canvas.getContext("2d");
-        // videoの映像をcanvasに描画する
-    var draw = function () {
-      // ここでアウトライン処理をする
-        outline();
-        requestAnimationFrame(draw);
-    };
-    // 境界線とする閾値
-    var outlineColor = {r: 255, g: 0, b: 0},
-        complementaryColor = {r: 0, g: 255, b: 255},
-        colorDistance = 10;
-    // アウトライン処理
-    var outline = function () {
-        // Canvasから描画内容を保持するimageDataを取得する
-        var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-        var d = imageData.data;
-        // dはUint8ClampedArray
-        // 長さはcanvasの width * height * 4(r,g,b,a)
-        // 先頭から、一番左上のピクセルのr,g,b,aの値が順に入っており、
-        // 右隣のピクセルのr,g,b,aの値が続く
-        // n から n+4 までが1つのピクセルの情報となる
-        var currentOutlineColor = outlineColor;
-        for (var i = 0, l = d.length; i < l; i += 4) {
-            // この条件の時、currentは右端の色、nextは1px下の段の左端の色になるので透明にしてスキップする
-            if ((i / 4 + 1) % canvas.width === 0) {
-                d[i + 3] = 0;
-                continue;
-            }
-            // 段が変わったら色を変える
-            // 一段ずつoutlineColorからcomplementaryColorにグラデーションにする
-            if ((i / 4) % canvas.width === 0) {
-                var row = (i / 4) / canvas.width,
-                    r = (outlineColor.r - complementaryColor.r) / canvas.height,
-                    g = (outlineColor.g - complementaryColor.g) / canvas.height,
-                    b = (outlineColor.b - complementaryColor.b) / canvas.height;
-                currentOutlineColor = {
-                    r: outlineColor.r - (r * row),
-                    g: outlineColor.g - (g * row),
-                    b: outlineColor.b - (b * row)
-                };
-            }
-            var currentIndex = i,
-                nextIndex = currentIndex + 4,
-                underIndex = currentIndex + (canvas.width * 4),
-                // チェックするピクセルの色
-                current = {
-                    r: d[currentIndex],
-                    g: d[currentIndex + 1],
-                    b: d[currentIndex + 2]
-                },
-                // 右隣の色
-                next = {
-                    r: d[nextIndex],
-                    g: d[nextIndex + 1],
-                    b: d[nextIndex + 2]
-                },
-                // 下の色
-                under = {
-                    r: d[underIndex],
-                    g: d[underIndex + 1],
-                    b: d[underIndex + 2]
-                };
-            // 現在のピクセルと右隣、下の色の三次元空間上の距離を閾値と比較する
-            // 閾値より大きい（色が遠い）場合、境界線とみなしそのピクセルをcurrentOutlineColorに変更
-            // 閾値より小さい（色が近い）場合、そのピクセルを消す
-            if (getColorDistance(current, next) > colorDistance || getColorDistance(current, under) > colorDistance) {
-                d[i] = currentOutlineColor.r;
-                d[i + 1] = currentOutlineColor.g;
-                d[i + 2] = currentOutlineColor.b;
-            } else {
-                // alpha値を0にすることで見えなくする
-                d[i + 3] = 0;
-            }
-        }
-        // 書き換えたdをimageDataにもどし、描画する
-        imageData.data = d;
-        context.putImageData(imageData, 0, 0);
-    };
-    // r,g,bというkeyを持ったobjectが第一引数と第二引数に渡される想定
-    var getColorDistance = function (rgb1, rgb2) {
-        // 三次元空間の距離が返る
-        return Math.sqrt(
-            Math.pow((rgb1.r - rgb2.r), 2) +
-            Math.pow((rgb1.g - rgb2.g), 2) +
-            Math.pow((rgb1.b - rgb2.b), 2)
-        );
-    };
-    var color = document.getElementById('color');
-    color.addEventListener('change', function () {
-        // フォームの値は16進カラーコードなのでrgb値に変換する
-        outlineColor = color2rgb(this.value);
-        complementaryColor = getComplementaryColor(outlineColor);
-    });
-    var color2rgb = function (color) {
-        color = color.replace(/^#/, '');
-        return {
-            r: parseInt(color.substr(0, 2), 16),
-            g: parseInt(color.substr(2, 2), 16),
-            b: parseInt(color.substr(4, 2), 16)
-        };
-    };
-    // 補色の計算
-    var getComplementaryColor = function (rgb) {
-        var max = Math.max(rgb.r, rgb.g, rgb.b),
-            min = Math.min(rgb.r, rgb.g, rgb.b),
-            sum = max + min;
-        return {
-            r: sum - rgb.r,
-            g: sum - rgb.g,
-            b: sum - rgb.b
-        };
-    };
-    var distance = document.getElementById('distance');
-    distance.style.textAlign = 'right';
-    distance.addEventListener('change', function () {
-        colorDistance = this.value;
-    });
-}, 1000/30);
-}
-```