Как перевернуть изображение?

#php #javascript #jquery

Как перевернуть фотографию загруженную на сервер, по клику на кнопку +90 или -90
градусов.Фотографии находятся на сервере, поэтому мне нужно чтобы картинка перевернулась
как на странице так и на сервере.





.con_img {
  float: left;
  position: relative;
  background: #FFD140;
  border: 1px solid #FFC000;
  padding: 2px;
  width: 210px;
  border-radius: 5px;
  -moz-border-radius: 5x;
  -webkit-border-radius: 5px;
  margin: 30px;
}
.img {
  width: 200px;
  max-height: 140px;
  float: left;
  margin: 0px 0px;
  background-color: #fff;
  border: 1px solid #999;
  padding: 4px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  box-shadow: 0 0 2px rgba(0, 0, 0, .5);
  cursor: pointer;
  position: relative;
}
.but {
  cursor: pointer;
  position: relative;
  background: #999;
  width: 30px;
  float: left;
  margin: 6px 28px;
  padding: 0px 6px;
}
.but:hover {
  background: #777;
}

  
- 90
  
+ 90

  





http://jsfiddle.net/rfjdkrj9/
    

Ответы

Ответ 1

Простой пример, как перевернуть картинку ( на 90, 180 , 270 градусов ) и сохранить
на сервере. Если нужно фото перевернуть и просто заменить, поставь одинаковые имена,
картинки которую вращаешь и новой картинки, тогда новая картинка заменит старую.

php:   

    $image = 'image/image.jpg';
$new_image = 'image/new_image.jpg';

$img = imagecreatefromjpeg($image);    // Картинка
    $degrees = 90;                         //Наклон картинки
    $imgRotated = imagerotate($img, $degrees, 0);
    imagejpeg($imgRotated, $new_image, 90);  //  Новая картинка


Вывод html:

 ..... 


Фото примера:


Ответ 2

На стороне клиента перевороты очень легко реализуются с помощью css-свойства transform:rotate(Xdeg).
Только надо не забыть, что это свойство не меняет слои, поэтому надо предусмотреть
изменение внешней обертки под новый размер.

На стороне сервера это хорошо выполнит функция imagerotate().

Можно сделать еще так:


при клике на элемент страницы, отвечающий за поворот создаем iframe, который запрашивает,
допустим rotate.php и несет в своих параметрах url изображения и угол поворота;
php переворачивает картинку, сохраняет ее на сервере и возвращает во фрейм;
заменяем исходную картинку, новой