Műveletek képekkel

Műveletek képekkel

Műveletek képekkel

A webprogramozás egyik legnagyobb fejtörője a képekkel való műveletek. Ebben a bejegyzésben nem a képfeltöltés folyamatát fogom bemutatni, hanem azt, hogy hogyan forgathatjuk el a tárhelyünkön tárolt képeinket, úgy, hogy mindemellett megőrizze az esetleges áttetszőségét is a kép. A képfeltöltésről és a képméretezésről majd egy későbbi bejegyzésemben fog szó esni.

Először is határozzuk meg, melyik képpel szeretnénk dolgozni, illetve, hogy hány fokkal szeretnénk ezt a képet elforgatni.

PHP


$filename = 'images/device.png';
$filename = trim(strtolower($filename));
$degrees = 90;

Ha sikerült kiválasztani a megfelelő képet, ellenőrizzük le, hogy valóban megfelelő-e a fájlformátuma a művelethez. Ebben a kódrészletben a GIF, JPG, PNG formátumokat fogjuk megfelelőnek tekinteni. BMP kép is szóba kerülhetne, de ez a veszteségmentes formátum olyan nagyméretű fájlokat eredményez, ami miatt nem túl elterjedt a weboldalak kiszolgálásánál.

PHP


$extension_array = array('gif', 'jpg', 'png');
$type_number = exif_imagetype($filename)-1;
if (filter_var($extension_array[$type_number]))
	{
	$file_extension = $extension_array[$type_number];

	if ($file_extension == 'jpg')
		{
		}
	elseif ($file_extension == 'png')
		{
		}
	elseif ($file_extension == 'gif')
		{
		}
	}
else
	{
	$result_text = '<p class="alert alert-danger">A fájl nem kép!</p>';
	}

JPG formátum esetén

Itt semmi különösebb kihívás nincs a számunkra. A képből készítünk egy pontos pixel térképet és elmentjük a "$image" változóba. A "imagerotate" függvénnyel pedig ezt a képet a "$degrees" változóba mentett forgatási szög szerint elforgatjuk. Végül a képet lementjük egy "rotate.jpg" nevű képként.

PHP


if ($file_extension == 'jpg')
	{
	$image = imagecreatefromjpeg($filename) or die('Hiba a fájl megnyitása közben: '.$filename);

	$rotation = imagerotate($source, $degrees, 0);

	folder_open('images');
	if (imagejpeg($rotation, __DIR__.'/images/rotated.png'))
		{
		$result_text = '<p class="alert alert-success">Sikerült a művelet!</p>';
		}
	else
		{
		$result_text = '<p class="alert alert-danger">Nem sikerült a művelet!</p>';
		}
	folder_close('images');
	}

GIF formátum esetén

A folyamat hasonló, mint az előző formátum esetén, csakhogy itt számolnunk kell a GIF áttetszőségével is. Éppen ezért a "imagecolortransparent" függvény segítségével megvizsgáljuk, hogy egyáltalán van-e a képen áttetsző felület. Amennyiben van az elforgatást követően meg kell adnunk a kirajzolt képnek ezeket a beálltásokat, ahhoz, hogy a megfelelő területen az elforgatást követően is áttetsző legyen a kép egyes részei.

PHP


if ($file_extension == 'gif')
	{
	$image = imagecreatefromgif($filename) or die('Hiba a fájl megnyitása közben: '.$filename);

	$transparent_index = imagecolortransparent($image);
	if ($transparent_index != -1)
		{
		$transparent_color = imagecolorsforindex($image, $transparent_index);
		}

	$rotation = imagerotate($image, $degrees, 0);
	if (filter_var_array($transparent_color))
		{
		$transparent_new = imagecolorallocate($rotation, $transparent_color['red'], $transparent_color['green'], $transparent_color['blue']);
		$transparent_new_index = imagecolortransparent($rotation, $transparent_new);
		imagefill($rotation, 0, 0, $transparent_new_index);
		}

	folder_open('images');
	if (imagegif($rotation, __DIR__.'/images/rotated.png'))
		{
		$result_text = '<p class="alert alert-success">Sikerült a művelet!</p>';
		}
	else
		{
		$result_text = '<p class="alert alert-danger">Nem sikerült a művelet!</p>';
		}
	folder_close('images');
	}

PNG formátum esetén

A GIF-hez hasonlóan a PNG is eltárol áttetsző felületet, viszont ennél többre is képes. Képes a színátmenetben is tárolni áttetszőséget, így a feladat némileg bonyolódik. De szerencsére nem sokkal. A megoldás hasonló az előző példához, csak erre a célra a PNG formátum esetén más függvények alkalmazhatóak.

PHP


if ($file_extension == 'png')
	{
	$image = imagecreatefrompng($filename) or die('Hiba a fájl megnyitása közben: '.$filename);

	$rotation = imagerotate($image, $degrees, imagecolorallocatealpha($image, 0, 0, 0, 127));
	imagealphablending($rotation, false);
	imagesavealpha($rotation, true);

	folder_open('images');
	if (imagepng($rotation, __DIR__.'/images/rotated.png'))
		{
		$result_text = '<p class="alert alert-success">Sikerült a művelet!</p>';
		}
	else
		{
		$result_text = '<p class="alert alert-danger">Nem sikerült a művelet!</p>';
		}
	folder_close('images');
	}

Így néz ki egyben

PHP


<?php
$filename = 'images/device.png';
$filename = trim(strtolower($filename));
$degrees = 90;

function get_friendly_url($string, $extension, $result)
	{
	if (filter_var($string))
		{
		$url_old = array('(í|Í)', '(á|Á)', '(é|É)', '(ö|Ö)', '(ő|Ő)', '(ü|Ü)', '(ű|Ű)', '(ó|Ó)', '(ú|Ú)');
		$url_new = array('i', 'a', 'e', 'o', 'o', 'u', 'u', 'o', 'u');
		$url_regexp = '([^a-zA-Z0-9]+)';

		$result_array = array();
		$slug_array = explode('/', $string);
		foreach ($slug_array as $slug)
			{
			$slug = preg_quote($slug);
			$slug = preg_replace($url_old, $url_new, $slug);

			$slug = strtolower(preg_replace($url_regexp, '-', $slug));
			$slug = preg_replace('/^[\-]+/', '',$slug);
			$slug = preg_replace('/[\-]+$/', '',$slug);

			$result_array[] = $slug;
			}

		$string = implode('/', $result_array);
		if (filter_var($extension))
			{
			$string .= $extension;
			}

		if ($result == 'get')
			{
			return $string;
			}
		elseif ($result == 'print')
			{
			echo $string;
			}
		}
	}

function folder_create($folder)
	{
	$folder = get_friendly_url($folder, '', 'get');

	if (filter_var($folder))
		{
		$folder_steps = '';
		$slug_array = explode('/', $folder);
		foreach ($slug_array as $slug)
			{
			if (filter_var($slug))
				{
				if (filter_var($folder_steps))
					{
					$folder_steps .= '/';
					}

				$folder_steps .= $slug;

				if (!is_dir(__DIR__.'/'.$folder_steps))
					{
					mkdir(__DIR__.'/'.$folder_steps, 0777);
					file_put_contents(__DIR__.'/'.$folder_steps.'/index.php', '', LOCK_EX);
					}
				}
			}
		}
	}

function folder_open($folder)
	{
	$folder = get_friendly_url($folder, '', 'get');

	if (filter_var($folder))
		{
		$folder_steps = '';
		$slug_array = explode('/', $folder);
		foreach ($slug_array as $slug)
			{
			if (filter_var($slug))
				{
				if (filter_var($folder_steps))
					{
					$folder_steps .= '/';
					}

				$folder_steps .= $slug;

				if (!is_dir(__DIR__.'/'.$folder_steps))
					{
					folder_create($folder_steps);
					}
				else
					{
					chmod(__DIR__.'/'.$folder_steps, 0777);
					}
				}
			}
		}
	}

function folder_close($folder)
	{
	$folder = get_friendly_url($folder, '', 'get');

	if (filter_var($folder))
		{
		$slug_array = explode('/', $folder);
		$slug_count = count($slug_array) - 1;
		for ($i = $slug_count; $i >= 0; $i--)
			{
			$folder_steps = '';
			for ($y = 0; $y <= $i; $y++)
				{
				if (filter_var($slug_array[$y]))
					{
					if (filter_var($folder_steps))
						{
						$folder_steps .= '/';
						}

					$folder_steps .= $slug_array[$y];
					}
				}

			if (filter_var($folder_steps))
				{
				if (is_dir(__DIR__.'/'.$folder_steps))
					{
					chmod(__DIR__.'/'.$folder_steps, 0755);
					}
				}
			}
		}
	}

function folder_delete($folder)
	{
	$folder = get_friendly_url($folder, '', 'get');

	if (is_dir(__DIR__.'/'.$folder))
		{
		$dir = opendir(__DIR__.'/'.$folder);
		while (false !== ($filename = readdir($dir)))
			{
			if (($filename != '.') && ($filename != '..'))
				{
				unlink(__DIR__.'/'.$folder.'/'.$filename);
				}
			}

		rmdir(__DIR__.'/'.$folder);
		}
	}



$result_text = '';
$extension_array = array('gif', 'jpg', 'png');
$type_number = exif_imagetype($filename)-1;
if (filter_var($extension_array[$type_number]))
	{
	$file_extension = $extension_array[$type_number];

	if ($file_extension == 'jpg')
		{
		$image = imagecreatefromjpeg($filename) or die('Hiba a fájl megnyitása közben: '.$filename);

		$rotation = imagerotate($source, $degrees, 0);

		folder_open('images');
		if (imagejpeg($rotation, __DIR__.'/images/rotated.png'))
			{
			$result_text = '<p class="alert alert-success">Sikerült a művelet!</p>';
			}
		else
			{
			$result_text = '<p class="alert alert-danger">Nem sikerült a művelet!</p>';
			}
		folder_close('images');
		}
	elseif ($file_extension == 'png')
		{
		$image = imagecreatefrompng($filename) or die('Hiba a fájl megnyitása közben: '.$filename);

		$rotation = imagerotate($image, $degrees, imagecolorallocatealpha($image, 0, 0, 0, 127));
		imagealphablending($rotation, false);
		imagesavealpha($rotation, true);

		folder_open('images');
		if (imagepng($rotation, __DIR__.'/images/rotated.png'))
			{
			$result_text = '<p class="alert alert-success">Sikerült a művelet!</p>';
			}
		else
			{
			$result_text = '<p class="alert alert-danger">Nem sikerült a művelet!</p>';
			}
		folder_close('images');
		}
	elseif ($file_extension == 'gif')
		{
		$image = imagecreatefromgif($filename) or die('Hiba a fájl megnyitása közben: '.$filename);

		$transparent_index = imagecolortransparent($image);
		if ($transparent_index != -1)
			{
			$transparent_color = imagecolorsforindex($image, $transparent_index);
			}

		$rotation = imagerotate($image, $degrees, 0);
		if (filter_var_array($transparent_color))
			{
			$transparent_new = imagecolorallocate($rotation, $transparent_color['red'], $transparent_color['green'], $transparent_color['blue']);
			$transparent_new_index = imagecolortransparent($rotation, $transparent_new);
			imagefill($rotation, 0, 0, $transparent_new_index);
			}

		folder_open('images');
		if (imagegif($rotation, __DIR__.'/images/rotated.png'))
			{
			$result_text = '<p class="alert alert-success">Sikerült a művelet!</p>';
			}
		else
			{
			$result_text = '<p class="alert alert-danger">Nem sikerült a művelet!</p>';
			}
		folder_close('images');
		}



	if (filter_var($image))
		{
		imagedestroy($image);
		}
	if (filter_var($rotation))
		{
		imagedestroy($rotation);
		}
	}
else
	{
	$result_text = '<p class="alert alert-danger">A fájl nem kép!</p>';
	}
?>

A letölthető forráskódot szabadon tovább lehet fejleszteni egyedi igényeknek megfelelően. Akár kiegészítve egy űrlappal, melynek segítségével megadható, mekkora szögben forgassa el a képet, illetve akár azt is, hogy egy feltöltött képből, vagy a tárhelyen tárolt képek közül tallózva használjon fel forrást a művelethez.

Demo letöltése

Leírásaink azon kezdő és haladó programozóknak nyújtanak segítséget, akik már minimális szinten foglalkoztak weboldalkészítéssel. Ha szeretnél jobban elmélyülni a témában, vagy elsajátítani alapokat, még tovább fejlődni, akkor nézz körbe tanfolyam kínálatunkban, ahol a kezdőtől a profi szintig nyújtunk képzéseket a számodra.

Oszd meg barátaiddal is!

Facebook Twitter Linkedin

Elérhetőségeink

  • Címünk: 1139 Budapest, Frangepán utca 3. (1. emelet)

  • Ügyfélfogadás, beiratkozás: Hétfőtől - péntekig: 09:00-17:00

  • Telefonszámunk: 06 70 604 2060, vagy 06 1 4500 110

  • E-mail címünk:

Közösségünk