61 lines
2.1 KiB
HTML
Executable File
61 lines
2.1 KiB
HTML
Executable File
<!-- start: PAGE TITLE -->
|
|
<section id="page-title">
|
|
<div class="row">
|
|
<div class="col-sm-8">
|
|
<h1 class="mainTitle" translate="sidebar.nav.forms.CROPPING">{{ mainTitle }}</h1>
|
|
<span class="mainDescription">Simple Image Crop directive for AngularJS. Enables to crop a circle or a square out of an image.</span>
|
|
</div>
|
|
<div ncy-breadcrumb></div>
|
|
</div>
|
|
</section>
|
|
<!-- end: PAGE TITLE -->
|
|
<!-- start: IMAGE CROP EXAMPLE -->
|
|
<div class="container-fluid container-fullw bg-white">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h5 class="over-title margin-bottom-15">Image Crop <span class="text-bold">example</span></h5>
|
|
<p class="margin-bottom-20">
|
|
Add the image crop directive <code><img-crop></code>
|
|
to the HTML file where you want to use an image crop control.
|
|
<br />
|
|
<em>Note:</em>
|
|
a container, you place the directive to, should have some pre-defined size (absolute or relative to its parent). That's required, because the image crop control fits the size of its container.
|
|
</p>
|
|
<!-- /// controller: 'CropCtrl' - localtion: assets/js/controllers/cropCtrl.js /// -->
|
|
<div ng-controller="CropCtrl">
|
|
<div class="row">
|
|
<div class="col-md-12 margin-bottom-30">
|
|
<span class="btn btn-primary btn-file"> Select an image file
|
|
<input type="file" id="fileInput"/>
|
|
</span>
|
|
<div class="btn-group">
|
|
<label class="btn btn-default btn-primary btn-o" ng-model="cropType" btn-radio="'square'">
|
|
Square
|
|
</label>
|
|
<label class="btn btn-primary btn-o" ng-model="cropType" btn-radio="'circle'">
|
|
Circle
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="cropBox">
|
|
<div class="cropArea">
|
|
<img-crop image="myImage" result-image="myCroppedImage" area-type="{{cropType}}"></img-crop>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="cropBox croppedBox">
|
|
<div>
|
|
<img ng-src="{{myCroppedImage}}" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end: IMAGE CROP EXAMPLE --> |