JCrop black background on transparent PNG files

Hi,

I managed to get JCrop to work with PHP. All is good except that when cropping PNG files with transparent backgrounds, the cropped image has a black background. Can someone please advise how to fix this? Many thanks

In the code below, I've tried changing the bgcolor to white and transparent, I've also tried changing the bgopacity to 0
	
$('#thumbnail').Jcrop({
trueSize: [<?php echo $current_large_image_width; ?>,<?php echo $current_large_image_height; ?>],
onSelect:    showCoords,
bgColor:     '',
bgOpacity:   .4,
setSelect:   [ 125, 100, 650, 520 ],
aspectRatio: 550 / 420,
},function(){
 jcrop_api = this;
});

Open in new window


And the PHP:
$src_img=imagecreatefrompng($img_name);
	
imagesavealpha($src_img, true); //saving transparency

// we create a new image with the new dimensions
$dst_img=ImageCreateTrueColor($thumb_w,$thumb_h);

//these 2 lines must be here in order to maintain transparency
imagealphablending( $dst_img, false );
imagesavealpha( $dst_img, true );

$transparent = imagecolorallocatealpha($dst_img, 255, 255, 255, 127); //seting transparent background
imagefilledrectangle($dst_img, 0, 0, $thumb_w, $thumb_h, $transparent);

// resize the big image to the new created one
imagecopyresampled($dst_img,$src_img,0,0,0,0,$thumb_w,$thumb_h,$old_x,$old_y);

// output the created image to the file. Now we will have the thumbnail into the file named by $filename
imagepng($dst_img,$filename);

Open in new window

kbitAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ray PaseurCommented:
Please post a link to one of the images that is giving you a problem.  I believe I have seen this before and solved the problem, but I'd like to test before I post the code.  Thanks!
Ray PaseurCommented:
Actually, nevermind.  I think this script works well enough to demonstrate the principles.
http://iconoun.com/demo/image_thumbnail.php?w=450&h=352&i=images/scale_grumpy_cat.png

Original image:
http://iconoun.com/demo/images/scale_grumpy_cat.png

<?php // demo/image_thumbnail.php

/**
 * RESIZE AN IMAGE TO FIT INSIDE A DEFINED TRANSPARENT SPACE
 * USE CASE: <img src="image_thumbnail.php?i=your.jpg&w=150&h=100" />
 */
error_reporting(E_ALL);


// ACQUIRE THE ARGUMENTS - MAY WANT SOME SANITY TESTS HERE?
$thumb_w   = !empty($_GET["w"]) ? $_GET['w'] : 600;
$thumb_h   = !empty($_GET["h"]) ? $_GET['h'] : 400;
$image_url = !empty($_GET["i"]) ? $_GET['i'] : trigger_error("Missing GET argument 'i' for Image URL", E_USER_ERROR);;

// CREATE THE THUMBNAIL IMAGE RESOURCE AND FILL IN TRANSPARENT
$thumb = imagecreatetruecolor($thumb_w, $thumb_h);
imagesavealpha($thumb, TRUE);
$empty = imagecolorallocatealpha($thumb,0x00,0x00,0x00,127);
imagefill($thumb, 0, 0, $empty);

// GET ORIGINAL IMAGE DIMENSIONS
$array = getimagesize($image_url);
if ($array)
{
    list($image_w, $image_h) = $array;
}
else
{
    trigger_error("NO IMAGE $image_url", E_USER_ERROR);
}

// ACQUIRE THE ORIGINAL IMAGE
$image_ext = explode('.', $image_url);
$image_ext = end($image_ext);
$image_ext = trim(strtoupper($image_ext));
switch($image_ext)
{
    case 'JPG' :
    case 'JPEG' :
        $image = @imagecreatefromjpeg($image_url);
        if ($image) break;

    case 'PNG' :
        $image = @imagecreatefrompng($image_url);
        if ($image) break;

    default : trigger_error("UNKNOWN IMAGE TYPE: $image_url", E_USER_ERROR);
}

// GET THE LESSER OF THE RATIO OF THUMBNAIL H OR W DIMENSIONS
$ratio_w = ($thumb_w / $image_w);
$ratio_h = ($thumb_h / $image_h);
$ratio   = ($ratio_w < $ratio_h) ? $ratio_w : $ratio_h;

// COMPUTE THUMBNAIL IMAGE DIMENSIONS
$thumb_w_resize = $image_w * $ratio;
$thumb_h_resize = $image_h * $ratio;

// COMPUTE THUMBNAIL IMAGE CENTERING OFFSETS
$thumb_w_offset = ($thumb_w - $thumb_w_resize) / 2.0;
$thumb_h_offset = ($thumb_h - $thumb_h_resize) / 2.0;

// COPY THE IMAGE TO THE CENTER OF THE THUMBNAIL
imagecopyresampled
( $thumb
, $image
, $thumb_w_offset
, $thumb_h_offset
, 0
, 0
, $thumb_w_resize
, $thumb_h_resize
, $image_w
, $image_h
)
;

// SHOW THE NEW THUMB IMAGE
header('Content-type: image/png');
imagepng($thumb);

// RELEASE THE MEMORY USED BY THE RESOURCES
imagedestroy($thumb);
imagedestroy($image);

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
kbitAuthor Commented:
Nice code Ray, thanks very much for that, this works beautifully!
Ray PaseurCommented:
Great!  Thanks for the points and thanks for using E-E!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.