Обрезка изображения с помощью AngularJS

Я хочу, чтобы пользователь обрезал изображение, я нашел этот плагин JQuery -http://deepliquid.com/content/Jcrop.html

Я попытался использовать его с опцией jQuery passthrough Angular-ui, добавив

9
angular-ui angularjs jcrop

3 ответов

вот мое решение:

Я написал директиву, которая создает элемент img и применяет плагин к нему. Когда src изменяется, этот img удаляется и контент, который был создан плагином, также уничтожается, а затем повторно создается новый img с новым src и снова применяется плагин на нем.

также при условии "выбранного" обратного вызова, чтобы иметь возможность координировать выбранные (завернутые в $apply, чтобы вы могли изменять свои значения области в нем).

Регистрация мое решение в Plunker

9

Я построил демо, используя AngularJS и Jcrop здесь:

демо:https://coolaj86.github.com/angular-image-crop

На Github:https://github.com/coolaj86/angular-image-crop

6

можно использовать ui-event создать объект определение событий с ключи, имена событий и величин обратных вызовов. Или вы можете просто передать эти события в Jcrop (согласно документации)

наконец,новое обновление придя к ui-jq это позволяет добавить ui-refresh которое является выражением, которое нужно наблюдать, чтобы повторно запустить плагин.

теоретически вы должны быть в состоянии сделать 

<img ui-jq="Jcrop" 
     ui-options="{onSelect:myCallback}"
     ui-event="{onChange:'myCallback($event)'}"
     ui-refresh="imgSrc"
     ng-src="imgSrc" />

Примечание: это просто повторно запускает passthrough снова, и автоматически не означает, что это исправит проблему или что плагин будет вести себя правильно при повторной инициализации

мы все еще работаем над хорошим способом, чтобы позволить вам вызвать различные события в разное время.

1