■ complmn2.htm ■

戻る 

<!DOCTYPE HTML>
<HTML LANG="ja" STYLE="height:100%">

<HEAD>
<META CHARSET="Shift_JIS">
<TITLE>補色残像（スタイルシート版）</TITLE>
</HEAD>

<BODY onResize="size_view()" STYLE="position:absolute; left:0; right:0; top:0; bottom:0; background-color:#CCFFFF">

<DIV STYLE="height:0">
<svg>
<filter id="grayscale" color-interpolation-filters="sRGB"
   filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feColorMatrix in="SourceGraphic" type="matrix"
   values="0.299 0.587 0.114 0 0
           0.299 0.587 0.114 0 0
           0.299 0.587 0.114 0 0
           0 0 0 0 1"
  ></feColorMatrix>
</filter>
</svg>
</DIV>

<DIV ID="cont" STYLE="height:100%; text-align:center">
<B>補色残像（スタイルシート版）</B>
<BR>

<FORM>
<DIV STYLE="display:inline-block; margin:4px auto 0; text-align:left">
ファイル（画像）：<BR>
<INPUT TYPE=FILE ID="file" onChange="in_sel()" STYLE="min-width:30em">
</DIV>
<DIV STYLE="width:100px; height:100px; margin:4px auto 0; background-color:white">
<IMG ID="src" WIDTH=100 HEIGHT=100 onLoad="in_sel2()" onError="in_sel_err()" STYLE="object-fit:scale-down; visibility:hidden">
</DIV>
<DIV STYLE="white-space:nowrap; margin-top:4px">
<LABEL><INPUT TYPE=CHECKBOX ID="lumi" onChange="lumi_changed()">輝度調整</LABEL>
<INPUT TYPE=BUTTON ID="show" VALUE="補色" DISABLED onClick="show_comp()" STYLE="margin-left:1em">
</DIV>
</FORM>

<DIV ID="back" STYLE="background-color:#808080; margin:4px auto 0; visibility:hidden">
<IMG ID="view" STYLE="background-color:white">
</DIV>

</DIV>

<SCRIPT TYPE="text/javascript">
<!--

function size_view() {
  if(!img_width)
    return;

  let width = elem_cont.offsetWidth;
  let height = elem_cont.offsetHeight - elem_back.offsetTop;
  if(img_width > width || img_height > height) {
    if(img_width * height > img_height * width)
      height = Math.floor(img_height * width / img_width);
    else
      width = Math.floor(img_width * height / img_height);
  }
  else {
    width = img_width;
    height = img_height;
  }
  elem_back.style.width = String(width) + "px";
  elem_back.style.height = String(height) + "px";
  elem_view.width = width;
  elem_view.height = height;
}

function in_sel() {
  elem_src.style.visibility = "hidden";
  elem_back.style.visibility = "hidden";
  elem_file.disabled = elem_show.disabled = true;

  img_width = 0;

  if(src_url != undefined)
    URL.revokeObjectURL(src_url);
  elem_src.src = src_url = URL.createObjectURL(elem_file.files.item(0));
}

function in_sel2() {
  img_width  = elem_src.naturalWidth;
  img_height = elem_src.naturalHeight;

  // 元画像サムネイル表示
  elem_src.style.visibility = "visible";

  // 画像表示
  size_view();
  elem_view.src = src_url;
  elem_back.style.visibility = "visible";

  elem_file.disabled = elem_show.disabled = false;
}

function in_sel_err() {
  elem_file.disabled = false;
}

function lumi_changed() {
  if(comp)  // 補色画像表示中
    set_type();
}

function show_gray() {
  // grayscale() は 0.2126R + 0.7152G + 0.0722B の計算式を使っているので使用しない
  elem_view.style.filter = "url(#grayscale)";
  elem_view.style.mixBlendMode = "normal";
  comp = false;
}

function show_comp() {
  elem_view.style.filter = "invert()";
  set_type();
  comp = true;

  elem_file.disabled = elem_show.disabled = true;

  setTimeout(hide_comp, 20000);
}

function hide_comp() {
  show_gray();

  elem_file.disabled = elem_show.disabled = false;
}

function set_type() {
  // mix-blend-mode の輝度の計算は 0.3R + 0.59G + 0.11B の計算式を使っている
  elem_view.style.mixBlendMode = (document.getElementById("lumi").checked) ? "color" : "normal";
}

  let elem_cont = document.getElementById("cont");
  let elem_file = document.getElementById("file");
  let elem_src = document.getElementById("src");
  let elem_show = document.getElementById("show");
  let elem_back = document.getElementById("back");
  let elem_view = document.getElementById("view");

  let img_width = 0;
  let img_height;

  let comp;  // 補色画像表示中
  show_gray();

  let src_url = undefined;

  // ページを再ロードしたときのため
  document.forms[0].reset();

//-->
</SCRIPT>

</BODY>

</HTML>