JamesIves/meme_generator.html

## meme_generator.html
<!DOCTYPE html>

<html>
  <head>
    <title>James' Meme Generator</title>

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
    />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <style>
      #image-container {
        display: flex;
      }

      .text-style {
        font-family: Verdana;
        font-weight: bold;
        font-size: 15px;
      }
    </style>
  </head>

  <body>
    <div>
      <input type="file" id="file" />
    </div>

    <div id="image-container">
      <canvas width="500" height="500"></canvas>

      <div>
        <span class="text-style">Top Line:</span><br />
        <input id="topLineText" type="text" /><br />
        <span class="text-style">Bottom Line:</span><br />
        <input id="bottomLineText" type="text" /><br />
        <button id="saveBtn">Save</button>
      </div>
    </div>

    <script>
      function textChangeListener(evt) {
        var id = evt.target.id;
        var text = evt.target.value;

        if (id == "topLineText") {
          window.topLineText = text;
        } else {
          window.bottomLineText = text;
        }

        redrawMeme(window.imageSrc, window.topLineText, window.bottomLineText);
      }

      function redrawMeme(image, topLine, bottomLine) {
        var canvas = document.querySelector("canvas");
        var ctx = canvas.getContext("2d");

        if (image != null)
          ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

        ctx.font = "30pt Impact";
        ctx.textAlign = "center";
        ctx.strokeStyle = "black";
        ctx.lineWidth = 3;
        ctx.fillStyle = "white";

        if (topLine != null) {
          ctx.fillText(topLine, canvas.width / 2, 40);
          ctx.strokeText(topLine, canvas.width / 2, 40);
        }

        if (bottomLine != null) {
          ctx.fillText(bottomLine, canvas.width / 2, canvas.height - 20);
          ctx.strokeText(bottomLine, canvas.width / 2, canvas.height - 20);
        }
      }

      function saveFile() {
        window.open(document.querySelector("canvas").toDataURL());
      }

      function handleFileSelect(evt) {
        var canvasWidth = 500;
        var canvasHeight = 500;
        var file = evt.target.files[0];

        var reader = new FileReader();

        reader.onload = function(fileObject) {
          var data = fileObject.target.result;

          var image = new Image();

          image.onload = function() {
            window.imageSrc = this;
            redrawMeme(window.imageSrc, null, null);
          };

          image.src = data;
          console.log(fileObject.target.result);
        };

        reader.readAsDataURL(file);
      }

      window.topLineText = "";
      window.bottomLineText = "";

      var input1 = document.getElementById("topLineText");
      var input2 = document.getElementById("bottomLineText");

      input1.oninput = textChangeListener;
      input2.oninput = textChangeListener;

      document
        .getElementById("file")
        .addEventListener("change", handleFileSelect, false);
      document
        .querySelector("button")
        .addEventListener("click", saveFile, false);
    </script>
  </body>
</html>
	<!DOCTYPE html>

	<html>
	<head>
	<title>James' Meme Generator</title>

	<meta
	name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
	/>
	<meta name="mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-capable" content="yes" />

	<style>
	#image-container {
	display: flex;
	}

	.text-style {
	font-family: Verdana;
	font-weight: bold;
	font-size: 15px;
	}
	</style>
	</head>

	<body>
	<div>
	<input type="file" id="file" />
	</div>

	<div id="image-container">
	<canvas width="500" height="500"></canvas>

	<div>
	<span class="text-style">Top Line:</span><br />
	<input id="topLineText" type="text" /><br />
	<span class="text-style">Bottom Line:</span><br />
	<input id="bottomLineText" type="text" /><br />
	<button id="saveBtn">Save</button>
	</div>
	</div>

	<script>
	function textChangeListener(evt) {
	var id = evt.target.id;
	var text = evt.target.value;

	if (id == "topLineText") {
	window.topLineText = text;
	} else {
	window.bottomLineText = text;
	}

	redrawMeme(window.imageSrc, window.topLineText, window.bottomLineText);
	}

	function redrawMeme(image, topLine, bottomLine) {
	var canvas = document.querySelector("canvas");
	var ctx = canvas.getContext("2d");

	if (image != null)
	ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

	ctx.font = "30pt Impact";
	ctx.textAlign = "center";
	ctx.strokeStyle = "black";
	ctx.lineWidth = 3;
	ctx.fillStyle = "white";

	if (topLine != null) {
	ctx.fillText(topLine, canvas.width / 2, 40);
	ctx.strokeText(topLine, canvas.width / 2, 40);
	}

	if (bottomLine != null) {
	ctx.fillText(bottomLine, canvas.width / 2, canvas.height - 20);
	ctx.strokeText(bottomLine, canvas.width / 2, canvas.height - 20);
	}
	}

	function saveFile() {
	window.open(document.querySelector("canvas").toDataURL());
	}

	function handleFileSelect(evt) {
	var canvasWidth = 500;
	var canvasHeight = 500;
	var file = evt.target.files[0];

	var reader = new FileReader();

	reader.onload = function(fileObject) {
	var data = fileObject.target.result;

	var image = new Image();

	image.onload = function() {
	window.imageSrc = this;
	redrawMeme(window.imageSrc, null, null);
	};

	image.src = data;
	console.log(fileObject.target.result);
	};

	reader.readAsDataURL(file);
	}

	window.topLineText = "";
	window.bottomLineText = "";

	var input1 = document.getElementById("topLineText");
	var input2 = document.getElementById("bottomLineText");

	input1.oninput = textChangeListener;
	input2.oninput = textChangeListener;

	document
	.getElementById("file")
	.addEventListener("change", handleFileSelect, false);
	document
	.querySelector("button")
	.addEventListener("click", saveFile, false);
	</script>
	</body>
	</html>