###前提・実現したいこと
動画の黒の部分を透過させて
クロマキー合成のようなものをしようと思っています
###発生している問題・エラーメッセージ
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 })