Image croppen naar vierkant (zonder witruimte)

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Roderick Velo

Roderick Velo

25/03/2011 11:36:45
Quote Anchor link
Ik heb een tijdje geleden een script gemaakt waarmee je een afbeelding kunt uploaden. Omdat het op de site een vierkante image moest zijn en het hier productafbeeldingen betrof, liet ik het script aan de 'smalle zijde' extra witruimte maken zodat de foto op de site dus wel vierkant werd, maar de productafbeelding ook niet uitgerekt werd. Ik heb hier toen gelukkig veel hulp bij gehad omdat ik het zelf erg lastig vind.

Nu wil ik het echter gaan gebruiken voor avatars van gebruikers. Het moet ook weer vierkant zijn, maar nu wil ik niet dat er aan de smalle zijde witruimte bijgezet wordt. Nu wil dat de image gecropped word zodat de het hele avatar gevuld wordt. De avatar moet 100 x 100 zijn. Stel dat je dus een foto hebt van 400 x 300, dan moet de korte zijde dus 100 gemaakt worden en bij de lange zijde moet een aantal pixels weggehaald worden zodat het 100 x 100 wordt. Idealiter wordt het croppen vanuit het midden van de afbeelding gedaan.

Hebben jullie suggesties hoe ik dit het beste kan doen? Ik heb helaas altijd erg veel moeite met dit soort 'reken dingen'.

Relevante deel van het script dat ik gebruik voor de productfoto's waarbij aan de smalle zijde wit ruimte wordt toegevoegd:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?php
// Breedte en hoogte van de afbeelding opvragen
list ($breedte, $hoogte, $image_type) = getimagesize($foto_naam);

// De verhouding van de foto berekenen
$image_ratio = $breedte / $hoogte;

// De afbeelding is breder dan dat die hoog is
if ($image_ratio > 1)
{

    $thumb_breedte = 42;
    $thumb_hoogte = 42 / $image_ratio;
    $mid_breedte = 51;
    $mid_hoogte = 51 / $image_ratio;
    
}

// De afbeelding is hoger dan dat die breed is
else
{
    $thumb_hoogte = 42;
    $thumb_breedte = 42 * $image_ratio;
    $mid_hoogte = 51;
    $mid_breedte = 51 * $image_ratio;
}

    
// Lege thumb/mid in geheugen zetten
$thumb = imagecreatetruecolor(THUMB_SIZE, THUMB_SIZE);
$mid = imagecreatetruecolor(LARGE_SIZE, LARGE_SIZE);

// Jpeg aanmaken
$source = imagecreatefromjpeg($foto_naam);

// Achtergrond thumb/mid wit maken
$wit_thumb = imagecolorallocate($thumb, 255, 255, 255);
imagefill($thumb, 0, 0, $wit_thumb);
$wit_mid = imagecolorallocate($mid, 255, 255, 255);
imagefill($mid, 0, 0, $wit_mid);

// Grote foto verkleinen en kopiëren naar de thumb/mid
imagecopyresampled($thumb, $source, -($thumb_breedte/2) + (THUMB_SIZE/2), -($thumb_hoogte/2) + (THUMB_SIZE/2), 0, 0, $thumb_breedte, $thumb_hoogte, $breedte, $hoogte);
imagecopyresampled($mid, $source, -($mid_breedte/2) + (LARGE_SIZE/2), -($mid_hoogte/2) + (LARGE_SIZE/2), 0, 0, $mid_breedte, $mid_hoogte, $breedte, $hoogte);

// Naam van de thumb/mid... Let maar niet op de afbeelding naam. ;-)
$thumbname = $upload_dir . 'klein/afbeelding.jpg';
$midname = $upload_dir . 'groot/afbeelding.jpg';
    
// Jpeg opslaan
imagejpeg($thumb, $thumbname, 90);
imagejpeg($mid, $midname, 90);
?>


Toevoeging op 25/03/2011 14:16:56:

Al geen hulp meer nodig gelukkig. Ik heb het nu opgelost door het volgende te doen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?php
// De afbeelding is breder dan dat die hoog is
if ($image_ratio > 1)
{

    $thumb_breedte = 42 * $image_ratio;
    $thumb_hoogte = 42;
    $thumb_begin_x = round(($thumb_breedte - 42) / 2);
    $thumb_begin_y = 0;
    
    $mid_breedte = 51 * $image_ratio;
    $mid_hoogte = 51;
    $mid_begin_x = round(($mid_breedte - 51) / 2);
    $mid_begin_y = 0;
}

// De afbeelding is hoger dan dat die breed is
else
{
    $thumb_hoogte = 42 / $image_ratio;
    $thumb_breedte = 42;
    $thumb_begin_x = 0;
    $thumb_begin_y = round(($thumb_hoogte - 42) / 2);
    
    $mid_hoogte = 51 / $image_ratio;
    $mid_breedte = 51;
    $thumb_begin_x = 0;
    $thumb_begin_y = round(($mid_hoogte - 51) / 2);
}

?>


Het is nog niet helemaal naar wens omdat de foto nog niet perfect in het midden uitgesneden wordt, maar het is al een stuk beter. :-) Ik ga zelf nog wel op zoek of er een manier is om het perfect in het midden te krijgen.
Gewijzigd op 25/03/2011 17:58:37 door Roderick Velo
 
Er zijn nog geen reacties op dit bericht.



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.