StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POPNG - preserving transparency
text
Body
copied!<p>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.</p> <p>Here's how it looked originally...</p> <p><img src="https://i.stack.imgur.com/A6HzJ.jpg" alt="enter image description here"></p> <p>Here's a rough mock-up of what I'm going for:</p> <p><img src="https://i.stack.imgur.com/9nJ7A.jpg" alt="enter image description here"></p> <p>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.</p> <p><img src="https://i.stack.imgur.com/GGVjZ.jpg" alt="enter image description here"></p> <p>Yet when I render it on the page, it has this black background.</p> <p><img src="https://i.stack.imgur.com/7sOSx.jpg" alt="enter image description here"></p> <p>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...</p> <p>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 <code>imagecreatetruecolor()</code> which <code>returns an image identifier representing a black image of the specified size.</code>.</p> <p>I tried following <a href="https://stackoverflow.com/questions/32243/can-png-image-transparency-be-preserved-when-using-phps-gdlib-imagecopyresample">Cheekysoft's question</a> here about preserving transparency after resampling... but it didn't work... with his two main points being:</p> <pre><code>imagealphablending( $targetImage, false ); imagesavealpha( $targetImage, true ); </code></pre> <p>I found if I put <code>$img = imagecreatefrompng($image_file);</code> before I resize/resample it, it displays transparently... which is what I want... but not after I resample it.</p> <p><strong>Thumbnailer.php code:</strong></p> <pre><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); ?> </code></pre> <p>Can anyone help?</p> <p>Thanks!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload