lot224/fileInput processing.html

## fileInput processing.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>FileInput -> Image -> Canvas -> Bytes</title>
</head>

<body>
  <div>
    <div>
      <div>
        <h3>
          <ul>
            <li>This Example uses the <a href="https://caniuse.com/#feat=filereader" target="_blank">FileReader</a> API</li>
            <li>Checks to see if the uploaded image is greater than 3mb before resizing.</li>
            <li>Resizes images down to a max width/height of 1024 pixels maintaining the correct ratio.</li>
            <li>This does not do any error handling in case of a non-image upload.</li>
          </ul>
        </h3>

        <input id="fileUpload" type="file">
        <br/>
        <h2 id="comments"></h2>

        <div style="position: absolute; top:200px; left:10px; width:calc(50% - 15px); bottom:10px; overflow: auto;">
          <img id="resultImage">
        </div>

        <div style="position: absolute; top:200px; right:10px; width:calc(50% - 15px); bottom:10px; overflow: auto;">
          <textarea id="txtBytes" style="position: absolute; height: 100%; box-sizing: border-box; width: 100%; margin: auto;"></textarea>
        </div>

        <canvas id="canvas" style="display: none;"></canvas>

      </div>
    </div>
  </div>
</body>

</html>

<script type="text/javascript">
  /*
    This Example uses the FileReader
    https://caniuse.com/#feat=filereader
  */

  // Constants
  var maxBytes = 1048576 * 3; // 3mb max size,
  var quality = "1";          // 0.1 - 1
  var maxSize = 1024;         // this is the max height/width of the image we want to resize if the filesize exceeds the maxBytes limit.

  // Element Refrences
  var fileUpload = document.getElementById('fileUpload');
  var resultImage = document.getElementById('resultImage');
  var txtBytes = document.getElementById('txtBytes');
  var comments = document.getElementById('comments');

  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  var reader = new FileReader

  fileUpload.addEventListener('change', function () {
    comments.innerText = '';
    // Get the file refrence from the input type=file element
    var file = this.files[0];

    reader.fileInput = file;
    reader.readAsDataURL(file);
  }, false);

  reader.addEventListener('load', function(e) {

    if (reader.fileInput.size > maxBytes) {
      comments.innerText = reader.fileInput.size + ' > ' + maxBytes + ' Will Resize Image.';
      var img = new Image;

      img.onload = function () {

        var dataUrl;

        var ratio = 1;

        var dimensions = {
          width: img.width,
          height: img.height,
        }

        var orientation;

        if (dimensions.width > dimensions.height) {
          orientation = 'horizontal';
          if (dimensions.width > maxSize)
            ratio = maxSize / dimensions.width;
        } else {
          orientation = 'vertical';
          if (dimensions.height > maxSize)
            ratio = maxSize / dimensions.width;
        }

        canvas.width = dimensions.width * ratio;
        canvas.height = dimensions.height * ratio;

        context.drawImage(img, 0, 0, canvas.width, canvas.height);

        var dataUrl = canvas.toDataURL("image/jpeg", quality);

        resultImage.src = (dataUrl);
        txtBytes.innerText = dataUrl;
      }

      img.src = e.target.result;
    } else {
      comments.innerText = reader.fileInput.size + ' < ' + maxBytes + ' Will NOT Resize Image.';

      resultImage.src = e.target.result;
      txtBytes.innerText = e.target.result;
    }

  });

</script>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>FileInput -> Image -> Canvas -> Bytes</title>
	</head>

	<body>
	<div>
	<div>
	<div>
	<h3>
	<ul>
	<li>This Example uses the <a href="https://caniuse.com/#feat=filereader" target="_blank">FileReader</a> API</li>
	<li>Checks to see if the uploaded image is greater than 3mb before resizing.</li>
	<li>Resizes images down to a max width/height of 1024 pixels maintaining the correct ratio.</li>
	<li>This does not do any error handling in case of a non-image upload.</li>
	</ul>
	</h3>

	<input id="fileUpload" type="file">
	<br/>
	<h2 id="comments"></h2>

	<div style="position: absolute; top:200px; left:10px; width:calc(50% - 15px); bottom:10px; overflow: auto;">
	<img id="resultImage">
	</div>

	<div style="position: absolute; top:200px; right:10px; width:calc(50% - 15px); bottom:10px; overflow: auto;">
	<textarea id="txtBytes" style="position: absolute; height: 100%; box-sizing: border-box; width: 100%; margin: auto;"></textarea>
	</div>

	<canvas id="canvas" style="display: none;"></canvas>

	</div>
	</div>
	</div>
	</body>

	</html>

	<script type="text/javascript">
	/*
	This Example uses the FileReader
	https://caniuse.com/#feat=filereader
	*/

	// Constants
	var maxBytes = 1048576 * 3; // 3mb max size,
	var quality = "1"; // 0.1 - 1
	var maxSize = 1024; // this is the max height/width of the image we want to resize if the filesize exceeds the maxBytes limit.

	// Element Refrences
	var fileUpload = document.getElementById('fileUpload');
	var resultImage = document.getElementById('resultImage');
	var txtBytes = document.getElementById('txtBytes');
	var comments = document.getElementById('comments');

	var canvas = document.getElementById('canvas');
	var context = canvas.getContext('2d');

	var reader = new FileReader

	fileUpload.addEventListener('change', function () {
	comments.innerText = '';
	// Get the file refrence from the input type=file element
	var file = this.files[0];

	reader.fileInput = file;
	reader.readAsDataURL(file);
	}, false);

	reader.addEventListener('load', function(e) {

	if (reader.fileInput.size > maxBytes) {
	comments.innerText = reader.fileInput.size + ' > ' + maxBytes + ' Will Resize Image.';
	var img = new Image;

	img.onload = function () {

	var dataUrl;

	var ratio = 1;

	var dimensions = {
	width: img.width,
	height: img.height,
	}

	var orientation;

	if (dimensions.width > dimensions.height) {
	orientation = 'horizontal';
	if (dimensions.width > maxSize)
	ratio = maxSize / dimensions.width;
	} else {
	orientation = 'vertical';
	if (dimensions.height > maxSize)
	ratio = maxSize / dimensions.width;
	}

	canvas.width = dimensions.width * ratio;
	canvas.height = dimensions.height * ratio;

	context.drawImage(img, 0, 0, canvas.width, canvas.height);

	var dataUrl = canvas.toDataURL("image/jpeg", quality);

	resultImage.src = (dataUrl);
	txtBytes.innerText = dataUrl;
	}

	img.src = e.target.result;
	} else {
	comments.innerText = reader.fileInput.size + ' < ' + maxBytes + ' Will NOT Resize Image.';

	resultImage.src = e.target.result;
	txtBytes.innerText = e.target.result;
	}

	});

	</script>