Round corners of image


#1

I got some code from: here that i modified as follows:

function rounded(){       
   
   $image_file = "sailwBob&Russ.png";
   $corner_radius =  20;                  // The default corner radius is set to 20px
   $angle =  0;                           // The default angle is set to 0º
   $topleft     =  false;                 // Top-left rounded corner is shown by default
   $bottomleft  =  true;                  // Bottom-left rounded corner is shown by default
   $bottomright =  true;                  // Bottom-right rounded corner is shown by default
   $topright    =  true; 

            
 
   $images_dir = 'img/';
   $corner_source = imagecreatefrompng('img/rounded_corner.png');
 
   $corner_width = imagesx($corner_source);  
   $corner_height = imagesy($corner_source);  
   $corner_resized = ImageCreateTrueColor($corner_radius, $corner_radius);

  
   ImageCopyResampled($corner_resized, $corner_source, 0, 0, 0, 0, $corner_radius, $corner_radius, $corner_width, $corner_height);

   
 
   $corner_width = imagesx($corner_resized);  
   $corner_height = imagesy($corner_resized);  
   $image = imagecreatetruecolor($corner_width, $corner_height);  
   $image = imagecreatefrompng($images_dir . $image_file);                  // replace filename with $_GET['src'] 
   $size = getimagesize($images_dir . $image_file);                        // replace filename with $_GET['src'] 
   $white = ImageColorAllocate($image,255,255,255);
   $black = ImageColorAllocate($image,0,0,0);

   print_r2($size);
   print_r2($image);
 
   // Top-left corner
   if ($topleft == true) {
       $dest_x = 0;  
       $dest_y = 0;  
       imagecolortransparent($corner_resized, $black); 
       imagecopymerge($image, $corner_resized, $dest_x, $dest_y, 0, 0, $corner_width, $corner_height, 100);
   } 
 
   // Bottom-left corner
   if ($bottomleft == true) {
       $dest_x = 0;  
       $dest_y = $size[1] - $corner_height; 
       $rotated = imagerotate($corner_resized, 90, 0);
       imagecolortransparent($rotated, $black); 
       imagecopymerge($image, $rotated, $dest_x, $dest_y, 0, 0, $corner_width, $corner_height, 100);  
   }
 
   // Bottom-right corner
   if ($bottomright == true) {
       $dest_x = $size[0] - $corner_width;  
       $dest_y = $size[1] - $corner_height;  
       $rotated = imagerotate($corner_resized, 180, 0);
       imagecolortransparent($rotated, $black); 
       imagecopymerge($image, $rotated, $dest_x, $dest_y, 0, 0, $corner_width, $corner_height, 100);  
   }
 
   // Top-right corner
   if ($topright == true) {
       $dest_x = $size[0] - $corner_width;  
       $dest_y = 0;  
       $rotated = imagerotate($corner_resized, 270, 0);
       imagecolortransparent($rotated, $black); 
       imagecopymerge($image, $rotated, $dest_x, $dest_y, 0, 0, $corner_width, $corner_height, 100);  
   }
 
   // Rotate image
   $image = imagerotate($image, $angle, $white);

    print_r2($image);
 
   // Output final image
   imagepng($image,$images_dir . "test.png");
 
   // Remove temp files
    imagedestroy($image);  
    imagedestroy($corner_source);


   return ("looks like rounded() ran");
} 

The code produces a test.png but doesn’t round the corners.


#2

why is css not able to do this for you? you can apply a radius to images very easily nowadays:

<img class="roundedCorners" src="file.png" alt="" />

img.roundedCorners { border-radius: 12px; }

edit: for top left radius:

border-radius: 12px; border-top-left-radius: 0px;

#3

What john said. You can also see a very neat trick with border-radius right here on this page. The avatar images are standard square images with border-radius: 50%, which means they will be shown circular :slight_smile:


#4

Jim, i also use this trick for animal icons on my work-in-progress website. I also apply a transform scale on hover. CSS3 is very entertaining :slight_smile:


#5

Thanks, if I could use css I would but unfortunately that’s not really an option. This has to all be done in php.

Anyway, I found the problem. Using a white overlay on a white background obscures the rounded corners.