DanTheMan827/index.html

## index.html
<html>
  <head>
    <title>Super Nintendo Classic Mini Border Generation</title>
    <style type="text/css">
      .hidden { display: none; }
    </style>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://stuk.github.io/jszip/dist/jszip.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script>
    <script type="text/javascript">
      /*
        Copyright 2017 Daniel Radtke (DanTheMan827)

        This program is free software: you can redistribute it and/or modify
        it under the terms of the GNU General Public License as published by
        the Free Software Foundation, either version 3 of the License, or
        (at your option) any later version.

        This program is distributed in the hope that it will be useful,
        but WITHOUT ANY WARRANTY; without even the implied warranty of
        MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
        GNU General Public License for more details.

        You should have received a copy of the GNU General Public License
        along with this program.  If not, see <http://www.gnu.org/licenses/>.
      */
      $(function(){
        var $mainForm = $("form#mainForm");
        $mainForm.on("submit", function(e) {
          e.preventDefault();

          var url = $mainForm[0].url.value;
          var border = $("#border")[0].checked;
          var color = $("#rgb").val();

          var xhr = new XMLHttpRequest();
          xhr.open('GET', "https://cors-anywhere.herokuapp.com/" + url, true);
          xhr.responseType = 'blob';
          xhr.onload = function(e) {
            if (this.status == 200) {
              var reader = new FileReader();

              reader.onload = function(){
                // here you'll call what to do with the base64 string result
                var img = new Image;
                img.onload = function(e){
                  var cLg = document.createElement("canvas");
                  cLg.width = 1280;
                  cLg.height = 720;
                  var ctxLg = cLg.getContext('2d');
                  ctxLg.drawImage(img, 0, 0, 1280, 720);
                  ctxLg.imageSmoothingEnabled = false;

                  var cSm = document.createElement("canvas");
                  cSm.width = 320;
                  cSm.height = 180;
                  var ctxSm = cSm.getContext('2d');
                  ctxSm.drawImage(img, 0, 0, 320, 180);
                  ctxSm.imageSmoothingEnabled = false;

                  var cThumb = document.createElement("canvas");
                  cThumb.width = 172;
                  cThumb.height = 98;
                  var ctxThumb = cThumb.getContext('2d');
                  ctxThumb.drawImage(img, 0, 0, 172, 98);
                  ctxThumb.imageSmoothingEnabled = false;

                  var zip = new JSZip();

                  if(border){
                    ctxLg.fillStyle = color;
                    ctxLg.fillRect(253, 21, 774, 678);
                  }
                  zip.file("pixel_perfect.png", cLg.toDataURL("image/png").substring(22), {base64: true})

                  if(border){
                    ctxLg.fillStyle = color;
                    ctxLg.fillRect(198, 21, 883, 678);
                  }
                  zip.file("4_3.png", cLg.toDataURL().substring(22), {base64: true})

                  if(border){
                    ctxSm.fillStyle = color;
                    ctxSm.fillRect(64, 6, 192, 168);
                  }
                  zip.file("pixel_perfect_preview.png", cSm.toDataURL("image/png").substring(22), {base64: true})

                  if(border){
                    ctxSm.fillStyle = color;
                    ctxSm.fillRect(50, 6, 220, 168);
                  }
                  zip.file("4_3_preview.png", cSm.toDataURL("image/png").substring(22), {base64: true})

                  if(border){
                    ctxThumb.fillStyle = color;
                    ctxThumb.fillRect(34, 3, 104, 92);
                  }
                  zip.file("thumbnail.png", cThumb.toDataURL("image/png").substring(22), {base64: true})

                  zip.generateAsync({type:"blob"}).then(function (blob) { // 1) generate the zip file
                    saveAs(blob, "border.zip");                           // 2) trigger the download
                  }, console.log);

                }
                img.src = this.result;
                console.log()
              };

              reader.readAsDataURL(this.response);
            } else {
              alert("There was an error loading the image.")
            }
          }
          xhr.onerror = function(){
            alert("There was an error loading the image.")
          }
          xhr.send();
        })
      })
    </script>
  </head>
  <body>
    <center>
      <b>
      <u>Super Nintendo Classic Mini Border Generation</u></b>
      <p>If your image doesn't work, the website probably doesn't like direct linking. Upload it to imgur.com and try again.</p>
      <form id="mainForm">
        <p><label for="border"><b>Direct link to image</b></label><br/>
          <input name="border" id="url" type="text" name="url" size="70" value="https://i.imgur.com/lNThuRu.png"/>
        </p>
        <p><b>Border: </b>
          <input type="checkbox" id="border" value="1" checked />
        </p>
        <p><b>Border Color</b><br/>
          <input id="rgb" type="color" name="rgb" value="#000000"/>
        </p>
        <p>
          <input type="submit"/>
        </p>
      </form>
    </center>
  </body>
</html>
	<html>
	<head>
	<title>Super Nintendo Classic Mini Border Generation</title>
	<style type="text/css">
	.hidden { display: none; }
	</style>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://stuk.github.io/jszip/dist/jszip.js"></script>
	<script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script>
	<script type="text/javascript">
	/*
	Copyright 2017 Daniel Radtke (DanTheMan827)

	This program is free software: you can redistribute it and/or modify
	it under the terms of the GNU General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
	(at your option) any later version.

	This program is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
	GNU General Public License for more details.

	You should have received a copy of the GNU General Public License
	along with this program. If not, see <http://www.gnu.org/licenses/>.
	*/
	$(function(){
	var $mainForm = $("form#mainForm");
	$mainForm.on("submit", function(e) {
	e.preventDefault();

	var url = $mainForm[0].url.value;
	var border = $("#border")[0].checked;
	var color = $("#rgb").val();

	var xhr = new XMLHttpRequest();
	xhr.open('GET', "https://cors-anywhere.herokuapp.com/" + url, true);
	xhr.responseType = 'blob';
	xhr.onload = function(e) {
	if (this.status == 200) {
	var reader = new FileReader();

	reader.onload = function(){
	// here you'll call what to do with the base64 string result
	var img = new Image;
	img.onload = function(e){
	var cLg = document.createElement("canvas");
	cLg.width = 1280;
	cLg.height = 720;
	var ctxLg = cLg.getContext('2d');
	ctxLg.drawImage(img, 0, 0, 1280, 720);
	ctxLg.imageSmoothingEnabled = false;

	var cSm = document.createElement("canvas");
	cSm.width = 320;
	cSm.height = 180;
	var ctxSm = cSm.getContext('2d');
	ctxSm.drawImage(img, 0, 0, 320, 180);
	ctxSm.imageSmoothingEnabled = false;

	var cThumb = document.createElement("canvas");
	cThumb.width = 172;
	cThumb.height = 98;
	var ctxThumb = cThumb.getContext('2d');
	ctxThumb.drawImage(img, 0, 0, 172, 98);
	ctxThumb.imageSmoothingEnabled = false;

	var zip = new JSZip();

	if(border){
	ctxLg.fillStyle = color;
	ctxLg.fillRect(253, 21, 774, 678);
	}
	zip.file("pixel_perfect.png", cLg.toDataURL("image/png").substring(22), {base64: true})

	if(border){
	ctxLg.fillStyle = color;
	ctxLg.fillRect(198, 21, 883, 678);
	}
	zip.file("4_3.png", cLg.toDataURL().substring(22), {base64: true})

	if(border){
	ctxSm.fillStyle = color;
	ctxSm.fillRect(64, 6, 192, 168);
	}
	zip.file("pixel_perfect_preview.png", cSm.toDataURL("image/png").substring(22), {base64: true})

	if(border){
	ctxSm.fillStyle = color;
	ctxSm.fillRect(50, 6, 220, 168);
	}
	zip.file("4_3_preview.png", cSm.toDataURL("image/png").substring(22), {base64: true})

	if(border){
	ctxThumb.fillStyle = color;
	ctxThumb.fillRect(34, 3, 104, 92);
	}
	zip.file("thumbnail.png", cThumb.toDataURL("image/png").substring(22), {base64: true})

	zip.generateAsync({type:"blob"}).then(function (blob) { // 1) generate the zip file
	saveAs(blob, "border.zip"); // 2) trigger the download
	}, console.log);

	}
	img.src = this.result;
	console.log()
	};

	reader.readAsDataURL(this.response);
	} else {
	alert("There was an error loading the image.")
	}
	}
	xhr.onerror = function(){
	alert("There was an error loading the image.")
	}
	xhr.send();
	})
	})
	</script>
	</head>
	<body>
	<center>
	<b>
	<u>Super Nintendo Classic Mini Border Generation</u></b>
	<p>If your image doesn't work, the website probably doesn't like direct linking. Upload it to imgur.com and try again.</p>
	<form id="mainForm">
	<p><label for="border"><b>Direct link to image</b></label><br/>
	<input name="border" id="url" type="text" name="url" size="70" value="https://i.imgur.com/lNThuRu.png"/>
	</p>
	<p><b>Border: </b>
	<input type="checkbox" id="border" value="1" checked />
	</p>
	<p><b>Border Color</b><br/>
	<input id="rgb" type="color" name="rgb" value="#000000"/>
	</p>
	<p>
	<input type="submit"/>
	</p>
	</form>
	</center>
	</body>
	</html>