Обрезать и загрузить изображение с помощью jQuery / Java - PullRequest
5 голосов
/ 07 февраля 2012

Я ищу плагин jQuery, который позволяет следующее:

  1. Выбор / просмотр изображения (из файловой системы пользователя)
  2. Предварительный просмотр изображения с возможностью CROP
  3. Загрузить обрезанное изображение на сервер (сервлет JAVA)

Есть ли какие-либо указатели для этого?

PS: я обнаружил множество автономных плагинов для обрезки изображений (которые работают до-определенные изображения), но не те, которые также позволяют загружать пользовательские изображения (через сервлеты Java).

Ответы [ 2 ]

1 голос
/ 07 февраля 2012

Один из способов обрезать изображение перед его фактической загрузкой на сервер в браузерах, поддерживаемых HTML5, объясняется здесь .Упомянутое решение представляет собой комбинацию из: JCrop, JQuery, HTML5-файлов и API-интерфейсов Canvas.

Другой путь (для браузеров, отличных от HTML5):

  1. Выбор / просмотр изображения
  2. Загрузить его на сервер (как временное изображение)
  3. Предварительный просмотр изображения с возможностью CROP
  4. Отправить координаты CROP на сервер
  5. Обрезать и сохранить изображение насторона сервера
0 голосов
/ 07 февраля 2012

Короче говоря, вам нужно сделать следующее.

Используйте HTML-форму "multipart", чтобы разместить изображение в сервлете

<form name="frm" enctype="multipart/form-data" action="/saveimage" method="POST">
  <input type="file" name="filetoupload" />    
  <input type="submit" value="Upload" />
</form>

В сервлете запишите этот файл в «публичную» папку, чтобы он был доступен для браузера. Вы можете использовать http://commons.apache.org/fileupload/ для этой цели, если вы используете сервлеты. Если вы используете каркас веб-приложения, он может предложить вам способ загрузки двоичных данных.

Вернуться страницу со ссылкой / ссылкой на загруженное изображение. Возможно, вы захотите использовать какой-нибудь алгоритм генерации случайных имен файлов, чтобы избежать конфликта ссылок на файлы.

<img src="/public/random-image.jpg"/>

Используйте JCrop http://deepliquid.com/content/Jcrop.html, чтобы получить координаты обрезки. Документация JCrop очень многословна о том, как ее использовать. Обратите внимание, что вам нужно инициализировать JCrop для привязки с ссылкой на изображение выше.

Напишите другой сервлет, в который вы можете ПОСТАВИТЬ / ПОЛУЧИТЬ обрезанные координаты и делать с ним все, что вы хотите.

...