JSFiddle - React, Tailwind, and code Playground

by andrefarzat

HTML

<script src="https://rawgit.com/tapmodo/Jcrop/v0.9.12/js/jquery.Jcrop.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/tapmodo/Jcrop/v0.9.12/css/jquery.Jcrop.min.css">
<script src="https://rawgit.com/andrefarzat/ng-jcrop/6b164000e2aaced83ee635d11f560a109c966d27/ng-jcrop.js"></script>
<div ng-app="mymodule">
    
    <div ng-controller="SomeController">
        <p>Selection: {{ obj.coords }}</p>
        <p><button ng-click="obj.coords = null">Set to null</button></p>
        <div ng-jcrop="obj.src" selection="obj.coords" thumbnail="obj.thumbnail"></div>
    </div>

</div>

JavaScript

var app = angular.module('mymodule', ['ngJcrop']);

// Optional configuration via ngJcropConfigProvider
// All jcrop settings are in: http://deepliquid.com/content/Jcrop_Manual.html#Setting_Options
app.config(function(ngJcropConfigProvider){
    
    ngJcropConfigProvider.setJcropConfig({
        bgColor: 'black',
        bgOpacity: .4,
        aspectRatio: 4 / 3,
        maxWidth: 400,
        maxHeight: 300
    });

});

app.controller('SomeController', function($scope){
    $scope.obj = {}

    // The url or the data64 for the image
    $scope.obj.src = 'http://www.imgion.com/images/01/beautiful-village-home.jpg';

    // Must be [x, y, x2, y2, w, h]
    $scope.obj.coords = null; //[100, 100, 200, 200, 100, 100];

    // You can add a thumbnail if you want
    $scope.obj.thumbnail = false;
});