angularCrop

Module to angularjs for selecting a rectangular area of an image

Added by: Sam Deering

GitHub

Repository

abaddongit/angularcrop

Stats

Stars: 0

Watchers: 0

Forks: 1

Module Description

angularCrop

Обрезка изображений на angularjs.

Подключение

  1. Подключаем:

    var app = angular.module('app', ['angularCrop']);
  2. В шаблоне:

    <div ng-init-crop crop-min-sizes="{'width': 122, 'height': 122}" crop-width="600" crop-height="480" crop-point="{'top': 10, 'left': 10, 'width': 142, 'height': 142, 'ratio': true}" id="crop" result="cords">
       <img src="img/12.jpg" width="600" height="480" alt=""/>
    </div>
    <div id="result">
        <input type="text" value="{{cords.x1}}" />
        <input type="text" value="{{cords.y1}}" />
        <input type="text" value="{{cords.x2}}" />
        <input type="text" value="{{cords.y2}}" />
        <input type="text" value="{{cords.width}}" />
        <input type="text" value="{{cords.height}}" />
    </div>
            
    cropMinSizes - минимальные размеры выделяемой области.
    cropWidth - ширина рабочей области (может изменяться динамически).
    cropHeight - высота рабочей области (может изменяться динамически).
    point - стартовая позиция выделенной области, если параметр ratio равен true, то высота и ширина выделенной области изменяются пропорционально.
    result - в него будут выводиться результат работы директивы (координаты верхнего левого угла, нижнего правого угла, высота и длина выделенной области).
    </li>
    <li>
        <h3>Поддержка:</h3>
        IE9 и выше, Chrome, Opera, Firefox, Safary;
    </li>
    

angularCrop ===========

Module to angularjs for selecting a rectangular area of an image.

  1. Installation:

    var app = angular.module('app', ['angularCrop']);
  2. In template:

    <div ng-init-crop sizes="{width: 600, height: 480}" id="crop" result="cords">
       <img src="img/12.jpg" width="600" height="480" alt=""/>
    </div>
    <div id="result">
        <input type="text" value="{{cords.x1}}" />
        <input type="text" value="{{cords.y1}}" />
        <input type="text" value="{{cords.x2}}" />
        <input type="text" value="{{cords.y2}}" />
        <input type="text" value="{{cords.width}}" />
        <input type="text" value="{{cords.height}}" />
    </div>
            
    cropMinSizes - minimum sizes for select area.
    cropWidth - width work area (can dynamically change).
    cropHeight - height work area (can dynamically change).
    point - start cords for select area, if parameter ratio is true, when height and width select area change in proportion.
    result - object to display the results.
  3. Support:

    IE9 and above, Chrome, Opera, Firefox, Safary;

Module stats last updated: 2015-04-19 01:55:43

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!