![]() |
<!DOCTYPE HTML> <HTML LANG="ja"> <HEAD> <META CHARSET="Shift_JIS"> <TITLE>Land の二色法</TITLE> <svg height=0 style="height:0"> <filter id="filter-c" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feColorMatrix id="mtx" in="SourceGraphic" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1" ></feColorMatrix> </filter> <filter id="filter-r" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1" ></feColorMatrix> </filter> <filter id="filter-g" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feColorMatrix in="SourceGraphic" type="matrix" values="0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1" ></feColorMatrix> </filter> </svg> </HEAD> <BODY onLoad="init()" STYLE="background-color:#CCFFFF; margin:0"> <BR> <DIV STYLE="text-align:center"> <B>Land の二色法</B> <BR> <FORM> <TABLE BORDER=0 CELLSPACING=10 CELLPADDING=0 STYLE="margin:0 auto"> <TR><TD ALIGN=CENTER> <VIDEO ID="vid_c" WIDTH=0 HEIGHT=0 STYLE="filter:url(#filter-c); -webkit-filter:url(#filter-c)"></VIDEO> </TD></TR> <TR><TD ALIGN=CENTER NOWRAP> <VIDEO ID="vid_r" WIDTH=0 HEIGHT=0 STYLE="filter:url(#filter-r); -webkit-filter:url(#filter-r)"></VIDEO> <VIDEO ID="vid_g" WIDTH=0 HEIGHT=0 STYLE="filter:url(#filter-g); -webkit-filter:url(#filter-g); margin-left:1em"></VIDEO> </TD></TR> <TR><TD ALIGN=CENTER NOWRAP> 比率<BR> <INPUT TYPE=RANGE MIN="0" MAX="1" STEP="any" VALUE="0.3" onInput="set_ratio(Number(this.value))" STYLE="width:2in"> </TD></TR> </TABLE> </FORM> <BR> </DIV> <SCRIPT TYPE="text/javascript"> <!-- function init() { if(navigator.mozGetUserMedia == undefined) { if(navigator.webkitGetUserMedia == undefined) navigator.getUserMedia({video:true, audio:false}, success, error); else navigator.webkitGetUserMedia({video:true, audio:false}, success, error); } else { navigator.mozGetUserMedia({video:true, audio:false}, success, error); } } function success(stream) { elem_vid_c.autoplay = true; elem_vid_r.autoplay = true; elem_vid_g.autoplay = true; elem_vid_c.addEventListener("canplay", wait, false); if(elem_vid_c.mozSrcObject === undefined) { if(elem_vid_c.srcObject === undefined) elem_vid_c.src = elem_vid_r.src = elem_vid_g.src = (window.URL == undefined || window.URL.createObjectURL == undefined) ? stream : window.URL.createObjectURL(stream); else elem_vid_c.srcObject = elem_vid_r.srcObject = elem_vid_g.srcObject = stream; } else { elem_vid_c.mozSrcObject = elem_vid_r.mozSrcObject = elem_vid_g.mozSrcObject = stream; } elem_vid_c.play(); elem_vid_r.play(); elem_vid_g.play(); } function error(err) { alert("カメラが使用できません"); } function wait() { if(elem_vid_c.videoWidth) { elem_vid_r.width = elem_vid_g.width = (elem_vid_c.width = elem_vid_c.videoWidth) >> 2; elem_vid_r.height = elem_vid_g.height = (elem_vid_c.height = elem_vid_c.videoHeight) >> 2; return; } setTimeout(wait, 50); } function set_ratio(ratio) { mtx_values.getItem(0).value = 1 - ratio; // 赤の成分 mtx_values.getItem(1).value = mtx_values.getItem(6).value = mtx_values.getItem(11).value = ratio; // 緑の成分の輝度 } elem_vid_c = document.getElementById("vid_c"); elem_vid_r = document.getElementById("vid_r"); elem_vid_g = document.getElementById("vid_g"); mtx_values = document.getElementById("mtx").values.baseVal; set_ratio(0.3); // ページを再ロードしたときのため document.forms[0].reset(); //--> </SCRIPT> </BODY> </HTML> |