Реклама

среда, 1 декабря 2010 г.

Показ изображений в зависимости от разрешения экрана

Встречается иногда такая подлая вещь, когда изображение, которое надо вывести на экран, оказывается слишком большим и рвет ко всем чертям дизайн. Как можно обойти эту проблему? Можно пойти по жутко-быдлометоду, как задание параметров height и width у изображение. Например

<img src="images/image.gif" width="100px" height="100px">

Да, такой вариант выведет картинку размером 100*100 , только если исходное изображение было с разрешением 500000*500000 и весило стопицот мегабайт, то оно будет предварительно загружено (все стопицот мегабайт) и потом показано как 100*100. Вывод, ради ускорения загрузки страницы и экономии трафика, надо нарисовать срипт, который будет ужимать изображение до приличных параметров. Ну или, например, нам надо будет выводить картинку в зависимости от разрешения экрана пользователя. Те кто пишет на JavaScript или Java конечно предложат несколько вариантов решения этой проблемы, брызгая слюной, что на этих языках такая проблема решается проще, понятнее и шустрее. Ктулху с ними, мы пишем на PHP. Я столкнулся с такой проблемой, когда писал сайт для одной мебельной компании. И в итоге получился скрипт, который можно использовать для вывода изображений по заданным размерам или же в зависимости от разрешения экрана пользователя.

<?php

session_start();

$width=(!empty($_GET['w']))?(int)$_GET['w']:false;

$height=(!empty($_GET['h']))?(int)$_GET['h']:false;

if(!$width)

{

$width=(!empty($_SESSION['w']))?((int)($_SESSION['w'])):800;

}

if(!$height)

{

$height=(!empty($_SESSION['h']))?((int)($_SESSION['h'])):800;

}

if($width<0) $width*=-1;

elseif($width==0) $width=800;

if($height<0) $height*=-1;

elseif($height==0) $height=800;

$def_folder="portfolio"; //стандартная папка с изображениями

$folder=(!empty($_GET['fd']))?(trim($_GET['fd'])):$def_folder;

$file=(!empty($_GET['f']))?(trim($_GET['f'])):"";

if(strlen($file)==0 || !file_exists($folder."/".$file))

{

$im=imagecreatefromgif("images/noimage.gif"); //изображение, если ничего нет файла

imagegif($im);

}

else

{

$im;

create($folder,$file,$im);

$imwidth=imagesx($im);

$imheight=imagesy($im);

$width=(int)($width*0.8);

$height=(int)($height*0.8);

if($imwidth>$width || $imheight>$height)

{

$rw=$imwidth-$width;

$rh=$imheight-$height;

if($rw>$rh)

{

$k=$width/$imwidth;

$height=(int)($imheight*$k);

}

else

{

$k=$height/$imheight;

$width=(int)($imwidth*$k);

}

$res=imagecreatetruecolor($width,$height);

imagecopyresampled($res,$im,0,0,0,0,$width,$height,$imwidth,$imheight);

imagedestroy($im);

out($file,$res);

imagedestroy($res);

}

else

{

out($file,$im);

}

}

function create($folder,$file,&amp;$im)

{

$patch=$folder."/".$file;

$type=strrchr($file,'.');

switch($type)

{

case ".jpg":

case ".jpeg":

case ".JPG":

case ".JPEG": $im=imagecreatefromjpeg($patch); break;

case ".png":

case ".PNG": $im=imagecreatefrompng($patch); break;

case ".gif":

case ".GIF": $im=imagecreatefromgif($patch); break;

default: $im=imagecreatefromwbmp($patch);

}

}

function out($file,&amp;$im)

{

$type=strrchr($file,'.');

switch($type)

{

case ".jpg":

case ".jpeg":

case ".JPG":

case ".JPEG":

header("Content-type: " . image_type_to_mime_type(IMAGETYPE_JPEG));

imagejpeg($im,'',100);

break;

case ".png":

case ".PNG":

header("Content-type: " . image_type_to_mime_type(IMAGETYPE_PNG));

imagepng($im);

break;

case ".gif":

case ".GIF":

header("Content-type: " . image_type_to_mime_type(IMAGETYPE_GIF));

imagegif($im);

break;

}

}

?>

Комментариев нет:

Отправить комментарий

Samsung S24E310HL Store mode

Случайно прижал кнопки управления монитором и монитор перешел в режим Store mode. Монитор раз в 10-20 секунд моргает и внизу показывается ре...