MinhasKamal/egami.html

## egami.html
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8"/>
	<title>Egami</title>
</head>


<body>

	<button id="create" onclick="createImage()">Create</button> <br />
	<input id="open" type="file" accept="image/*" onchange="loadImage(event)"></input> <br />
	<canvas id="inputImage" height="200em" width="auto" ></canvas> <br />
	<button onclick="editImage()">Edit</button> <br />
	<canvas id="outputImage" height="200em" width="auto" ></canvas> <br />
	<a id="save" href="" onclick="saveImage(this)" download="">Save</a> <br />


	<script>
	function createImage() {
		var canvas = document.createElement("canvas");
		var context = canvas.getContext("2d");
		var imageData = context.createImageData(200, 100);

		for (var i=0; i<imageData.data.length; i+=4) {
			imageData.data[i]=30+(i+130)%220;
			imageData.data[i+1]=150+(i+40)%100;
			imageData.data[i+2]=50+i%200;
			imageData.data[i+3]=200;
		}

		var inputCanvas = document.getElementById("inputImage");
		inputCanvas.getContext("2d").putImageData(imageData, 0, 0);
	}

	function loadImage(event) {
		var imageFile = event.target.files[0];
		var image = new Image();
		image.src = URL.createObjectURL(imageFile);

		var inputCanvas = document.getElementById("inputImage");

		image.onload = function() {
			inputCanvas.getContext("2d").drawImage(image, 0, 0, inputCanvas.width, inputCanvas.height);
		}
	}

	function editImage() {
		var inputCanvas = document.getElementById("inputImage");
		var imageData = inputCanvas.getContext("2d").getImageData(0, 0, inputCanvas.width, inputCanvas.height);

		edit(imageData);

		var outputCanvas = document.getElementById("outputImage");
		outputCanvas.getContext("2d").putImageData(imageData, 0, 0);
	}

	function edit(imageData){
		for (var i=0; i<imageData.data.length; i+=4) {
			//imageData.data[i+0]=200;
			imageData.data[i+1]=255-imageData.data[i+1];
			imageData.data[i+2]=200;
			imageData.data[i+3]=255;
		}
	}

	function saveImage(event) {
		var canvas = document.getElementById("outputImage");
		var image = canvas.toDataURL("image/png");
		event.href = image;
	}
	</script>

</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8"/>
	<title>Egami</title>
	</head>


	<body>

	<button id="create" onclick="createImage()">Create</button> <br />
	<input id="open" type="file" accept="image/*" onchange="loadImage(event)"></input> <br />
	<canvas id="inputImage" height="200em" width="auto" ></canvas> <br />
	<button onclick="editImage()">Edit</button> <br />
	<canvas id="outputImage" height="200em" width="auto" ></canvas> <br />
	<a id="save" href="" onclick="saveImage(this)" download="">Save</a> <br />


	<script>
	function createImage() {
	var canvas = document.createElement("canvas");
	var context = canvas.getContext("2d");
	var imageData = context.createImageData(200, 100);

	for (var i=0; i<imageData.data.length; i+=4) {
	imageData.data[i]=30+(i+130)%220;
	imageData.data[i+1]=150+(i+40)%100;
	imageData.data[i+2]=50+i%200;
	imageData.data[i+3]=200;
	}

	var inputCanvas = document.getElementById("inputImage");
	inputCanvas.getContext("2d").putImageData(imageData, 0, 0);
	}

	function loadImage(event) {
	var imageFile = event.target.files[0];
	var image = new Image();
	image.src = URL.createObjectURL(imageFile);

	var inputCanvas = document.getElementById("inputImage");

	image.onload = function() {
	inputCanvas.getContext("2d").drawImage(image, 0, 0, inputCanvas.width, inputCanvas.height);
	}
	}

	function editImage() {
	var inputCanvas = document.getElementById("inputImage");
	var imageData = inputCanvas.getContext("2d").getImageData(0, 0, inputCanvas.width, inputCanvas.height);

	edit(imageData);

	var outputCanvas = document.getElementById("outputImage");
	outputCanvas.getContext("2d").putImageData(imageData, 0, 0);
	}

	function edit(imageData){
	for (var i=0; i<imageData.data.length; i+=4) {
	//imageData.data[i+0]=200;
	imageData.data[i+1]=255-imageData.data[i+1];
	imageData.data[i+2]=200;
	imageData.data[i+3]=255;
	}
	}

	function saveImage(event) {
	var canvas = document.getElementById("outputImage");
	var image = canvas.toDataURL("image/png");
	event.href = image;
	}
	</script>

	</body>

	</html>