После того как пользователь выбрал у себя картинку на компе, в отдельном блоке с id=’image2’ должна появиться эта картинка с измененным размером. Изменение размера картинки по тому же принципу что и в коде php. Тоесть сама маленькая картинка на сервер не полетит, а она необходима для того чтобы пользователь представлял как в итоге будет выглядеть изборажение.
Тоесть что бы в браузере был сделан ресайз точно так же как сделается на сервере.
Вот код php который получает картинку и кладет ее на сервер + делает миниатюру и дает ей название.
Вот как он делает миниатюру, точно так же нужно сделать в браузере, и просто вывести ее в div id=’image2’.
<?php
session_start();
//функция ресайза
function image_resize($src, $dest, $width, $height, $rgb=0x000000, $quality=100) {
if (!file_exists($src)) return false;
$size = getimagesize($src);
if ($size === false) return false;
if ($width=='0' && $height=='0') return false;
$format = strtolower(substr($size['mime'], strpos($size['mime'], '/')+1));
$icfunc = 'imagecreatefrom'.$format;
$icfunc2 = 'image'.$format;
if (!function_exists($icfunc)) return false;
if (!function_exists($icfunc2)) return false;
$isrc = $icfunc($src);
if ($height=='0') {
$height = floor( $width * ( $size[1] / $size[0] ) );
$idest = imagecreatetruecolor($width, $height);
imagecopyresampled($idest, $isrc, 0, 0, 0, 0, $width, $height, $size[0], $size[1]);
if ($format=='jpeg') $icfunc2($idest, $dest, $quality);
else $icfunc2($idest, $dest);
}
elseif ($width=='0') {
$width = floor( $height * ( $size[0] / $size[1] ) );
$idest = imagecreatetruecolor($width, $height);
imagecopyresampled($idest, $isrc, 0, 0, 0, 0, $width, $height, $size[0], $size[1]);
if ($format=='jpeg') $icfunc2($idest, $dest, $quality);
else $icfunc2($idest, $dest);
}
else {
$idest = imagecreatetruecolor($width, $height);
imagefill($idest, 0, 0, $rgb);
if ($size[0]<$width && $size[1]<$height) {
$new_left = floor(($width - $size[0]) / 2);
$new_top = floor(($height - $size[1]) / 2);
imagecopy($idest, $isrc, $new_left, $new_top, 0, 0, $width, $height);
if ($format=='jpeg') $icfunc2($idest, $dest, $quality);
else $icfunc2($idest, $dest);
}
elseif ($size[0]<$width && $size[1]>$height) {
$new_left = floor(($width - $size[0]) / 2);
$new_top = floor(($size[1] - $height) / 2);
imagecopy($idest, $isrc, $new_left, 0, 0, $new_top, $width, $height);
if ($format=='jpeg') $icfunc2($idest, $dest, $quality);
else $icfunc2($idest, $dest);
}
elseif ($size[0]>$width && $size[1]<$height) {
$new_left = floor(($size[0] - $width) / 2);
$new_top = floor(($height - $size[1]) / 2);
imagecopy($idest, $isrc, 0, $new_top, $new_left, 0, $width, $height);
if ($format=='jpeg') $icfunc2($idest, $dest, $quality);
else $icfunc2($idest, $dest);
}
else {
$new_width = $width;
$new_height = floor( $size[1] * ( $new_width / $size[0] ) );
$new_left = '0';
$new_top = floor(($new_height - $height) / 2);
if ($new_height<$height) {
$new_height=$height;
$new_width = floor($size[0] * ($new_height / $size[1]) );
$new_left = floor(($new_width - $width) / 2);
$new_top = '0';
}
$idest2 = imagecreatetruecolor($new_width, $new_height);
imagecopyresampled($idest2, $isrc, 0, 0, 0, 0, $new_width, $new_height, $size[0], $size[1]);
imagecopy($idest, $idest2, 0, 0, $new_left, $new_top, $width, $height);
if ($format=='jpeg') $icfunc2($idest, $dest, $quality);
else $icfunc2($idest, $dest);
imagedestroy($idest2);
}
imagedestroy($isrc);
imagedestroy($idest);
}
return true;
}
//тут работаем с картинкой и применяем к ней функцию
if (isset($_FILES['file'])) {
$url_name_gal = '../tov-img/'; //имя папки, в которую будем сохранять файлы
$imgs_width_gal = '800'; //максимальная ширина картинки
$thumb_width_gal = '336'; //ширина для миниатюры
$thumb_height_gal = '138'; //высота для миниатюры
ini_set('memory_limit', '2M'); //увеличиваем размер оперативки для работы с изображениями, а то крупных картинок не загрузишь
$file = $_FILES['file']['tmp_name'];
$filename = $_FILES['file']['name'];
$size = getimagesize($_FILES['file']['tmp_name']); //получаем массив значений размеров картинкии её расширения
$mime = strtolower(substr($size['mime'], strpos($size['mime'], '/')+1)); //узнаём mime-тип изображений
if ($mime=='jpeg') $format = 'jpg'; else $format = $mime; //если mime jpeg, то он будет записан как файл .jpg
$new_filename = 'image'.time().'.'.$format; //генерируем новое имя файла
copy($file, $url_name_gal.'/'.$new_filename); //копируем файл
//если ширина картинки превышает максимальную, то уменьшаем картинку до допустимого максимума и сохраняем.
if ($size['0']>$imgs_width_gal) {
if (image_resize($url_name_gal.'/'.$new_filename, $url_name_gal.'/'.$new_filename, $imgs_width_gal, '0'))
echo 'Изображение было уменьшено до указанной ширины в '.$imgs_width_gal.'px. <br>';
}
//создаём миниатюру для загруженной картинки
if (image_resize($url_name_gal.'/'.$new_filename, $url_name_gal.'small'.$new_filename, $thumb_width_gal, $thumb_height_gal)) echo 'Создание миниатюры произведено успешно';
else echo 'Миниатюра создана не была.';
}
Сделать можно либо стандартным кроссбраузерным яваскриптом либо с использованием jquery.
из кода php ничего не выкидывал, выложил как он есть на серваке
кто за это сколько возьмет пишите обсудим
