Uploading transparent images adds a black background

Question

I am trying to make a function to handle avatar uploads. My problem is, when I upload a transparent image, it turned everything which is transparent black after I resize it.

I have tried using the imagesavealpha() & imagealphablending() options, but the background is still turning black.

It might just be me being blind and not seeing the problem in the code, but I have no idea why it does this.

I can confirm that after the image has been moved to the image/avatars folder just after being uploaded, the background is still transparent.

this is my current code, I have been testing with .png images:

function upload_avatar(){
    $base_path = SYSTEM_PATH;

    if($_FILES['avatar_img']['tmp_name'] != '') {
        $id = md5($this->user_id());
        $filename = $_FILES['avatar_img']['name'];
        $file_basename = substr($filename, 0, strripos($filename, '.')); // strip extention
        $file_ext = substr($filename, strripos($filename, '.')); // strip name
        $filesize = $_FILES['avatar_img']['size'];
        $newfilename = $id . $file_ext;

        if ($file_ext == ".jpg" || $file_ext == ".JPG" || $file_ext == ".jpeg" || $file_ext == ".png" || $file_ext == ".gif"){
            if($filesize <= 153600){

                move_uploaded_file($_FILES['avatar_img']['tmp_name'], $base_path."/images/avatars/" . $newfilename);

                //resize image form
                list($width, $height) = getimagesize($base_path."/images/avatars/" . $newfilename);
                $scale_height = $height/$width;
                $scale_width = $width/$height;

                //Find height and width of the image
                if($width > $height && $width > 150){
                    $width_new = 150;
                    $height_new = round($width_new*$scale_height);
                }else if($height > $width && $height > 150){
                    $height_new = 150;
                    $width_new = round($height_new*$scale_width);
                }else{
                    $height_new = $height;
                    $width_new = $width;
                }

                switch($file_ext) {
                    case ".jpg" :
                        case ".jpeg":
                            $source = imagecreatefromjpeg($base_path."/images/avatars/" . $newfilename);
                    break;

                    case ".png" :
                        $source = imagecreatefrompng($base_path."/images/avatars/" . $newfilename);
                    break;

                    default:
                        $source = imagecreatefromgif($base_path."/images/avatars/" . $newfilename);
                    break;
                }

                $destination = imagecreatetruecolor($width_new, $height_new);

                imagesavealpha($destination, true);
                imagealphablending($destination, true);

                imagecopyresized($destination, $source, 0, 0, 0, 0, $width_new, $height_new, $width, $height);

                switch($file_ext) {
                    case ".jpg":
                    case ".jpeg":
                        imagejpeg($destination, $base_path."/images/avatars/" . $newfilename, 85);
                    break;

                    case ".png":
                        imagepng($destination, $base_path."/images/avatars/" . $newfilename, 8);
                    break;

                    default:
                        imagegif($destination, $base_path."/images/avatars/" . $newfilename, 85);
                    break;
                }

                return $newfilename;
            }else{
                $this->upload_avatar = '<br />But the avatar was not updated. The avatar\'s size exceeded the 150kb limit. ';
                return '';
            }
        }else{
            $this->upload_avatar = '<br />But the avatar was not updated. The avatar must be one of the following formats: jpg, jpeg, png or gif. ';
            return '';
        }
    }else{
        return '';
    }
}

Any help would be appreciated as I am going nuts looking at this now.

Thanks!

Answer 1

This here may be what you're looking for. The second comment contains an example of resizing pngs and gifs while preserving transparency.

p.s. I'd have added this as a comment but I don't have the rights to do that yet.