Q&A
コードのインデントがばらばらで可読性が損なわれています. きちんとインデントを揃え, 読みやすいコードとすることで正しい回答が得られやすくなるでしょう.
###前提・実現したいこと
動画の黒の部分を透過させて
クロマキー合成のようなものをしようと思っています
###発生している問題・エラーメッセージ
TypeError: rgb1 is undefined
###該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<meta http-equiv="Content-Language" content="ja"> 6<title>Chroma key</title> 7</head> 8<body> 9 <div id="screen"> 10 <canvas id="c" width="480" height="270"></canvas> 11 </div> 12 <div> 13 <video id="v2" width="480px" height="270px" autoplay src="../movie/m1.mp4" loop ></video> 14 <span>不透明度</span> 15 <input type="range" id="opacity1" min="0" max="100" step="1" > 16 <span id="opacityvalue1"></span> 17 </div> 18 <script type="text/javascript" > 19 var video = document.getElementById("v2"); 20 var canvas = document.getElementById("c"); 21 var context = canvas.getContext('2d'); 22 //opacity値の出力 23 opacity1.oninput = e => opacityvalue1.textContent = opacity1.value; 24 // r,g,bというkeyを持ったobjectが第一引数と第二引数に渡される想定 25 function getColorDistance(rgb1, rgb2) { 26 // 三次元空間の距離が返る 27 return Math.sqrt( 28 Math.pow((rgb1.r - rgb2.r), 2) + 29 Math.pow((rgb1.g - rgb2.g), 2) + 30 Math.pow((rgb1.b - rgb2.b), 2) 31 ); 32 }; 33 // videoの映像をcanvasに描画する 34 function draw() { 35 //グラフィックをクリア 36 context.clearRect(0, 0, canvas.width, canvas.height); 37 //opacity(alpha)値を設定 38 context.globalAlpha = opacity1.value/100; 39 context.drawImage(video, 0, 0, canvas.width, canvas.height); 40 // ここでクロマキー処理をする 41 chromaKey(); 42 requestAnimationFrame(draw); 43 }; 44 // 消す色と閾値 45 var chromaKeyColor = {r: 0, g: 0, b: 0}, 46 colorDistance = 30; 47 // クロマキー処理 48 function chromaKey() { 49 var imageData = context.getImageData(0, 0, canvas.width, canvas.height), 50 data = imageData.data; 51 // dataはUint8ClampedArray 52 // 長さはcanvasの width * height * 4(r,g,b,a) 53 // 先頭から、一番左上のピクセルのr,g,b,aの値が順に入っており、 54 // 右隣のピクセルのr,g,b,aの値が続く 55 // n から n+4 までが1つのピクセルの情報となる 56 for (var i = 0, l = data.length; i < l; i += 4) { 57 var target = { 58 r: data[i], 59 g: data[i + 1], 60 b: data[i + 2] 61 }; 62 // chromaKeyColorと現在のピクセルの三次元空間上の距離を閾値と比較する 63 // 閾値より小さい（色が近い）場合、そのピクセルを消す 64 if (getColorDistance(chromaKeyColor, target) < colorDistance) { 65 // alpha値を0にすることで見えなくする 66 data[i + 3] = 0; 67 } 68 } 69 // 書き換えたdataをimageDataにもどし、描画する 70 imageData.data = data; 71 context.putImageData(imageData, 0, 0); 72 }; 73 draw(); 74 </script> 75 </body> 76</html>
###試したこと
何パターンか試してみたのですが
以下のコードをどこに挿入したらよいのかがわかりません
わかる方がいらっしゃいましたら教えていただけると幸いです
JavaScript
1function getColorDistance(rgb1, rgb2) { 2 // 三次元空間の距離が返る 3 return Math.sqrt( 4 Math.pow((rgb1.r - rgb2.r), 2) + 5 Math.pow((rgb1.g - rgb2.g), 2) + 6 Math.pow((rgb1.b - rgb2.b), 2) 7 ); 8 };
###追加
JavaScript
1 //opacity値の出力 2 opacity1.oninput = e => opacityvalue1.textContent = opacity1.value; 3 (function draw(){ 4 //グラフィックをクリア 5 context.clearRect(0, 0, canvas.width, canvas.height); 6 //opacity(alpha)値を設定 7 context.globalAlpha = opacity.value/100; 8 //video映像をcanvas要素に転写 9 context.drawImage(video, 0, 0, canvas.width, canvas.height); 10 //処理を繰り返す 11 requestAnimationFrame(draw); 12 })
回答1件
0
提示のエラーは変数chromaKeyColorの内容が初期化される前にdrawメソッドを呼び出したことで発生しています. 基本的なクロマキー処理に問題はありません.
修正箇所は次の3つです.
drawメソッドの呼び出し位置をスクリプト最後部に移動
これはvar chromaKeyColor = {r: 0, g: 0, b: 0}行の後であればどこでも良い.
0. 処理imageData.data = dataを削除
ImageDataオブジェクトのdataプロパティは読み取り専用なため.
0. 途中のgetImageDataメソッドは必要ないためコメントアウト
JavaScript
1 var video = document.getElementById("v2"); 2 var canvas = document.getElementById("c"); 3 var context = canvas.getContext('2d'); 4 5 //draw();//（1）ここで呼び出すと, まだ変数chromaKeyColorが初期化されていない 6 // r,g,bというkeyを持ったobjectが第一引数と第二引数に渡される想定 7 function getColorDistance(rgb1, rgb2) { 8 // 三次元空間の距離が返る 9 return Math.sqrt( 10 Math.pow((rgb1.r - rgb2.r), 2) + 11 Math.pow((rgb1.g - rgb2.g), 2) + 12 Math.pow((rgb1.b - rgb2.b), 2) 13 ); 14 }; 15 // videoの映像をcanvasに描画する 16 function draw() { 17 context.drawImage(video, 0, 0, canvas.width, canvas.height); 18 // ここでクロマキー処理をする 19 chromaKey(); 20 requestAnimationFrame(draw); 21 }; 22 23 // Canvasから描画内容を保持するimageDataを取得する。 24 //（3）この処理は何の効果ももたらさないのでコメントアウト（削除推奨） 25 //var imageData = context.getImageData(0, 0, canvas.width, canvas.height); 26 27 // 消す色と閾値 28 var chromaKeyColor = {r: 0, g: 0, b: 0}, 29 colorDistance = 32; 30 31 // クロマキー処理 32 function chromaKey() { 33 var imageData = context.getImageData(0, 0, canvas.width, canvas.height), 34 data = imageData.data; 35 36 // dataはUint8ClampedArray 37 // 長さはcanvasの width * height * 4(r,g,b,a) 38 // 先頭から、一番左上のピクセルのr,g,b,aの値が順に入っており、 39 // 右隣のピクセルのr,g,b,aの値が続く 40 // n から n+4 までが1つのピクセルの情報となる 41 42 for (var i = 0, l = data.length; i < l; i += 4) { 43 var target = { 44 r: data[i], 45 g: data[i + 1], 46 b: data[i + 2] 47 }; 48 49 // chromaKeyColorと現在のピクセルの三次元空間上の距離を閾値と比較する 50 // 閾値より小さい（色が近い）場合、そのピクセルを消す 51 if (getColorDistance(chromaKeyColor, target) < colorDistance) { 52 // alpha値を0にすることで見えなくする 53 data[i + 3] = 0; 54 } 55 56 } 57 58 // 書き換えたdataをimageDataにもどし、描画する 59 // 60 //imageData.data = data;//（2）imageData.dataを上書きすることは出来ない 61 context.putImageData(imageData, 0, 0); 62 }; 63 draw(); 64
投稿2017/12/27 23:15
総合スコア4756
ご回答ありがとうございます。
教えていただいたとおりに入力してみたのですが、
SecurityError: The operation is insecure.
というエラーが出ました。
これは、どう対処したら良いのでしょうか。
また、クロマキー処理と追加の部分の透明度のプログラミングを合わせることは可能なのでしょうか。
ご回答いただけると幸いです。
SecurityError: The operation is insecure.
これはvideo要素で読み込んでいるビデオ映像がメインのHTML文書とは別のオリジン(≒ドメイン, サイト)にあるためです. このような「別の場所にある画像ソース」をcanvas要素に転写するとWEBブラウザの同一オリジンポリシーに違反したとしてcanvas要素内部のオリジンクリーンフラグがtrueに強制され, 一部のAPI(toDataURI,toBlob,getImageData等)がセキュリティエラーを発します.
このエラーへの最も簡単な対処は読み込むビデオ映像をHTML文書と同じサイトに移動させてしまうことです.
参考)
https://developer.mozilla.org/ja/docs/Web/HTTP/HTTP_access_control
>クロマキー処理と追加の部分の透明度のプログラミングを合わせることは可能なのでしょうか。
はい、可能です.
data[i + 3] = 0; の部分でピクセルを透明化しているのですから, 条件に合致しない場合(つまりelse句)に不透明度（0〜255）を設定すればよいのです.
コードの流れや各種APIの役割がわかっていればさほど難しくはないでしょう.
あなたの回答
tips
プレビュー
