basictomonokai/mosaic2.html

## mosaic2.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />
<style>
html,body {
  margin: 0;
}

body {
   font-family: "Rounded Mplus 1c";
   font-size: 100%;
   color: #ecf0f1;
   background: #2c3e50;
}

#kkaf {
   font-size: 1.5rem;
   margin: 0px;
}

#kkaf2 {
   font-size: 1.5rem;
   margin: 10px;
}

input {
   font-size: 1.2rem;

}

.desc {
   margin-top: 10px;
   font-size: 1rem;
   border: 1px solid #ecf0f1;
   width: 80%;
   padding: 5px;
   color: #ecf0f1;
   background: #27ae60;
}


</style>


  <title>partially colored out</title>


<style type="text/css">
<!--

.buttonx {
  width:120px;
  color:#ffffff;
  background:#e67e22;
  font-family: fantasy,sans-serif;
  font-size:24px;
  font-weight:bold;
  text-shadow:0 1px 0px #143352,0 2px 0px #143352;
  text-align:center;
  display:inline-block;
  text-decoration:none;
  border:1px solid #225588;
  padding:5px 0 2px 0;
  border-radius:5px;
  margin-bottom:20px;
  margin-left:10px;
  opacity: 0.7;
}

-->


</style>

<style>

div#footer-fixed
{
    position: fixed;            /* フッターの固定 */
    bottom: 0px;                /* 位置(下0px) */
    left: 0px;                  /* 位置(左0px) */
    width: 100%;                /* 横幅100%　*/
    height: 70px;              /* 縦幅70px */
}


div#body-bk{
    padding: 0px 0 80px 0;    /* 下に80pxを余白を取る */
}

</style>


<script>

var red   = 0;
var green = 0;
var blue  = 0;


function zzz(imgdata) {
	var canvas  = document.getElementById('drowing');
	var context = canvas.getContext('2d');
	var reacts = [];

	var imageObj = new Image();
	imageObj.onload = function() {
		canvas.width = imageObj.width;
		canvas.height = imageObj.height;
		draw();
	};
	imageObj.src = imgdata;

	canvas.addEventListener("mousedown", onMouseDown, false);
	canvas.addEventListener("mouseup"  , onMouseUp  , false);
	window.addEventListener("keyup"  , onKeyUp  , false);

    // 矩形オブジェクト
    var _rectangle = createRect();

	function createRect() {
		return { startY:0, startX:0, endY:0, endX:0 };
	};

    function onMouseDown (e) {
        _rectangle.startY = e.clientY;
        _rectangle.startX = e.clientX;
        canvas.addEventListener ("mousemove", onMouseMove, false);
    };

    function onMouseMove (e) {
		draw();
        _rectangle.endY = e.layerY - _rectangle.startY;
        _rectangle.endX = e.layerX - _rectangle.startX;
        context.lineWidth = 5;
	context.strokeStyle = "rgb(255, 0, 0)";
        context.strokeRect (_rectangle.startX, _rectangle.startY, _rectangle.endX, _rectangle.endY);
    };

    function onMouseUp (e) {
		reacts.push(_rectangle);
		draw();
		_rectangle = createRect();
        canvas.removeEventListener ("mousemove", onMouseMove, false);
    };

	function draw() {
		context.drawImage(imageObj, 0, 0);
                context.lineWidth = 5;
		context.strokeStyle = "rgb("+ red + ", "+ green + ", "+ blue + ")";
                context.fillStyle = "rgb("+ red + ", "+ green + ", "+ blue + ")";

		reacts.forEach(function(rect) {
			context.fillRect(rect.startX, rect.startY, rect.endX, rect.endY);
		});
	};

	function onKeyUp (e) {
		switch(e.key) {
			case 'z':
				reacts.pop();
				break;
			default:
				return;
		};
		draw();
	};

        var el1 = document.getElementById("back");

        el1.addEventListener( 'click', function(e) {
          console.log('xaxa');
          reacts.pop();
          draw();

        });


};
</script>


</head>

<body>


<div id="body-bk">

<div id="kkaf">
    <div class="main">
        <canvas id="drowing" class="drowing" width="0" height="0"></canvas>
    </div>
</div>

<div id="kkaf2">

    <div>
        <div>Partially Colored Out<div>
    <div>
        <input type="file" id="file" name="file"/ accept="image/*">
    </div>
    <div>

      <label>
        塗り潰し色
        <input id="color" type="color" value="" list="color-list">
        <datalist id="color-list">
          <option value="#000000"></option>
          <option value="#ff0000"></option>
          <option value="#008000"></option>
          <option value="#0000ff"></option>
          <option value="#ffff00"></option>
        </datalist>
      </label>
    </div>
      <div class="desc">
      画像の一部を特定色で塗り潰します<br>
      ※zキーでも最新の塗り潰し箇所を削除できます
      </div>
    </div>

</div>

</div>

<div id="footer-fixed">

<a class="buttonx" onmouseover="this.style.background='#e67e22'" onmouseout="this.style.background='#d35400'" onclick="this.style.background='#e74c3c';resetimg()">リセット</a>
<a id="back" class="buttonx" onmouseover="this.style.background='#e67e22'" onmouseout="this.style.background='#d35400'" onclick="this.style.background='#e74c3c'">やり直し</a>
<a class="buttonx" onmouseover="this.style.background='#e67e22'" onmouseout="this.style.background='#d35400'" onclick="this.style.background='#e74c3c';downimg()">保存</a>

<script>

//ファイル選択ボタン

var el2 = document.getElementById("file");

el2.addEventListener( 'change', function(e) {

    var result = e.target.files[0];
    aaresult=e.target.files[0];

    //FileReaderのインスタンスを作成する
    var reader = new FileReader();

    //読み込んだファイルの中身を取得する
    reader.readAsDataURL(result);

    //ファイルの中身を取得後に処理を行う
    reader.addEventListener( 'load', function() {

        //ファイルの中身をエディター内に表示する
        console.log(reader.result);
        zzz( reader.result );
    })

});

function resetimg() {
  location.reload();
}

function downimg() {
  let canvas = document.getElementById('drowing')
  let link = document.createElement('a')
  link.href = canvas.toDataURL()
  link.download = 'mosaic.png'
  link.click()
}

color.onchange = function () {
  console.log('color:'+this.value);
  var code = this.value;
  red   = parseInt(code.substring(1,3), 16);
  green = parseInt(code.substring(3,5), 16);
  blue  = parseInt(code.substring(5,7), 16);
}


</script>


</div>


</body>


</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

	<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />
	<style>
	html,body {
	margin: 0;
	}

	body {
	font-family: "Rounded Mplus 1c";
	font-size: 100%;
	color: #ecf0f1;
	background: #2c3e50;
	}

	#kkaf {
	font-size: 1.5rem;
	margin: 0px;
	}

	#kkaf2 {
	font-size: 1.5rem;
	margin: 10px;
	}

	input {
	font-size: 1.2rem;

	}

	.desc {
	margin-top: 10px;
	font-size: 1rem;
	border: 1px solid #ecf0f1;
	width: 80%;
	padding: 5px;
	color: #ecf0f1;
	background: #27ae60;
	}



	</style>



	<title>partially colored out</title>



	<style type="text/css">
	<!--

	.buttonx {
	width:120px;
	color:#ffffff;
	background:#e67e22;
	font-family: fantasy,sans-serif;
	font-size:24px;
	font-weight:bold;
	text-shadow:0 1px 0px #143352,0 2px 0px #143352;
	text-align:center;
	display:inline-block;
	text-decoration:none;
	border:1px solid #225588;
	padding:5px 0 2px 0;
	border-radius:5px;
	margin-bottom:20px;
	margin-left:10px;
	opacity: 0.7;
	}

	-->


	</style>

	<style>

	div#footer-fixed
	{
	position: fixed; /* フッターの固定 */
	bottom: 0px; /* 位置(下0px) */
	left: 0px; /* 位置(左0px) */
	width: 100%; /* 横幅100%　*/
	height: 70px; /* 縦幅70px */
	}


	div#body-bk{
	padding: 0px 0 80px 0; /* 下に80pxを余白を取る */
	}

	</style>


	<script>

	var red = 0;
	var green = 0;
	var blue = 0;


	function zzz(imgdata) {
	var canvas = document.getElementById('drowing');
	var context = canvas.getContext('2d');
	var reacts = [];

	var imageObj = new Image();
	imageObj.onload = function() {
	canvas.width = imageObj.width;
	canvas.height = imageObj.height;
	draw();
	};
	imageObj.src = imgdata;

	canvas.addEventListener("mousedown", onMouseDown, false);
	canvas.addEventListener("mouseup" , onMouseUp , false);
	window.addEventListener("keyup" , onKeyUp , false);

	// 矩形オブジェクト
	var _rectangle = createRect();

	function createRect() {
	return { startY:0, startX:0, endY:0, endX:0 };
	};

	function onMouseDown (e) {
	_rectangle.startY = e.clientY;
	_rectangle.startX = e.clientX;
	canvas.addEventListener ("mousemove", onMouseMove, false);
	};

	function onMouseMove (e) {
	draw();
	_rectangle.endY = e.layerY - _rectangle.startY;
	_rectangle.endX = e.layerX - _rectangle.startX;
	context.lineWidth = 5;
	context.strokeStyle = "rgb(255, 0, 0)";
	context.strokeRect (_rectangle.startX, _rectangle.startY, _rectangle.endX, _rectangle.endY);
	};

	function onMouseUp (e) {
	reacts.push(_rectangle);
	draw();
	_rectangle = createRect();
	canvas.removeEventListener ("mousemove", onMouseMove, false);
	};

	function draw() {
	context.drawImage(imageObj, 0, 0);
	context.lineWidth = 5;
	context.strokeStyle = "rgb("+ red + ", "+ green + ", "+ blue + ")";
	context.fillStyle = "rgb("+ red + ", "+ green + ", "+ blue + ")";

	reacts.forEach(function(rect) {
	context.fillRect(rect.startX, rect.startY, rect.endX, rect.endY);
	});
	};

	function onKeyUp (e) {
	switch(e.key) {
	case 'z':
	reacts.pop();
	break;
	default:
	return;
	};
	draw();
	};

	var el1 = document.getElementById("back");

	el1.addEventListener( 'click', function(e) {
	console.log('xaxa');
	reacts.pop();
	draw();

	});


	};
	</script>


	</head>

	<body>


	<div id="body-bk">

	<div id="kkaf">
	<div class="main">
	<canvas id="drowing" class="drowing" width="0" height="0"></canvas>
	</div>
	</div>

	<div id="kkaf2">

	<div>
	<div>Partially Colored Out<div>
	<div>
	<input type="file" id="file" name="file"/ accept="image/*">
	</div>
	<div>

	<label>
	塗り潰し色
	<input id="color" type="color" value="" list="color-list">
	<datalist id="color-list">
	<option value="#000000"></option>
	<option value="#ff0000"></option>
	<option value="#008000"></option>
	<option value="#0000ff"></option>
	<option value="#ffff00"></option>
	</datalist>
	</label>
	</div>
	<div class="desc">
	画像の一部を特定色で塗り潰します<br>
	※zキーでも最新の塗り潰し箇所を削除できます
	</div>
	</div>

	</div>

	</div>

	<div id="footer-fixed">

	<a class="buttonx" onmouseover="this.style.background='#e67e22'" onmouseout="this.style.background='#d35400'" onclick="this.style.background='#e74c3c';resetimg()">リセット</a>
	<a id="back" class="buttonx" onmouseover="this.style.background='#e67e22'" onmouseout="this.style.background='#d35400'" onclick="this.style.background='#e74c3c'">やり直し</a>
	<a class="buttonx" onmouseover="this.style.background='#e67e22'" onmouseout="this.style.background='#d35400'" onclick="this.style.background='#e74c3c';downimg()">保存</a>

	<script>

	//ファイル選択ボタン

	var el2 = document.getElementById("file");

	el2.addEventListener( 'change', function(e) {

	var result = e.target.files[0];
	aaresult=e.target.files[0];

	//FileReaderのインスタンスを作成する
	var reader = new FileReader();

	//読み込んだファイルの中身を取得する
	reader.readAsDataURL(result);

	//ファイルの中身を取得後に処理を行う
	reader.addEventListener( 'load', function() {

	//ファイルの中身をエディター内に表示する
	console.log(reader.result);
	zzz( reader.result );
	})

	});

	function resetimg() {
	location.reload();
	}

	function downimg() {
	let canvas = document.getElementById('drowing')
	let link = document.createElement('a')
	link.href = canvas.toDataURL()
	link.download = 'mosaic.png'
	link.click()
	}

	color.onchange = function () {
	console.log('color:'+this.value);
	var code = this.value;
	red = parseInt(code.substring(1,3), 16);
	green = parseInt(code.substring(3,5), 16);
	blue = parseInt(code.substring(5,7), 16);
	}


	</script>


	</div>


	</body>





	</html>