Създаване на Thumb

[critrate]

Здравейте.

Чак след приключване на проекта ми забелязах колко лошо съм направил добавянето на новини с обложки.Значи попринцип нямам такъв проблем с галерията,защото е зададен максимум дължина и ширина и thunb се създава като не ги прави по-големи от зададеното,и така картинките си стават малки,но не размазани и разтеглени само дето размерите са им различно,но това не ме бърка защото страницата на галерията ми го позволява.Но обратното се получава при новините.Имам 2 вида новини и те изискват обложка с ТОЧЕН размер + това да не са разтеглени.Какво ли не опитвах,но примерно на новините размера трябва да е 229x90 ,а ако снимката е примерно 400 на 700 thumb я прави доста разтеглена и не се получава нищо,което е приятно за окото.До сега ги оразмерявах чрез Photoshop и така получава желания резултат,но идва време сайта да се пуска и не мога да карам 2-3 човека екип да всяка новина да теглят картинка да влизат във фотошоп и да оразмеряват.Неприятно е,губи се много време пък и не всеки ще се заеме да прави това.Та идеята ми е имате ли някакво предложение ,с което мога да избегна този проблем?Например jquery resize/crop или нещо подобно?

Благодаря ви предварително

//Колко много само изписах

 

[eddyy93]

Има си математическа функция, за пропорционални размери. Тъй като незнам как обработваш файловете и не мога да ти пратя код.

Ако е със GD libary:

Това го ползвах преди време, може и да се оптимизира също леко.

Задавал съм си тук IF - ове, за да мога явно да си ги напасна по дизайна, разгледай кодa, ако те устройва си го ползвай.

list($width,$height)=getimagesize($uploadedfile);

if($width>$height){

$newwidth=500;
$newheight=($height/$width)*$newwidth;
$tmp=imagecreatetruecolor($newwidth,$newheight);

imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,
 $width,$height);

}

if($height>$width) {
$newwidth=350;
$newheight=($height/$width)*$newwidth;
$tmp=imagecreatetruecolor($newwidth,$newheight);

imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,
 $width,$height);
}

if($height==$width) {
$newwidth=450;
$newheight=($height/$width)*$newwidth;
$tmp=imagecreatetruecolor($newwidth,$newheight);

imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,
$width,$height);
}

 

[critrate]

Да,но както аз казах няма ли да станат разтеглени защото по пътя на логиката всяко изображение,което примерно е 400 на 400 примерно ако му зададеш 200 на 50 примерно то ще стане разтегледно ?

попринцип ползвам подобен код за галерията ,но тя ги прави така,че да не се разтеглят т.е. всеки тхъмб е с различен,но приблизителен размер до зададения,а в този случай ми трябва точен размер

 

[eddyy93]

Варианта е - offset, режеш от картинката излишното. После като се отвори картинката, ще се вижда цялата без изрязаното. Ако разгледаш новинарските сайтове, ще видиш как ги режат.

Хубаво е да зададеш като се създава във GD libary празния шаблон за картинката, фона да го направиш с цвета на фона, на който ще слагаш картинката, по някой път ако снимакта е със някакав странен размер, слага един черен бордер, който не е приятен, тогава този фон влиза във действие и замаскира проблема.

 

[StormBreaker]

Има плъгини за jquery, които ти позволяват да crоp-ваш картинката визуално (като в photoshop)

 

[critrate]

И аз първоначално за това мислех,може ли някакво демо за нещо такова ? или някакъв урок,защото наскоро почнах да уча js и съм доста начинаещ

 

[eddyy93]

Да, но ако имаш на първата страница 20 новини, тогава трябва да заредиш 20 пъти самата снимка + да е оразмериш със jquery, а това си е излишно натоварване.

Или имаш предвид, при самото качване на снимката да се оразмеряват и след това да ги записваш със jquery във папката (което не ми се вижда логично, тъй като може да се направи директно със php)?

EDIT:

Да разбрах идеята. Това може би ще е по - добре със jquery. Така поне ще избираш кой краища да се изрязват.

 

[critrate]

с Jquery да се оразмеряват и изрязват така,че да се получи нормална снимка т.е. не да я оразмеря и то да ми изкара горния десен ъгъл,на който има примерно само някакъв фон

и после с php да си се запишат в папката и после си ги зареждам направо от папката.

 

[eddyy93]

Ето:

С GD libary и Jquery

http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/

и демото:

http://www.webmotionuk.co.uk/jquery/image_upload_crop.php

Ако ти свърши работа, дай точката на Сторм, той даде идеята.

 

[critrate]

Златни сте ! Идеално е,и е точно това,което ми трябва.

Само да попитам мога ли да го ползвам т.е. безплатно ли е ? или си има някакъв лиценз

Едит : сега погледнах,че ако се смени тхъмба да е с друг разбер се разтегля всичко .....

 

[critrate]

Едит : сега погледнах,че ако се смени тхъмба да е с друг разбер се разтегля всичко .....

още предложения.

 

[eddyy93]

Кажи ми какви искаш да са му крайните размери?

 

[critrate]

226x96

 

[eddyy93]

Малко по - късно вечерта ще ти го направя, в момента съм зает.


EDIT: А оригиналната картинка, колко искаш да е голяма?

На width: максимално колко ?

 

[critrate]

няма оригинална.За новините само thumb се прави от оригиналната,която качвам(т.е. голямата не се качва само тхъмб се прави на нея)

Благодаря ти много :?:

 

[eddyy93]

Ето:

Качваш снимката и ти прави един thumb със размери: 200 към 100 и една оригинална спрямо width, който съм го задал 800.

На ред 37 - 39 може да си промениш настройките, за големината.

На ред 258 може да промениш съотношението (aspect ratio), само знай че ако го направиш 2, тогава ще ти се реже височината на thumb спрямо това което си задал, сега както е в момента на 100, ще стане 75 - 76 примерно.

http://web-tourist.net/userfiles/5/5021.rar

EDIT Може да си направиш една if .. else проверка, ако примерно картинката има width 700, а height: 50, да пусне съотношение 2 към, тоест проверката трябва да е ако width е 11 - 12 пъти по - голям от height да пусне това съотношение и също така новият height на thumb - а, да не ти е 100 ами друга цифра, която след ресайза да си пасне.

Ама и аз едни обяснения ...

 

[critrate]

Еми просто невероятно .Много ама много ти благодаря.

Само не те разбрах за това "EDIT Може да си направиш една if" ....

 

[eddyy93]

Ами примерно имаш картинка със размери на ширина: 700 пх и височина 50 пх (като за пример мога да ти дам банер или панорамна снимка). Ако съотношението е 1 към вис./дълж., тогава тъмба ще изреже много малка част от снимката, тоест най - много 1/4 от снимката. За да се избегне това може да зададеш една проверка ако width на снимката (оргиналната) е 11 пъти по - голяма от height, тогава промени съотношението на 2 към вис./дълж. и съответно размерите на тъмба ще станат 200 към 75. Във $thumb_height сме задали да е 150, как така ще стане 75 ? Ами това се получава защото сме променили съотношението на 2 към вис./дълж. , следователно се получава нещо като $thumb_height / 2, за да се получи резултата, така че да може да се изрежи повече от картинката по width и да се получи пропорционално.