<!DOCTYPE HTML>
<HTML LANG="ja">
<HEAD>
<META CHARSET="Shift_JIS">
<TITLE>補色残像</TITLE>
</HEAD>
<BODY onResize="size_view()" STYLE="background-color:#CCFFFF">
<CENTER ID="cont">
<B>補色残像</B>
<BR>
<FORM>
<TABLE><TR><TD ALIGN=LEFT>
ファイル（画像）：<BR>
<INPUT TYPE=FILE ID="file" SIZE=60 onChange="in_sel()">
</TD></TR></TABLE>
<DIV STYLE="position:relative; width:100px; height:100px; background-color:white">
<IMG ID="src" WIDTH=1 HEIGHT=1 onLoad="in_sel2()" onError="in_sel_err()" STYLE="position:absolute; left:0; top:0; visibility:hidden">
</DIV>
<DIV STYLE="white-space:nowrap; margin-top:4px">
<INPUT TYPE=CHECKBOX ID="lumi">輝度調整
<INPUT TYPE=BUTTON ID="cre" VALUE="作成" DISABLED onClick="create()" STYLE="margin-left:4px">
<SPAN ID="prog" STYLE="display:inline-block; width:4em; text-align:left; margin-left:1em; visibility:hidden">
<SPAN ID="val"></SPAN>%
</SPAN>
<INPUT TYPE=BUTTON ID="show" VALUE="補色" DISABLED onClick="show_comp()" STYLE="margin-left:2em">
</DIV>
</FORM>
<DIV ID="view" STYLE="position:relative; background-color:white; margin-top:4px; visibility:hidden">
<CANVAS ID="gray" WIDTH=1 HEIGHT=1 STYLE="position:absolute; left:0; top:0; visibility:hidden"></CANVAS>
<CANVAS ID="comp" WIDTH=1 HEIGHT=1 STYLE="position:absolute; left:0; top:0; visibility:hidden"></CANVAS>
</DIV>
<DIV STYLE="position:absolute; bottom:0; visibility:hidden">.</DIV><!-- Opera 用ダミー -->
</CENTER>
<SCRIPT TYPE="text/javascript">
<!--
function size_view() {
if(!img_width)
return;
elem_view.style.width = elem_gray.style.width = elem_comp.style.width
= elem_view.style.height = elem_gray.style.height = elem_comp.style.height = "1px";
var width = document.documentElement.clientWidth - (elem_cont.offsetLeft << 1);
if(width < 1)
width = 1;
var height = document.documentElement.clientHeight - (elem_cont.offsetTop << 1) - elem_view.offsetTop;
if(height < 1)
height = 1;
if(img_width > width || img_height > height) {
if(img_width * height > img_height * width) {
if((height = Math.floor(img_height * width / img_width)) < 1)
height = 1;
}
else {
if((width = Math.floor(img_width * height / img_height)) < 1)
width = 1;
}
}
else {
width = img_width;
height = img_height;
}
elem_view.style.width = elem_gray.style.width = elem_comp.style.width = String(width) + "px";
elem_view.style.height = elem_gray.style.height = elem_comp.style.height = String(height) + "px";
}
function in_sel() {
elem_src.style.visibility = "hidden";
elem_src.src = "";
elem_view.style.visibility = elem_gray.style.visibility = "hidden";
elem_gray.width = elem_comp.width = elem_gray.height = elem_comp.height = 1;
elem_file.disabled = elem_cre.disabled = elem_show.disabled = true;
img_width = 0;
if(typeof FileReader == "function") {
file_reader = new FileReader();
file_reader.onload = in_sel_fr;
file_reader.readAsDataURL(elem_file.files[0]); // files.item(0) は Opera で NG
}
else {
elem_src.src = elem_file.files.item(0).getAsDataURL();
}
}
function in_sel_fr() {
elem_src.src = file_reader.result;
file_reader = undefined;
}
function in_sel2() {
img_width = elem_src.naturalWidth;
img_height = elem_src.naturalHeight;
// 元画像サムネイル表示
with(elem_src) {
if(img_width > 100 || img_height > 100) {
if(img_width > img_height) {
width = 100;
height = Math.floor(100 * img_height / img_width);
}
else {
height = 100;
width = Math.floor(100 * img_width / img_height);
}
}
else {
width = img_width;
height = img_height;
}
style.left = String((100 - width) >> 1) + "px";
style.top = String((100 - height) >> 1) + "px";
style.visibility = "visible";
}
size_view();
elem_view.style.visibility = "visible";
elem_file.disabled = elem_cre.disabled = false;
}
function in_sel_err() {
elem_file.disabled = false;
}
function create() {
elem_gray.style.visibility = "hidden";
elem_file.disabled = elem_cre.disabled = elem_show.disabled = true;
elem_val.textContent = "0";
elem_prog.style.visibility = "visible";
document.documentElement.style.cursor = "wait";
setTimeout(create2, 0);
}
function create2() {
elem_gray.width = elem_comp.width = img_width;
elem_gray.height = elem_comp.height = img_height;
ctx_gray.fillStyle = "white"; // 元画像に透過部分がある場合を考慮
ctx_gray.fillRect(0, 0, img_width, img_height);
ctx_gray.drawImage(elem_src, 0, 0);
gray_imgdat = ctx_gray.getImageData(0, 0, img_width, img_height);
comp_imgdat = ctx_comp.createImageData(img_width, img_height);
gray_data = gray_imgdat.data;
comp_data = comp_imgdat.data;
i_data = gray_data.length;
w_len = gray_imgdat.width << 2;
lumi = elem_lumi.checked;
cre_img();
}
function cre_img() {
for(var i_data_end = i_data - w_len; i_data > i_data_end; ) {
i_data -= 4;
var r = gray_data[i_data ];
var g = gray_data[i_data + 1];
var b = gray_data[i_data + 2];
var Y = 306 * r + 601 * g + 117 * b;
gray_data[i_data] = gray_data[i_data + 1] = gray_data[i_data + 2] = Y >> 10;
if(lumi) { // 輝度調整あり
var d = 131072 - Y;
r = (r << 10) + d;
g = (g << 10) + d;
b = (b << 10) + d;
var min = (r < g) ? r : g;
if(b < min)
min = b;
if(min < 0) {
min -= 131072;
r = 131072 - (r - 131072) * 131072 / min;
g = 131072 - (g - 131072) * 131072 / min;
b = 131072 - (b - 131072) * 131072 / min;
}
var max = (r > g) ? r : g;
if(b > max)
max = b;
if(max > 261120) {
max -= 131072;
r = 131072 + (r - 131072) * 130048 / max;
g = 131072 + (g - 131072) * 130048 / max;
b = 131072 + (b - 131072) * 130048 / max;
}
r >>= 10;
g >>= 10;
b >>= 10;
}
comp_data[i_data ] = r ^ 0xff;
comp_data[i_data + 1] = g ^ 0xff;
comp_data[i_data + 2] = b ^ 0xff;
comp_data[i_data + 3] = 255;
}
elem_val.textContent = (100 - i_data * 100 / gray_data.length).toFixed(0);
setTimeout((i_data) ? cre_img : cre_img_end, 0);
}
function cre_img_end() {
ctx_gray.putImageData(gray_imgdat, 0, 0);
ctx_comp.putImageData(comp_imgdat, 0, 0);
gray_imgdat = comp_imgdat = gray_data = comp_data = undefined;
elem_prog.style.visibility = "hidden";
elem_gray.style.visibility = "visible";
elem_file.disabled = elem_cre.disabled = elem_show.disabled = false;
document.documentElement.style.cursor = "auto";
}
function show_comp() {
elem_comp.style.visibility = "visible";
elem_gray.style.visibility = "hidden";
elem_file.disabled = elem_cre.disabled = elem_show.disabled = true;
setTimeout(hide_comp, 20000);
}
function hide_comp() {
elem_gray.style.visibility = "visible";
elem_comp.style.visibility = "hidden";
elem_file.disabled = elem_cre.disabled = elem_show.disabled = false;
}
elem_cont = document.getElementById("cont");
elem_file = document.getElementById("file");
elem_src = document.getElementById("src");
elem_lumi = document.getElementById("lumi");
elem_cre = document.getElementById("cre");
elem_prog = document.getElementById("prog");
elem_val = document.getElementById("val");
elem_show = document.getElementById("show");
elem_view = document.getElementById("view");
elem_gray = document.getElementById("gray");
elem_comp = document.getElementById("comp");
ctx_gray = elem_gray.getContext("2d");
ctx_comp = elem_comp.getContext("2d");
img_width = 0;
// ページを再ロードしたときのため
document.forms[0].reset();
elem_file.disabled = false;
//-->
</SCRIPT>
</BODY>
</HTML>
|
