Лучший способ обрезания картинок на клиенте с AngularJS

Обзор модуля

| Категории: Javascript, AngularJS
Анна Аминева

Иллюстрация блокнота

За выходные я попытался сделать самодостаточную AngularJS Директиву, которая позволит вам обрезать картинку перед тем, как она загрузится на сервер. Моей целью было создать ее хорошо работающей на мобильных устройствах, быстрой и интуитивно понятной.
Традиционные обрезатели картинок включают в себя рисование прямоугольных границ с помощью подвижной рамки, но я захотел, чтобы ее было проще перетаскивать именно с помощью жестов.

###Возможности

  • Поддержка сенсорного управления, свайп жест, чтобы двигать, пинч для увеличения/уменьшения
  • Добавление любой картинки с вашего девайса
  • Вывод в base64 data uri
  • Использует HTML5 Canvas для показа изображения в изменяющемся контексте, позволяет перетаскивать и приближать
  • Обратите внимание, что независимо от формы обрезающей рамки, полученные изображения будут квадратной формы. Например, используя “круглую” форму параметр покажет круглую рамку, но полученные изображения должны быть замаскированы, при отображении пользователю.

###Давайте посмотрим на работающий пример:

Try the AngularJS Image Cropper on JSBin

###Загружаем

Download Angular Image Crop on Github

###Поддержка браузера

IE10+, Android 3+, iOS 6+, basically all modern browsers!
Cmon, what did you expect? Oh, and any requests to get this working in IE9 and below will be filed away in my ‘special’ folder.
IE10+, Android 3+, iOS 6+, в принципе все современные браузеры!
А что же вы ожидаете? Ох и любые запросы, чтобы эта директива заработала в IE9 и ниже будут отосланы в мою “специальную” папку.

###Использование

  • добавьте директиву
  • добавьте стили
  • инициализируйте директиву как в примере кода see standalone JSBin

Пример разметки для добавления директивы
<image-crop data-width="300" data-height="300" data-shape="circle" data-result="imageCropResult" data-step="imageCropStep" ></image-crop>

###Параметры

  • ширина (строка)- ширина обрезателя
  • высота (строка)- высота обрезателя
  • форма (строка) - ширина рамки обрезания (circle/square)
  • результат (привязанная переменная, строка) - переменная, в которой будет храниться результирующий data uri
  • шаг (привязанная переменная, число) - переменная, которая указывает какой шаг увидит пользователь (используется для сброса)

####Известные проблемы

*В настоящее время не работает с некоторыми картинками, сделанными некоторыми мобильными устройствами, по причине использования exif данных об ориентации картинки. Другие изображения на мобильных устройствах, включая скаченные фотографии, работают отлично. Это должно быть скоро исправлено!

####Пожалуйста, помогите улучшить этот модуль

Я разработал этот модуль для создающегося мной приложения, так как я не мог найти достойной альтернативы. Теперь я набросал первую версию за выходные и планирую завоевать мир с этой программой, но я не могу это сделать без вашей помощи!
Я был бы очень признателен за конструктивные отзывы и особые предложения!