Converting File object to Image object in JavaScript
<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>