MinhasKamal · June 29, 2018 14:37
diff --git a/egami.html b/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>