PNG - preserving transparency

Question

I'm trying to redesign my site so that my original square, tile-based rendering of images can be more of a cutout of the image... to get rid of that grid pattern.

Here's how it looked originally...

Here's a rough mock-up of what I'm going for:

So I resaved an image thumbnail with a transparent background... I just want the dog to show, and the square is transparent which will show the site's background underneath.

Yet when I render it on the page, it has this black background.

I've checked my CSS to see if there is some sort of img class, or class for the rendered comics... or even the bootstrap to see where there may be a background-color being assigned to black (and also searched for hex code 000000), but didn't find one...

Then I found that it had to do with the way my thumbnailing script was resampling the png... Since I'm getting a black background for the supposedly transparent image, I blame imagecreatetruecolor() which returns an image identifier representing a black image of the specified size..

I tried following Cheekysoft's question here about preserving transparency after resampling... but it didn't work... with his two main points being:

imagealphablending( $targetImage, false );
imagesavealpha( $targetImage, true );

I found if I put $img = imagecreatefrompng($image_file); before I resize/resample it, it displays transparently... which is what I want... but not after I resample it.

Thumbnailer.php code:

    <?php
#Appreciation goes to digifuzz (http://www.digifuzz.net) for help on this

$image_file = $_GET['img']; //takes in full path of image
$MAX_WIDTH = $_GET['mw'];
$MAX_HEIGHT = $_GET['mh'];
global $img;

//Check for image
if(!$image_file || $image_file == "") { 
    die("NO FILE."); 
}

//If no max width, set one
if(!$MAX_WIDTH || $MAX_WIDTH == "") { 
    $MAX_WIDTH="100"; 
}

//if no max height, set one
if(!$MAX_HEIGHT || $MAX_HEIGHT == "") { 
    $MAX_HEIGHT = "100"; 
}

$img = null;
//create image file from 'img' parameter string
if( preg_match('/\.jpg$/',$image_file) || preg_match('/\.jpeg$/',$image_file) ){ 
    $img = imagecreatefromjpeg($image_file); 
} else { 
    $img = imagecreatefrompng($image_file); 
} 

//if image successfully loaded...
if($img) {
    //get image size and scale ratio
    $width = imagesx($img);
    $height = imagesy($img);

    //takes min value of these two
    $scale = min($MAX_WIDTH/$width, $MAX_HEIGHT/$height);

    //if desired new image size is less than original, output new image
    if($scale < 1) {
        $new_width = floor($scale * $width);

        $new_height = floor($scale * $height);


        $tmp_img = imagecreatetruecolor($new_width, $new_height);

        //copy and resize old image to new image
        imagecopyresampled($tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height);

        //replace actual image with new image
        $img = $tmp_img;
    }
}
//set the content type header
header('Content-Type: image/png', true); 

imagealphablending( $img, false );
imagesavealpha( $img, true );
imagepng($img); 


imagedestroy($img);

?>

Can anyone help?

Thanks!

Answer 1

You need to call imagealphablending() on your destination image BEFORE you resample/resize the image:

//copy and resize old image to new image
imagealphablending($tmp_img, false);
imagecopyresampled($tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
// ...

Answer 2

You placed alphablending and traparent code well below after creating image. Just place them before the your createresample line and transparent image with image that created by imagecreatefrompng.

imagealphablending( $tmp_img, false );
imagesavealpha( $tmp_img, true );
imagecopyresampled($tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height);

Or you can Try following

$img = ImageCreateFromPNG($image_file);
$tmp_img = imagecreatetruecolor($new_width,$new_height);
imagecolortransparent($tmp_img, imagecolorallocate($tmp_img, 0, 0, 0));
imagecopyresampled($tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height);