title: Converting File object to Image object in JavaScript
body: <p>So I have a website (using AngularJS) that lets users upload files via tag </p>
  
  <pre><code>&lt;input type="file" ng-model="image" id="trigger" onchange="angular.element(this).scope().setFile(this)" accept="image/*"&gt;
  </code></pre>
  
  <p>When I handle the upload in the controller the image gets stored as a File object. This is my method that saves the file and also sets variables to preview the image</p>
  
  <pre><code>$scope.setFile = function (element) {
      $scope.image = element.files[0]; // This is my image as a File
      var reader = new FileReader();
  
      //This is for previewing the image
      reader.onload = function (event) {
          $scope.image_source = event.target.result;
          $scope.$apply();
  
      }
      reader.readAsDataURL(element.files[0]);
  }
  </code></pre>
  
  <p>Now I am trying to compress the image using J-I-C library found here: <a href="https://github.com/brunobar79/J-I-C/blob/master/src/JIC.js" rel="noreferrer">https://github.com/brunobar79/J-I-C/blob/master/src/JIC.js</a></p>
  
  <p>But this library accepts an image object as its parameter and returns it as a compressed image object.  I can't seem to find a way to convert my $scope.image File object into an Image object. How would I go about doing this?</p>
  
  <p>I would also need to convert the compressed image object back into a File so I can upload it to my Azure storage.</p>