JavaScript/kcclipの編集履歴ソース - Sample is best!

JavaScript/kcclip - (2014/09/12 (金) 10:13:20) のソース

|開発環境|メモ帳|
|実行環境|Internet Explorer 11|
#table_zebra(project, #fff, #eee)

http://www.maroon.dti.ne.jp/lance/js/kcclip.html

kcclip.html
#highlight(javascript){{
<!doctype html>
<head>
<title>kcclip</title>
</head>

<body>
<div id="drop" style="width:800px; height:150px; padding:10px; border:3px solid;"
 ondragover="onDragOver(event)" ondrop="onDrop(event)">
<ol>
<li>Alt+PrintScreenで画面をコピーし、ビットマップファイルに貼り付けます。</li>
<li>ここに画像ファイルをドロップします。</li>
<li>必要であればモザイクの範囲を指定します。</li>
<li>generateボタンをクリックします。</li>
<li>img2を右クリックし名前を付けて画像を保存します。</li>
</ol>
</div>
<br>
mosaic(x,y,width,height)<br>
<textarea id="ta" cols=80 rows=5>
340,180,0,0
</textarea><br>
<br>
<button onclick="generate()">generate</button>
<ul type="square"><li>img2</li></ul>
<img id="img2"></img>
<ul type="square"><li>img1</li></ul>
<img id="img1"></img>
<ul type="square"><li>canvas1</li></ul>
<canvas id="canvas1"></canvas>
<ul type="square"><li>canvas2</li></ul>
<canvas id="canvas2"></canvas>
<script>

const WIDTH = 800;
const HEIGHT = 480;
const COLOR = 0xffffff;

var ta = document.getElementById("ta");
var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
var canvas1 = document.getElementById("canvas1"); // HTMLCanvasElement
var canvas2 = document.getElementById("canvas2");
var context1 = canvas1.getContext("2d");
var context2 = canvas2.getContext("2d");

function onDrop(event)
{
	var files = event.dataTransfer.files;
	var f = files[0];
	if (f.type.match("image.*")) {
		var reader = new FileReader();
		reader.onload = function(evt) {
			img1.src = evt.target.result;
		}
		reader.readAsDataURL(f);
	}

	event.preventDefault();
}

function onDragOver(event)
{
	event.preventDefault();
}

function generate()
{
	canvas1.width = img1.width; // natural
	canvas1.height = img1.height;
	context1.drawImage(img1, 0, 0);
	var imageData = context1.getImageData(0, 0, canvas1.width, canvas1.height);

	var x, y;
	var count = 0;
	Outer:
	for (y = 0; y <= canvas1.height - (HEIGHT+2); y++) {
		for (x = 0; x <= canvas1.width - (WIDTH+2); x++) {
			if (checkRect(imageData, x, y)) {
				count++;
				break Outer;
			}
		}
	}
	if (count <= 0) {
		alert("count=" + count);
		return;
	}

	imageData = context1.getImageData(x, y, WIDTH, HEIGHT);

	var csv = ta.value.trim();
	var rec = csv.split("\n");
	for (var i in rec) {
		var f = rec[i].split(",");
		mosaic(imageData, parseInt(f[0]), parseInt(f[1]), parseInt(f[2]), parseInt(f[3]));
	}

	canvas2.width = WIDTH;
	canvas2.height = HEIGHT;
	context2.putImageData(imageData, 0, 0);
	img2.src = canvas2.toDataURL("image/png");
}

function checkRect(imageData, x, y)
{
	for (var u = 0; u <= WIDTH+1; u++) {
		if (getPixel(imageData, x + u, y) != COLOR) return false;
		if (getPixel(imageData, x + u, y + HEIGHT+1) != COLOR) return false;
	}
	for (var v = 1; v <= HEIGHT; v++) {
		if (getPixel(imageData, x, y + v) != COLOR) return false;
		if (getPixel(imageData, x + WIDTH+1, y + v) != COLOR) return false;
	}
	return true;
}

function getPixel(imageData, x, y)
{
	var data = imageData.data;
	var base = (y * imageData.width + x) * 4;
	return (data[base+0]<<16) + (data[base+1]<<8) + data[base+2];
}

function mosaic(imageData, x, y, width, height)
{
	for (var v = 0; v < height; v += 4) {
		for (var u = 0; u < width; u += 4) {
			mosaic4(imageData, x + u, y + v);
		}
	}
}

function mosaic4(imageData, x, y)
{
	var data = imageData.data;
	var r = 0;
	var g = 0;
	var b = 0;

	for (var v = 0; v < 4; v++) {
		for (var u = 0; u < 4; u++) {
			var base = ((y+v) * imageData.width + (x+u)) * 4;
			r += data[base+0];
			g += data[base+1];
			b += data[base+2];
		}
	}

	r /= 16;
	g /= 16;
	b /= 16;

	for (var v = 0; v < 4; v++) {
		for (var u = 0; u < 4; u++) {
			var base = ((y+v) * imageData.width + (x+u)) * 4;
			data[base+0] = r;
			data[base+1] = g;
			data[base+2] = b;
		}
	}
}

</script>
</body>
}}
Sample is best! JavaScript > kcclip

JavaScript/kcclip - (2014/09/12 (金) 10:13:20) のソース
