Поворот изображения по двум точкам на PHP GD + jQuery UI Droppable

30.11.2021

2042

0 комментариев

1 1

Задача

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

Повернутое изображение — После обработки

Решение

Первым этапом нужно сделать возможность перемещения точек над изображением и получение их координат, сделать это можно с помощью плагина jQuery UI Droppable.

HTML-фома:

<form action="" method="get">
	<div class="point-cords">
		Точка А: <input id="x1" type="text" name="x1">
		x <input id="y1" type="text" name="y1" value="">
	</div>
	<div class="point-cords">
		Точка B: <input id="x2" type="text" name="x2">
		x <input id="y2" type="text" name="y2">
	</div>

	<div class="img-wrap">
		<img src="https://snipp.ru/demo/770/img.png" alt="">
		<a class="point" id="point-1" href="#"></a>
		<a class="point" id="point-2" href="#"></a>	
	</div>
</form>

<script src="/jquery/2.1.1/jquery.min.js"></script>
<script src="/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script>
$(function(){
	$("#point-1").draggable({
		containment: ".img-wrap", 
		scroll: false,
		drag: function(event, ui){
			var pos = ui.position;
			$("#x1").val(pos.left + 9);
			$("#y1").val(pos.top + 9);
		}
	});
	
	$("#point-2").draggable({
		containment: ".img-wrap", 
		scroll: false,
		drag: function(event, ui){
			var pos = ui.position;
			$("#x2").val(pos.left + 9);
			$("#y2").val(pos.top + 9);
		}
	});
});
</script>

HTML

CSS-стили:

.img-wrap {
	border: 1px solid #ddd;
	width: 600px;
	height: 385px;
	margin: 0 auto;
	position: relative;
}
.point{
	display: inline-block;
	width: 18px;
	height: 18px;
	background: #ff0000;
	border-radius: 9px;
	line-height: 18px;
	position: relative;
	cursor: move;
	text-decoration: none;
	position: absolute;
	top: 150px;
}
#point-1 {
	left: 100px;
}
#point-2 {
	left: 500px;
}

CSS

Результат:

Второй этап – координаты точек отправляются через форму на сервер, где далее обрабатываются...

Расчёт угла поворота

Если между полученными точками провести прямую, то можно найти угол её наклона относительно горизонтали по следующей формуле:

Подставляем данные в формулу и поворачиваем изображение с помощью функции GD imagerotate().

Функция atan() возвращает арктангенс в радианах, поэтому требуется перевод в градусы с помощью функции rad2deg().

<?php
$x1 = intval($_GET['x1']);
$y1 = intval($_GET['y1']);
$x2 = intval($_GET['x2']);
$y2 = intval($_GET['y2']);

$filename = __DIR__ . '/img.png';

$info = getimagesize($filename);
switch ($info[2]) { 
	case 1: 
		$img = imageCreateFromGif($filename);
		break;					
	case 2: 
		$img = imageCreateFromJpeg($filename); 
		break;	
	case 3: 
		$img = imageCreateFromPng($filename); 
		break;
}
	
// Поворот
$deg = rad2deg(atan(($y2 - $y1) / ($x2 - $x1)));
$rotate = imagerotate($img, $deg, 0);

// Сохранение
switch ($info[2]) { 
	case 1: 
		imageGif($rotate, $filename);
		break;			
	case 2: 
		imageJpeg($rotate, $filename, 100);
		break;			
	case 3: 
		imagePng($rotate, $filename);
		break;
}

imagedestroy($img);
imagedestroy($rotate);

PHP

Если нужно вывести изображение в браузер:

switch ($info[2]) { 
	case 1: 
		header('Content-Type: image/gif'); 
		imageGif($rotate);
		break;			
	case 2: 
		header('Content-Type: image/jpeg');
		imageJpeg($rotate, 100);
		break;			
	case 3: 
		header('Content-Type: image/x-png');
		imagePng($rotate);
		break;
}

imagedestroy($img);
imagedestroy($rotate);
exit();

PHP