<!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>
