jQuery + php-gd – kadrowanie zdjęć

Kadrowanie zdjęć na stronie nie jest zbyt łatwe, o ile używa się wyłącznie pól tekstowych na wpisanie wartości przesunięcia. Dzięki javascriptowi (głównie jQuery i wtyczce slider) można ten proces uprościć.

Na początek należy wybrać sposób prezentacji zdjęcia wymagającego wykadrowania. Do dyspozycji mamy tak właściwie dwie metody:
a) pokazanie zdjęcia w pełnych wymiarach i pokazanie na nim ramki, którą będzie się przesuwać
b) pokazanie zdjęcia jako tła i przesuwanie nim tak, żeby w elemencie nadrzędnym wyświetliło się to co trzeba

Wygodniejsza będzie ta druga metoda, bo wielkie zdjęcia nie zajmą większości strony. Dodatkowo przyjmiemy, że zdjęcia mają wymiary większe/równe niż docelowe.

Na początek na stronę wstawiamy:

<style type="text/css">
#kadr { width: 200px ; height: 200px ; border: 1px solid #000; }
</style>

<head>
 <link href="ścieżka/jquery-ui.css" rel="stylesheet" type="text/css"/>
 <script src="ścieżka/jquery.min.js"></script>
 <script src="ścieżka/jquery-ui.min.js"></script>
</head>
....
<body>
<div id="kadr" style="background-image: url( 'obrazek.jpg' )"></div>
<div id="offx"></div>
<div id="offy"></div>
</body>

Wstępnie przyjąłem, że docelowy obrazek będzie miał wymiary 200×200. Ważne jest też pamiętanie o dołączeniu do strony pliku zawierającego styl powiązany z suwakami (będą one podczepione do elementów #offx i #offy). Gdy już jest to gotowe i fragment obrazka wyświetla się w ramkach można przejść do drugiego etapu. Tworzymy na stronie formularz, w którym będą zapisane przesunięcia obrazka:

<form action="kadruj.php" method="post">
<label for="offset_x">Przesunięcie x:</label><input type="text" name="offset_x" id="offset_x" /><br/>
<label for="offset_y">Przesunięcie y:</label><input type="text" name="offset_y" id="offset_y" /><br/>
<input type="submit" value="kadruj" />
</form>

<script type="text/javascript">
var max_x = 'TUTAJ MAKS X' ;
var max_y = 'TUTAJ MAKS Y' ;
var pos_x = 0 ;
var pos_y = 0 ;

$(document).ready(function() {
   $("#offx").slider({
	   max: max_x,
		slide: function(event, ui) {
		  /* ui.value */
		  pos_x = ui.value ;
		  $("#kadr").css( 'background-position', '-'+pos_x+'px -'+pos_y+'px' ) ;
		  $("#offset_x").val( pos_x ) ;
		}
     });

    $("#offy").slider({
	    max: max_y,
 		 slide: function(event, ui) {
		   /* ui.value */
		  pos_y = ui.value ;
		  $("#kadr").css( 'background-position', '-'+pos_x+'px -'+pos_y+'px' ) ;
		  $("#offset_y").val( pos_y ) ;
		 }

	 });

});
</script>

Pos_x oraz pos_y są wstawione po to, aby obrazek nie przeskakiwał na pozycję 0 na osi X przy przesuwaniu go po osi Y i na odwrót. Oprócz przesuwania robimy także podstawienie odpowiednich wartości do pól tekstowych (jeżeli zajdzie taka potrzeba, to do tych pól można dołączyć metodę keyup, która będzie zmieniała położenie suwaków podczas ręcznego wpisywania przesunięcia). Pozostaje jeszcze określenie wartości wstawionych jako max_x oraz max_y. Najłatwiej będzie je uzyskać przy pomocy php:

<?
 list($width, $height) = getimagesize('obrazek.jpg');
 $max_x = $width-200 ;
 $max_y = $height-200 ;
 // przypisanie zmiennych do szablonu, w miejsca opisane przy pomocy słów TUTAJ MAKS X/Y
?>

Po stronie html (lub php – zależnie gdzie łatwiej) pozostaje jeszcze ew. sprawdzenie czy max_x oraz max_y są większe od 0. Nie ma sensu pokazywać suwaka, jeśli obrazek ma wymiar taki jak trzeba.

Pozostało wykonanie skryptu, który wygeneruje odpowiedni obrazek. Na początku wstawiamy sprawdzenie czy dane zostały przesłane, czy są prawidłowe itd. Następnie umieszczamy właściwą część:

<?

$offset_x = $_POST['offset_x'] + 0 ;
$offset_y = $_POST['offset_y'] + 0 ;

// sprawdzenie poprawności


// właściwa część
$width = 200 ;
$height = 200 ;

$src = imagecreatefromjpeg( 'obrazek.jpg' ) ;
$dest = imagecreatetruecolor( $width, $height ) ;
imagecopy( $dest, $src, 0, 0 , $offset_x, $offset_y, $width, $height );
imagejpeg( $dest, 'kadr.jpg' ) ;
imagedestroy( $src ) ;
imagedestroy( $dest ) ;
?>

Tweet
Pin It

jQuery + php-gd – kadrowanie zdjęć

Dodaj komentarz