Поворот изображения с помощью нажатия кнопки

@Joliz · Регистрация: 08.02.2012

Студворк — интернет-сервис помощи студентам

У нас есть страничка на которой размещено изображение и кнопка.

У меня сделано так, что при нажатии кнопки скрипт переворачивает изображение, но не на данной странице. А хотелось бы именно на ней.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Поворот изображения</title>
 </head>
 <body>
 
  <p style="text-align: left">
  <img src="test.jpg" width="420" height="420">
</p>
  <p style="text-align: left">
 
<form name="form1" action="rotate.php">
  <button><img src="/images/rotate_up.png" WIDTH=50 HEIGHT=50 ALIGN="ABSMIDDLE" BORDER=0 alt="Поворот по часовой"
          <style="vertical-align: middle"></button>
  <button><img src="/images/rotate_down.png" WIDTH=50 HEIGHT=50 ALIGN="ABSMIDDLE" BORDER=0 alt="Поворот против часовой"
          <style="vertical-align: top"></button></p>
 
</form>
 </body>
</html>

PHP
1
2
3
4
5
6
7
8
9
10
<?php
$filename = 'test.jpg';
$degrees = 180;
 
header('Content-type: image/jpeg');
 
$source = imagecreatefromjpeg($filename);
$rotate = imagerotate($source, $degrees, 0);
imagejpeg($rotate);
?>

каким образом можно реализовать, что бы изображение перерисовывалось?

@Para bellum · 09.02.2012, 12:41

Joliz, если вы хотите, чтобы перевёрнутое изображение подгружалось без перезагрузки страницы, то вам нужно это сделать при помощи ajax.
Объясняю более подробно:
- Для начала вам нужно загрузить jQuery с сайта http://jquery.com
- Затем скопировать скачанный файл в директорию с файлами (один из которых - "rotate.php")
- Далее подключить этот файл к странице с изображением
Вот код, который это реализует:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 <html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Поворот изображения</title>
<!--Подключаем библиотеку jQuery (начало)--> 
  <script src="jquery-1.7.1.js" type="text/javascript"></script>
  <!--Подключаем библиотеку jQuery (конец)--> 
 </head>
 <body>
 
  <p style="text-align: left">
  <img src="test.jpg" id="image">
  </p>
  
  <p style="text-align: left">
      <button id="rotate"><img src="/images/rotate_up.png" WIDTH=50 HEIGHT=50 ALIGN="ABSMIDDLE" BORDER=0 alt="Поворот по часовой" style="vertical-align: middle;"></button>
  </p>
  <script>
      $("#rotate").click
      (
          function()
          {
              $("#image").attr("src", "http://www.newsite.ru/rotate.php");
          }
      );
  </script>
 </body>
</html>

А файл "rotate.php" оставьте без изменений...

@Joliz · 09.02.2012, 21:59 **[ТС]**

Lyodik, спасибо большое!!!

Очень помогло!!!

Добавлено через 38 минут
а как можно сделать чтобы скрипт отслеживал это событие (нажатие кнопки) и дальше? Чтобы можно было несколько раз перевернуть

@Para bellum · 10.02.2012, 06:44

Сообщение от Joliz

а как можно сделать чтобы скрипт отслеживал это событие (нажатие кнопки) и дальше? Чтобы можно было несколько раз перевернуть

Это сделать очень легко таким способом:
1) В файле с изображением замените текущий JS код, на следующий:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
<script>
      var corner_rotate = 90;
      $("#rotate").click
          (
              function()
                  {
                      $("#image").attr("src", "http://www.newsite.ru/rotate.php?corner="+corner_rotate);
                      corner_rotate = corner_rotate + 90;
                  }
          );
  </script>

Если хотите, чтобы изображение поворачивалось не против часовой стрелки, а по часовой - замените "90" на "-90"

2) А в файле rotate.php это:

PHP
1
$degrees = 180;

Замените на это:

PHP
1
$degrees = $_GET['corner']; // Угол поворота

И всё, изображение после каждого нажатия будет поворачиваться на 90 градусов

@Joliz · 10.02.2012, 22:56 **[ТС]**

Спасибо, очень изящный код получился

@tufanov · 04.04.2014, 21:00

Спасибо lyod за скрипт! Я тоже воспользовался-)) Если тема еще "живая" подскажите пожалуйста, после того как картинка перевернулась как ее перезаписать на старую?

@Para bellum · 05.04.2014, 07:28

Не по теме:

tufanov, а что ж не живая? :) Живее всех живых :).

Сообщение от tufanov

после того как картинка перевернулась как ее перезаписать на старую?

Тут я не понял. В смысле "перезаписать на старую"? Если можно - обстоятельней.

Добавлено через 1 минуту
Только наверное вращать изображение лучше с помощью plugin'a какого-нибудь, для jQuery. Чтобы сервер не грузить.

@tufanov · 05.04.2014, 09:08

Сообщение от lyod

Тут я не понял. В смысле "перезаписать на старую"? Если можно - обстоятельней.

Может я чего то не допонял, но я сделал все как было выше, все работает, при нажатии картинка крутиться, но не перезаписывается в перевернутый вариант, т.е. при перезагрузки страницы она загружается такая как и была изначально!?

@Forastero · 05.04.2014, 09:28

Попробуйте изменить вызов imagejpeg() на следующий.

PHP
1
imagejpeg($rotate, $file, 100);

@tufanov · 05.04.2014, 10:08

Сообщение от Forastero

imagejpeg($rotate, $file, 100);

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

У меня еще есть один вопросик, можно ли этот скрипт как то доработать что бы он работал в цикле? для каждой картинке отдельно?

HTML5
1
2
<img src="/foto_user.jpg" id="image">
<button id="rotate"><img src="/img/888.jpg" /></button>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
<script>
   var corner_rotate = 90;
   $("#rotate").click
        (
           function()
             {
                 $("#image").attr("src", "/rotate.php?corner="+corner_rotate);
                 corner_rotate = corner_rotate + 90;
              }
        );   
</script>

Новые блоги и статьи Все статьи Все блоги /
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Рецензия / Мнение Это мой обзор планшета X220 с точки зрения школьника. Недавно я решила попытаться уменьшить свой. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .

@Joliz 0 / 0 / 0 Регистрация: 08.02.2012 Сообщений: 3
	09.02.2012, 21:59 [ТС]
	Lyodik, спасибо большое!!! Очень помогло!!! Добавлено через 38 минут а как можно сделать чтобы скрипт отслеживал это событие (нажатие кнопки) и дальше? Чтобы можно было несколько раз перевернуть 0

@Joliz 0 / 0 / 0 Регистрация: 08.02.2012 Сообщений: 3
	10.02.2012, 22:56 [ТС]
	Спасибо, очень изящный код получился 0

@tufanov 0 / 0 / 0 Регистрация: 04.04.2014 Сообщений: 6
	04.04.2014, 21:00
	Спасибо lyod за скрипт! Я тоже воспользовался-)) Если тема еще "живая" подскажите пожалуйста, после того как картинка перевернулась как ее перезаписать на старую? 0