Read and reduce image

by Simon Hi

HTML

<p>
  <input type="file" onchange="reduceImageSize(100,'png')">
</p>

JavaScript

function reduceImageSize(sizeMax, imageType) {
  var preview = document.createElement("img");
  var reduced = document.createElement("img");
  var file = document.querySelector('input[type=file]').files[0];
  var reader = new FileReader();
  var canvas = document.createElement("canvas");
  var maxWidth = sizeMax;
  var maxHeight = sizeMax;
  reader.onloadend = function() {
    preview.onload = function() {
      let r = Math.min(maxWidth / this.width, maxHeight / this.height);
      canvas.width = this.width * r;
      canvas.height = this.height * r;
      let context = canvas.getContext("2d");
      context.scale(r, r);
      context.drawImage(this, 0, 0);
      reduced.src = canvas.toDataURL(imageType);
      document.body.appendChild(reduced);
    };
    preview.src = reader.result;
  }
  if (file) reader.readAsDataURL(file);
}