УрокJava-скрипт, который обрезает фотографии и сохраняет их на сервере при помощи Ajax

Не так давно получил примерно такое техзадание: вывести фотографию, которую пользователь может обрезать графическими средствами, после чего сохранить картинку на сервере. На самом деле тз было немного сложнее, но к сути вопроса это не относится ;)

Скрипт, который позволяет графически выделить фотографию я нашёл довольно быстро - imgareaselect (пример можно посмотреть там же). Но остался вопрос как после выделения скрипта сохранить фотографию на сервере - иначе после перезагрузки страницы выбранная пользователем область пропадёт.

Для этого я написал небольшой модуль, который можно скачать тут. Он включает в себя файл с упакованным скриптом imgareaselect, и моим модулем, который я назвал image_cropper.

Поговорим немного о том, как модуль работает. Изначально фотография обрабатывается такой строкой кода (файл image_cropper.js):

('img').imgAreaSelect({
  x1: 0,
  x2: 100,
  y1: 0,
  y2: 100,
  movable: true,
  resizable: true,
  handles: true,	
  show: true,
  onSelectEnd: imgCrop,
  onInit: imgCrop,
});

Запускаются на выполнение скрипта imgareaselect все картинки, находящиеся на странице. Конечно, вам такое вряд ли понадобится, так что можно будет уточнить, какие именно фотографии обрабатывать:

('.node img').imgAreaSelect({
  //настройки
});

После запуска этой фунции все выбранные картинки будут обработаны скриптом. Однако не всё так просто - надо же ещё и сохранить обрезанную часть на сервере. Для этого я добавил в запуск скрипта следующие настройки:

onSelectChange: imgCrop,
onInit: imgCrop,

Это значит, что при инициализации и выборе пользователем размера обрезанного изображения, будет выполняться функция imgCrop(). Давайте посмотрим внутренности imgCrop():

function imgCrop(img, selection) {
 
  $.post(
    'http://' + window.location.hostname +'/image_crop',
    {
      w: selection.width,
      h: selection.height,
      x: selection.x1,
      y: selection.y1,
      i: img.src,
    },
    function(txt){
      //выводит в отладочный див имя созданного файла
      $("#text").text(txt);  
    },
    'text'
  ); 
}

Каждый раз когда вызывается эта функция, она отправляет данные о фотографии на страницу /image_crop, а там уже эти данные подхватывает мой модуль, обрабатывает их, и возвращает имя полученного файла. Файлы сохраняются в /sites/default/files. Если вам надо будет поменять папку, куда сохраняются изображения, то надо поправить 39 строку файла image_cropper.module. Например, чтобы картинки сохранялись в /sites/default/files/img надо исправить так:

imagejpeg($image, $_SERVER['DOCUMENT_ROOT'].'/'.file_directory_path().'/img/'.$filename, $quality);

Не забудьте предварительно создать каталог и дать ему права доступа, позволяющие записывать в него (ставьте 777 - не ошибётесь).

Вот и всё. Если будут какие-то вопросы или предложения - пишите, с удовольствием сделаю модуль лучше!

Комментарии

Аватар пользователя D.Choomc
D.Choomc написал:

Молодец) Крутой модуль)
Посмотрел страницу модуля.. Странно, почему выделенная область тока квадратная. А если мне надо прямоугольную область выделить ( Широкую или узкую. Или у меня что-то глючит?

25.11.2010 00:46
Аватар пользователя Spleshka
Spleshka написал:

Скорее всего глючит) Изображение может быть и прямоугольным. Квадратная область выделяется только в том случае, если при запуске скрипта указано ratio: '1:1'. В другом случае - растягивается как угодно

25.11.2010 00:53
Аватар пользователя guest
guest написал:

Так вроде есть уже готовый модуль http://drupal.org/project/imagefield_crop

25.11.2010 08:28
Аватар пользователя Spleshka
Spleshka написал:

Да, мне уже показали. Но в моём модуле есть отличия - во-первых, он намного меньше :) Во-вторых, можно применять не только для изображений, загруженных через сск. В-третьих, когда я писал своё решение, я про imagefield_crop не знал, к сожалению

25.11.2010 12:49
Аватар пользователя t1mm1
t1mm1 написал:

будем смотреть что и как..
в модуле не хватает readme.txt =)
и как его после включения мучать.
ча потестим..

25.11.2010 15:29
Аватар пользователя Spleshka
Spleshka написал:

Не положил его в архив) Теперь перезалил

25.11.2010 16:45
Аватар пользователя Дима Богуш
Дима Богуш написал:

На самом деле, иногда готовые модули из-за мелочей не подходят. Иногда очень нужно вот именно так, как хочется, а не как предлагается по умолчанию. Поэтому, отличный модуль и пусть их становится больше

26.11.2010 02:23
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

Народ, а у меня сам скрипт выделения не работает, у фотки id='photo'как и в методе но выделение на ней появлятся не хочет.

03.02.2011 16:40
Аватар пользователя Spleshka
Spleshka написал:

а ты делаешь так:

('#photo').imgAreaSelect({
	x1: 0,
	x2: 100,
	y1: 0,
	y2: 100,
	movable: true,
	resizable: true,
	handles: true,	
	show: true,
	onSelectEnd: imgCrop,
	onInit: imgCrop,
});
03.02.2011 16:55
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

все равно не работает =(

03.02.2011 19:48
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

ссылка битая

03.02.2011 19:52
Аватар пользователя Spleshka
Spleshka написал:

поправил

03.02.2011 23:48
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

А как его можно установить на форум PHPBB3? Будьте добры, подскажите?

06.03.2011 17:47
Аватар пользователя moove
moove написал:

Есть такая штука — JCrop. Выполняет аналогичные функции. На мой взгляд, удобнее.

01.09.2011 04:03
Аватар пользователя Spleshka
Spleshka написал:

Скриптов по обрезанию фоток много, и все они практически идентичны. Но они не сохраняют фото на сервере. В любом случае надо настраивать сохранение фоток в файловую систему Друпала.

01.09.2011 13:28
Аватар пользователя pashara
pashara написал:

Нечто у меня не получается.... подключил явы от этой сборки, и изображение перестало выделяться.......

26.11.2011 18:06
Аватар пользователя Сергей
Сергей написал:

Не использую друпал, но статья очень интересная. Использовал ее для своего проекта. Только мне остается неясным, зачем каждый раз при изменении отправлять post запрос? Как-то нерационально получается, учитывая что функция вызывается каждый раз при изменении изображения.

19.09.2012 22:02
Аватар пользователя Тимур
Тимур написал:

Это только для Drupal? Пожалуйста выложите исходники с готовыми примерами или демо хотя бы.

23.07.2013 10:32
Аватар пользователя Максим Компанец
Максим Компанец написал:

Здравствуйте! Мне очень понравилась статья, но не могу понять как настроить все. У меня самописный сайт на пхп, но в яваскриптах я шарю плохо. Что к чему подключать? Как сделать, чтобы обрезание и сохранение фото выполнялось при нажатии на кнопку.

20.09.2013 18:56
Аватар пользователя Тёма Гепард
Тёма Гепард написал:

Помоги найти фото в вк. Было и на аве и в переписке. Где-то 25 марта 2015 года. А потом УДАЛИЛ. Напиши на почту jprd@bk.ru

04.09.2015 14:56

Комментировать