JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.2.0/fabric.all.min.js"></script>
<ng-image-editor></ng-image-editor>

JavaScript

var myApp = angular.module('myApp', [])

var invokeImageChange = function(that) {
    angular.element(that).scope().imageChange(that)
    angular.element(that).scope().$digest();
}

var ImageCtrl = function($scope) {

    var desiredHeight = 300
    var desiredWidth = 770
    var myImageData = document.getElementById('fileData')
    var myImage = document.getElementById('myImage')
    var canvas = new fabric.Canvas('myCanvas')

    var rect = new fabric.Rect({
        fill: 'lightgray',
        left: canvas.width / 2,
        top: canvas.height / 2,
        width: desiredWidth,
        height: desiredHeight,
        stroke: 'darkgray',
        strokeDashArray: [5, 5],
        selectable: false
    });
    canvas.add(rect)
    var clipZone = {
        y: rect.top - (.5 * rect.height),
        x: rect.left - (.5 * rect.width),
        width: desiredWidth,
        height: desiredHeight,
        quality: 1
    }

    $scope.caption = "" ;
    $scope.fileUrl = "" ;

    $scope.imageChange = function(inp)  {
        console.log('imageChange')
        file = inp.files[0];
        fr = new FileReader();
        fr.onload = createImage;
        fr.readAsDataURL(file);

        var img = null

        function createImage() {
            console.log('createImage')
            img = new Image();
            img.onload = imageLoaded;
            img.src = fr.result;
        }

        function imageLoaded() {
            console.log('imageLoaded')
            var fabImg = new fabric.Image(img)

            fabImg.scale(1.0).set({
                left: canvas.width / 2,
                top: canvas.height / 2
            });

            canvas.add(fabImg)
            canvas.setActiveObject(fabImg)
        }
    }

    $scope.submit = function(event) {

    }

    $scope.capture = function() {
        console.log('capture')
        console.log($scope.file)
        var active = canvas.getActiveObject()
        canvas.deactivateAll()

        var data =...