<!DOCTYPE HTML>
<HTML LANG="ja">
<HEAD>
<META CHARSET="Shift_JIS">
<TITLE>画像スタイルシート作成</TITLE>
</HEAD>
<BODY STYLE="background-color:#CCFFFF">
<DIV STYLE="text-align:center">
<BR>
<B>画像スタイルシート作成</B>
<BR><BR>
<FORM>
<DIV STYLE="display:inline-block; margin:0 auto; 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="in_img" WIDTH=100 HEIGHT=100 onLoad="in_sel2()" STYLE="object-fit:scale-down; visibility:hidden">
</DIV>
<SPAN ID="size" STYLE="display:inline-block; margin-top:4px"></SPAN>
<BR><BR>
<LABEL><INPUT TYPE=CHECKBOX ID="div">画像を分割する</LABEL>
<LABEL><INPUT TYPE=CHECKBOX ID="alpha" STYLE="margin-left:2em">透過を有効にする</LABEL>
<BR>
<INPUT TYPE=BUTTON ID="create" VALUE="作成" DISABLED onClick="create_html()">
<BR><BR>
<DIV ID="out" STYLE="position:relative; width:240px; height:240px; overflow:auto; margin:0 auto; background-color:white">
</DIV>
<DIV STYLE="display:inline-block; margin:0.5em auto 0">
<INPUT TYPE=BUTTON ID="view" VALUE="表示" DISABLED onClick="view_html()">
<INPUT TYPE=BUTTON ID="save" VALUE="保存" DISABLED onClick="save_html()" STYLE=" margin-left:0.5em">
</DIV>
</FORM>
</DIV>
<A ID="dl" DOWNLOAD="image.htm" STYLE="display:none"></A><!--保存処理用-->
<SCRIPT TYPE="text/javascript">
<!--
function in_sel() {
elem_in_img.style.visibility = "hidden";
elem_size.textContent = "";
elem_create.disabled = true;
elem_out.innerHTML = "";
elem_view.disabled = true;
elem_save.disabled = true;
if(src_url != undefined)
URL.revokeObjectURL(src_url);
elem_in_img.src = src_url = URL.createObjectURL(document.getElementById("file").files.item(0));
}
function in_sel2() {
// 入力画像サムネイル表示
elem_in_img.style.visibility = "visible";
elem_size.textContent = String(elem_in_img.naturalWidth) + "x" + String(elem_in_img.naturalHeight);
elem_create.disabled = false;
}
// 作成開始
function create_html() {
elem_work.width = Math.floor(elem_in_img.naturalWidth / dpu_x);
elem_work.height = Math.floor(elem_in_img.naturalHeight / dpu_y);
ctx_work.globalCompositeOperation = "copy";
ctx_work.drawImage(elem_in_img, 0, 0, elem_work.width, elem_work.height);
let img_width;
let img_height;
let img_data;
with(ctx_work.getImageData(0, 0, elem_work.width, elem_work.height)) {
img_width = width;
img_height = height;
img_data = data;
}
let alpha = document.getElementById("alpha").checked;
if(document.getElementById("div").checked) { // 画像を分割する
html = '<STYLE TYPE="text/css">#image{position:relative;width:'
+ String(img_width) + "px;height:" + String(img_height) + "px;}";
for(let x1 = 0; x1 < img_width; x1 += 100) {
for(let y1 = 0; y1 < img_height; y1 += 100) {
html += "#i" + String(x1 / 100) + "_" + String(y1 / 100)
+ "{position:absolute;left:" + String(x1) + "px;top:" + String(y1)
+ "px;width:1px;height:1px;box-shadow:";
let color00;
let y2_to = Math.min(img_height - y1, 100);
for(let y2 = 0; y2 < y2_to; y2++) {
let str_y = " " + ((y2) ? String(y2) + "px ": "0 ");
let i_data = ((y1 + y2) * img_width + x1) << 2;
let x2_to = Math.min(img_width - x1, 100);
for(let x2 = 0; x2 < x2_to; x2++) {
let color = "#" + ("0" + img_data[i_data ].toString(16)).substr(-2)
+ ("0" + img_data[i_data + 1].toString(16)).substr(-2)
+ ("0" + img_data[i_data + 2].toString(16)).substr(-2);
if(alpha) // 透過を有効にする
color += ("0" + img_data[i_data + 3].toString(16)).substr(-2);
if(!y2 && !x2) {
color00 = color;
}
else {
if(y2 * x2_to + x2 != 1)
html += ",";
html += String(x2) + str_y + color;
}
if(!x2)
str_y = "px" + str_y;
i_data += 4;
}
}
html += ";background-color:" + color00 + ";}";
}
}
html += '</STYLE><DIV ID="image">';
let x_to = Math.ceil(img_width / 100);
for(let x = 0; x < x_to; x++) {
let y_to = Math.ceil(img_height / 100);
for(let y = 0; y < y_to; y++)
html += '<DIV ID="i' + String(x) + "_" + String(y) + '"></DIV>';
}
html += "</DIV>";
}
else {
html = '<STYLE TYPE="text/css">#image{width:' + String(img_width) + "px;height:"
+ String(img_height) + "px;}#image1{width:1px;height:1px;box-shadow:";
let i_data = 0;
let color00;
for(let y = 0; y < img_height; y++) {
let str_y = " " + ((y) ? String(y) + "px ": "0 ");
for(let x = 0; x < img_width; x++) {
let color = "#" + ("0" + img_data[i_data ].toString(16)).substr(-2)
+ ("0" + img_data[i_data + 1].toString(16)).substr(-2)
+ ("0" + img_data[i_data + 2].toString(16)).substr(-2);
if(alpha) // 透過を有効にする
color += ("0" + img_data[i_data + 3].toString(16)).substr(-2);
if(!i_data) {
color00 = color;
}
else {
if(i_data != 4)
html += ",";
html += String(x) + str_y + color;
}
if(!x)
str_y = "px" + str_y;
i_data += 4;
}
}
html += ";background-color:" + color00 + ';}</STYLE><DIV ID="image"><DIV ID="image1"></DIV></DIV>';
}
// 出力 HTML 表示
elem_out.innerHTML = html;
with(document.getElementById("image").style) {
position = "absolute";
left = (img_width < elem_out.clientWidth) ? String((elem_out.clientWidth - img_width) >> 1) + "px" : "0";
top = (img_height < elem_out.clientHeight) ? String((elem_out.clientHeight - img_height) >> 1) + "px" : "0";
}
elem_view.disabled = false;
elem_save.disabled = false;
}
// 表示
function view_html() {
// "data" URL にしても表示されないので Blob の URL にする．
if(view_url != undefined)
URL.revokeObjectURL(view_url);
view_url = URL.createObjectURL(new Blob(["<!DOCTYPE HTML>", html], {type:"text/html"}));
open(view_url, "view");
}
// 保存
function save_html() {
with(document.getElementById("dl")) {
href = "data:text/html," + encodeURIComponent(html);
click();
}
}
let elem_in_img = document.getElementById("in_img");
let elem_size = document.getElementById("size");
let elem_create = document.getElementById("create");
let elem_out = document.getElementById("out");
let elem_view = document.getElementById("view");
let elem_save = document.getElementById("save");
// 作業用 Canvas
let elem_work = document.createElement("CANVAS");
let ctx_work = elem_work.getContext("2d");
elem_work.width = 1000;
elem_work.height = 1000;
let dpu_x = ctx_work.getImageData(0, 0, 1000, 1).width / 1000;
let dpu_y = ctx_work.getImageData(0, 0, 1, 1000).height / 1000;
let html;
let src_url = undefined;
let view_url = undefined;
// ページを再ロードしたときのため
document.forms[0].reset();
//-->
</SCRIPT>
</BODY>
</HTML>
|
